以盒子为例，分析了CSS中的盒子模式，为学习CSS的读者建立了一个清晰的模型。W3C定义的盒子模式如下： 。

宽度和高度定义内容部分的宽度和高度，填充边框边距的宽度依次添加到外部。背景填充填充和内容部分。但是由于浏览器设计的问题，不同的浏览器会有不同的显示效果。左右页边距翻倍当box为浮点数时，IE6中box的左右页边距会翻倍，左边内侧左边距明显大于5px。此时，将inner的显示属性定义为inline。根据W3C定义，没有float属性的外盒不会自动计算高度。要计算高度，clear:both两者都必须添加到内层的最后一个框中。Opera、网景、mozilla等。不会计算外盒高度，但微软ie6会自动计算外盒高度。上面的代码在ie中有一个黑色背景，但是它没有正确计算上下边距。在inner2下添加包含clear:both属性的div后，可以正确计算边距。然而，火狐中仍然没有黑色背景。通常的解决方案是定义clear:both的高度，或者插入全角空格，这样就必须增加额外的高度。在互联网上，更好的解决方案是在外盘div中加入溢出属性，使用clear:both，这样不会增加额外的高度。因此，应该在外部css中定义溢出属性，在内部CSS中添加clear属性。居中的问题需要定义元素的宽度和水平边距。如果您的布局包含在一个层(容器)中，它是这样的：您可以定义它，使其水平居中：# wrap { width:760px/*更改图层的宽度*/margin 33600 auto；}但是IE5/Win无法正确显示这个定义，所以我们采用了一个非常有用的技术来解决：在外层使用文本对齐属性。就像这样：# outer { text-align : center；} # wrap { width:760px/*更改图层的宽度*/margin 33600 auto；text-align : left；}第一个# outer text-align : center；规则定义IE5/Win中#outer的所有元素居中(其他浏览器只居中文本)，第二个文本-align : left；是的，将#warp中的文本留在左边。因此，在具有中心元素的css中，应为外部css定义text-align:center属性，应为内部CSS定义margin:x auto x auto，并重新定义text-align。