盒子模型的理解

盒子模型有兩種：W3C和IE盒子模型

盒子模型包含margin、border、padding、content

W3C的元素寬度=content的寬度

# IE的元素寬度=content+padding+border

 

我個人認為W3C定義盒子模型與IE定義的盒子模型，IE定義的比較合理，

元素的寬度應該包含border（邊框）和padding（填充），這個和我們現實生活的盒子是一樣的，

W3C也認識到自己的問題了，所以在CSS3中新增了一個樣式box- sizing，

包含兩個屬性content-box 和border-box。

 

content-box  ：  width=content+padding+border

border-box：     width=width（樣式指定的寬度）

1.對於行級元素，margin-top和margin-bottom對於上下元素無效，margin-left和margin-right有效

2.對於相鄰的區塊級元素margin-bottom和margin-top 取值方式

 1） 都是正數： 取最大值   距離=Math.max(margin-botton,margin-top)

  2） 都是負數： 取最小值   距離=Math.min( margin-botton,margin-top)

  3）上面是正數，下面是負數或上面是負數，下面是正數： 正負相加   距離=margin-botton+margin-top

以上是盒子模型的理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！