本文总结了CSS布局中框模型的细节，包括内容、填充、边框和空白边的概念，并对比了标准与IE怪异模式的区别。此外还介绍了定位方式（相对定位、绝对定位和固定定位）的特点及float属性在元素布局中的应用。
最近心得比较多，可能是有些懒，好久没有写blog了，昨晚看些css的资料，有些心得，总结一下，祝大家也祝自己新的一年万事大吉。
一、框模型中从里到外是内容(context)、填充(padding)、边框(border)和空白边(margin)；注意width、height指的是内容的宽度和高度，但IE没有按标准实现，自己产生了一个怪异的框模型，width、height指的是内容、填充、边框宽度和高度的总和；当两个垂直的空白边相遇时，将发现叠加，取两者中原值较大者。
二、对于定位的几点说明：相对定位是相对于文档流中的初始位置，元素本身即使移动到了别处也要占据原来没有变化时的初始位置；而绝对定位是相对于最近已定位的祖先元素，如果不存在已定位的祖先元素那么就是最初的包含块，绝对定位与文档流无关；固定定位(fixed)其实是绝对定位的一个子类别，它能使元素出现在页面的相同位置处，而不随页面上下的拖动。(但IE对它不支持，真不知gates搞什么鬼)
三、关于float的一点心得：由于float元素不在文档流中，不占空间，所以下面的代码无法实现div包含img和p元素的效果,去掉注释看看。
<html><head>
<style type="text/css">...
<!--
.new {...}{ background-color: Gray; border: solid 1px Black;
}.new img {...}{ float: left;}.new p {...}{ float: right;}/**//*利用after伪类实现.new p:after { clear: both;}*/
--></style></head><body><div class="new"><img src="arrow.gif" alt="arrow"><p>我们都喜欢css</p>helloworld</div></body></html>
扫一扫
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
