CSS盒子模型小记

按CSS中盒子模型来理解，DIV和Span就是一个盒子。盒子里可以装文本和图片内容。DIV是块级元素，独占一行。Span是行内元素。两个行内元素的外边距是叠加的。如

<span style="border:1px solid #000;margin-right:30px;">left</span>
<span style="border:1px solid #000;margin-left:50px;">right</span>

 

则两个行内元素的外边距总共就是80px；而块级元素就不同了。如

<div style="border:1px solid #000;margin-bottom:50px;">块级元素</div>
<div style="border:1px solid #000;margin-top:30px;">块级元素2</div>

 

以上两个块级元素外边距不是两者的外边距相加，而是取较大的外边距，也就是50px。这现象称为塌陷。

 

若一个div中嵌套一个子div，如果父div没有设置高度，则父div的高度会随子div的大小变化而变化，取能容纳子div的最小值。若父div中设有值，又要分两种情况。一是在IE下，若子div的高度超过了父div的高度，那么父div的高度也将不会是原来设的值，它将以能容纳子div的值为准。但是在FF下，父div坚持原始设的值，出现的现象是子div超出了父div。