CSS盒子模型與box-sizing

標籤：技術分享   image   safari   部分   alt   接下來   元素   盒子模型   chrome   

今天在學習的時候偶然看到一張圖片：

我瞬間瞪大了眼睛：width和height竟然不包括padding和border!!

過去所學知識有問題！在我的印象裡，width應該是包含padding和border的，然而接下來我又看到了另一張圖：

這張圖是IE下的盒子模型，而第一張圖是標準盒子模型。。。

於是我決定動手實踐一下

#box{            width: 100px;            height: 100px;            margin: 20px;            padding: 20px;            background-color: blue;            border:solid red 4px;        }

 效果

 

 

 可以看到，在chrome瀏覽器下，width僅為元素實際內容部分，不包含border和padding，和標準盒子模型一致。並且backgroundcolor覆蓋padding和content

但是在CSS中加上一條代碼：

box-sizing:border-box

效果就跟IE下的盒子模型相同了：

此時100px=content+padding+border

也就是說：此時border和padding計算入width之內。

此外，box-sizing還有兩個值：

content-box：border和padding不計算入width之內

padding-box：padding計算入width內

實際上，webkit核心的瀏覽器如chrome,safari，設定content-box，padding-box，瀏覽器渲染的情況都與標準盒模型一致

只有Firefox的渲染結果正常，這裡就不貼出測試代碼與結果了，大家可以自行測試。

 

CSS盒子模型與box-sizing