BlogJava-互联网技术-文章分类-csshttp://www.blogjava.net/lijiecong/category/32917.html搜索 ajax 网站架构zh-cnTue, 15 Jul 2008 09:27:09 GMTTue, 15 Jul 2008 09:27:09 GMT60css中 percentage 和 pixel定位的区别http://www.blogjava.net/lijiecong/articles/214937.htmlDomDomTue, 15 Jul 2008 04:48:00 GMThttp://www.blogjava.net/lijiecong/articles/214937.htmlhttp://www.blogjava.net/lijiecong/comments/214937.htmlhttp://www.blogjava.net/lijiecong/articles/214937.html#Feedback0http://www.blogjava.net/lijiecong/comments/commentRss/214937.htmlhttp://www.blogjava.net/lijiecong/services/trackbacks/214937.html     对于background中pixel和percentage 定位的区别在于以元素的哪个点为参考。 pixel是以图片的左上角与containing block 的左上角之间的距离。而percentage是不以图片的左上角与containing block左上角之间的比列。而是以图片的左上角为基点，根据percentage算出图片中的位置。以这个算出的位置与containing block左上角之间的比列为最后定位的位置。例如 20% 20%. 离图片上部 左部20%处为基点，把这个基点放置在距containing block 左边和右边各20%处。



Dom 2008-07-15 12:48 发表评论
]]>css positionhttp://www.blogjava.net/lijiecong/articles/214310.htmlDomDomTue, 15 Jul 2008 02:29:00 GMThttp://www.blogjava.net/lijiecong/articles/214310.htmlhttp://www.blogjava.net/lijiecong/comments/214310.htmlhttp://www.blogjava.net/lijiecong/articles/214310.html#Feedback0http://www.blogjava.net/lijiecong/comments/commentRss/214310.htmlhttp://www.blogjava.net/lijiecong/services/trackbacks/214310.html normal flow就是根据元素在页面中出现的先后次序来决定它们各自的位置。
    属性 position:relative就是元素以自身在normal  flow中的位置进行偏移！也就是说具有position:relative属性的元素，先按normal flow占有网页中某一个位置。然后在正对这个所占的位置做relative的移动。

   具有属性position:absolute的元素 是不属于normal flow流的，它是以定位过的最近祖先为参考，直到html的祖先。所谓定位过的祖先元素，就是那些不以normal flow方式为最终位置的元素。position:relative, position:absolute, position:fixed为定位过的，而position:static为normal  flow。

    属性position:fixed ，这个属性其实absolute的一个子类。它也不属于normal flow，它以整个viewpoint为参考，在viewpoint中定位。这个属性在ie6中并不支持，你需要通过其它方法来达到这种效果。

     float:right|left, 具有此属性的元素将不会在normal flow中，直接往容器的左边或右边对齐。因为它不在normal flow,所以该元素后面的box会自动填充 float元素剩下的空间。如果不想让后面的元素填充float元素剩余空间，可对其后元素使用 clear:left|right|both; 分别表面元素的那一边不能靠近/填充到float元素。
  
    结论position:fixed是以viewpoint为参照系，position:absolute为离它最近且定位过的containing block为参照系， 其余都是以元素所在的containing block为参照系。


Dom 2008-07-15 10:29 发表评论
]]>css selector(选择子)格式http://www.blogjava.net/lijiecong/articles/213702.htmlDomDomFri, 11 Jul 2008 07:13:00 GMThttp://www.blogjava.net/lijiecong/articles/213702.htmlhttp://www.blogjava.net/lijiecong/comments/213702.htmlhttp://www.blogjava.net/lijiecong/articles/213702.html#Feedback0http://www.blogjava.net/lijiecong/comments/commentRss/213702.htmlhttp://www.blogjava.net/lijiecong/services/trackbacks/213702.htmlcommon selector(通用选择子)

    element/type selector:      p,h1,a{color:#444; padding:3px;}
    Descendant selectors(后代选择子)   li a{color:#444; } 此样式只对 li下的 a 有效。这两种表示方法一般是对整个页面中的元素设置样式。
    对于只设置部分样式的情况用class和id，class可以被任意多的元素使用，而id一般只针对某一个元素，整个页面唯一。
   ID selector: 以#号开始    #ID_Name{color:#444}
   class selector: 以.号开始   .Class_name{color:#444}

可以组合 type Descendant id/class selector,    #ID_name li{color:#444}   .class_name li{color:#444}, #ID_name .class_name{color:#444}. 这种写法类似面向对象中对象的引用。


除了静态的使用 css样式外，还可以根据对象的状态来应用不同的样式,称为 pseudo-class
/* makes all visited links green */
a:visited {color:green;}
/* makes links red when hovered or activated */
a:hover, a:active {color:red;}

universal selector (全局选择子)

     *{color:#44}应用于文档中所有的element

高级选择子
目前 ie6并不支持，你可以对element的某个属性设置css style，甚至根据属性值来设置样式。

Dom 2008-07-11 15:13 发表评论
]]>