CSS的继承与层叠
看两个例子就明白了。
<省去一些显而易见的代码，表义为主.>
第一个例子：
body{color:red;}
<body>
段落1
<p>段落2</p>
</body>
这里面段落1，段落2字体颜色全部是红色.显然p继承了body的color样式。
第二个例子：
body{color:red;}
p{color:green;}
<body>
段落1
<p>段落2</p>
</body>
这里段落1是红色，而段落2是绿色。这里面是通过判断样式的特殊性来设定的样式。
判断样式特殊性的方法，可以参考这里。
通过上面的例子，得到一个通俗的理解。继承和java里面方法继承类似，子元素继承父元素；而层叠可以看成
java里面的方法重载，子元素和父元素定义了同一个样式，具体用那个通过选择器特殊性的高低和位置来确
定。
注意：虽然我用方法重载来类别css中的层叠，但是两者的判断依据是不一样的。并非子元素定义的样式就
一定会被使用。
看这个例子：
p{color:green;}
body{color:red;}
<body>
段落1
<p>段落2</p>
</body>
结果是段落1，段落2全是红色。
css中的框模型
标准框模型：标准框模型通过内容区域＋填充(padding)＋边框(border)＋空白边(margin)组成。
在标准css中，元素的width和height指定的时内容区域的宽度和高度。
padding指定的是内容区域到边框(border)的距离。通常而言的背景(background)指的是内容区域和填充所
组成的这个区域。空白边(margin)通常用来设置元素之间的间隔。
IE的框模型：这里的IE的狂模型指定的是IE5，IE6版本中怪异模式中指定的框模型。区别在于IE框模型中
Width和height指定的是内容区域＋填充＋边框组成的宽度和高度。这里就形成了有个问题，而解决这个问
题的办法就是不要给元素添加具有指定宽度的填充，而尝试填充或空白边添加到元素的父元素或子元素。
具体的可以看我写的示例。
注意一般而言：元素的填充，边框，空白边是可以选择是否存在的，一般默认其值为0。但是有些情况下元
素可能会被用户代理样式表设置它们。所以，可以通过*{ margin:0;padding:0;}来统一设定。
空白边叠加
就是当有空白边遇到一起的时候，空白边之间会发生一种叠加。叠加的结果会是空白边中值相对较大的保留
下来，而这种叠加可以发散在任何两个相邻的空白边之间，无论这个空白边属于那个元素，是否包含，是否
是同一个元素的。
块元素(block)和行内元素(inline 内联元素)
块元素：指那些默认情况下会换行显示的元素。
行内元素：那些默认的情况下显示方式类似于文本的元素。默认情况下是同行显示，直到总体内容的宽度大
于父元素的宽度时才换行显示。
其实还有一部分叫做：可变元素 这些元素到底属于块元素还是行内元素需要具体环境决定。
这里有一篇好的介绍文章可以参考：
《元素block element和内联元素inline element》地址如下：
http://hi.baidu.com/mazhifang/blog/item/42977ed0c662588ea1ec9c77.html
相应的元素决定了组成框的类型，而元素的display属性可以改变生成框的类型。
通过设置display＝block，可以将一个行内元素表现的像块级元素一样。
而设置display＝none，则表示该元素根本不是框，这样这个元素就不在占有文档中的空间。
CSS的定位机制
普通流(position:static)：就是块级框从上到下一个接一个的排列，框之间的垂直距离由框的垂直空白边计算出来.
相对定位(position:relative)：块级框相对于它在普通流中所处的位置进行相对的偏移。
注：在使用相对定位时，无论元素是否移动，它仍然占着原来的空间。因此，移动元素有可能会覆盖其他的
元素).2个方面：块框＋行框(包裹行内框)
绝对定位(position:absolute)：相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普
通中的位置.与之相反,绝对 定位使元素的位置与文档流无关,因此不占据空间.普通文档流中其他元素的布局就
像绝对定位的元素不存在 时一样.相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在
普通中的位置.与之相 反,绝对定位使元素的位置与文档流无关,因此不占据空间.普通文档流中其他元素的布局
就像绝对定位的元素不存在时一样.
我总结的：如何确定绝对定位的原始祖先? 父元素 被定位 由近及远
固定定位：(position:fixed)
它是绝对定位的一个子类别.差异在于固定元素的包含块是视口.这使我们能够创建总是出现在窗口中相同位 置的浮动元素.但是,这种定位方式各种浏览器的支持各有不同.变通的方法是通过javascript来控制，当然也可以是用css。
浮动：(position:float)
浮动模型可以左右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘.因为浮动框不在文档的普通流中,
所以文档普通流中的块框表现得就像浮动框不存在一样.
关于示例可以看这里：CSS定位机制示例
清除浮动的几种方法
1.父框也浮动；
2.理由clear来做元素清除==>3.扩展：利用伪类after来清除浮动
4.利用Javascript来动态清除浮动
5.利用overflow属性设置auto或hidden来清除浮动
更全面的看下面的：
《CSS规范 闭合浮动元素介绍》
http://web.rdxx.com/CSS/2007/9/1322433557845.shtml
关于浮动的深入认识
－－－－－－－－－－－－－推荐顺序阅读
1CSS浮动原理
http://blog.csdn.net/fishsoul/archive/2007/09/20/1792776.aspx
2.CSS Float Theory: Things You Should Know
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ （EN）
http://hi.baidu.com/yan5201314/blog/item/9f5bbd0ecac641e536d122f5.html （CN）
3.IE6下浮动bug详解
http://hi.baidu.com/xzkcz/blog/item/d25b580fadaac4296059f30a.html
平凡而简单的人一个，无权无势也无牵无挂。一路厮杀，只进不退，死而后已，岂不爽哉！
收起对“车”日行千里的羡慕；收起对“马”左右逢缘的感叹；目标记在心里面，向前进。一次一步，一步一脚印，跬步千里。
这个角色很适合现在的我。
posted on 2007-12-20 22:38
过河卒 阅读(1918)
评论(1) 编辑 收藏 所属分类:
W3C/Css/Html