首頁 > web前端 > H5教程 > 盒子模型的理解

盒子模型的理解

巴扎黑
發布: 2017-06-23 14:53:03
原創
2020 人瀏覽過

盒子模型有兩種: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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板