本文详细解释了CSS中的框模型、定位方式以及浮动原理。针对IE浏览器的特殊处理进行了说明，并探讨了相对定位、绝对定位及固定定位的区别。此外，还通过实例介绍了如何正确使用浮动属性来实现元素布局。
一、框模型中从里到外是内容(context)、填充(padding)、边框(border)和空白边(margin)；注意width、height指的是内容的宽度和高度，但IE没有按标准实现，自己产生了一个怪异的框模型，width、height指的是内容、填充、边框宽度和高度的总和；当两个垂直的空白边相遇时，将发现叠加，取两者中原值较大者。
二、对于定位的几点说明：相对定位是相对于文档流中的初始位置，元素本身即使移动到了别处也要占据原来没有变化时的初始位置；而绝对定位是相对于最近已定位的祖先元素，如果不存在已定位的祖先元素那么就是最初的包含块，绝对定位与文档流无关；固定定位(fixed)其实是绝对定位的一个子类别，它能使元素出现在页面的相同位置处，而不随页面上下的拖动。(但IE对它不支持，真不知gates搞什么鬼)
三、关于float的一点心得：由于float元素不在文档流中，不占空间，所以下面的代码无法实现div包含img和p元素的效果,去掉注释看看。
<html> <head> 
<style type="text/css">... 
<!-- 
.new {...}{ 
.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>
扫一扫
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
