CSS3中的box sizing屬性

2021-09-14 05:46:02 字數 2085 閱讀 3496

box-sizing屬性是css3中新新增的屬性，用來替換原來的css盒子模型，box-sizing屬性值的不同，元素的高度和寬度的計算方法也不同。

/* box-sizing的三個屬性值，我們只針對前兩個說明 */


box-sizing: content-box;


box-sizing: border-box;


box-sizing: padding-box;
在預設情況下，設定的width和height屬性都是指元素內容（content box）的高度和寬度，如果這個元素設定了border或padding的話，那麼整個元素的高度和寬度就是：

totalwidth = border-left + padding-left + width + padding-right + border-right


totalheight = border-top + padding-top + height + padding-bottom + border-bottom
所以，這個在做相應式設計的時候還是比較複雜的，現在，有了box-sizing屬性，就可以根據不同的屬性值計算元素的高度和寬度。

簡單的例子

css

.box 


.box1 


.box2
html
content-box


border-box
**中，我們對兩個div設定了相同的height、width、border和padding，可是現實效果卻完全不同：

我們仔細分析下，兩個div不同的地方在於box-sizing屬性，第乙個是content-box，第二個是border-box，針對第乙個div，

我們發現，整個元素的高度和寬度是260x260，而元素的內容的高度和寬度是150x150，正好是我們想要的，對於260這個大小是怎麼來的，我們不妨計算一下：

5+50+150+50+5=260  // 高度


5+50+150+50+5=260 // 寬度
正好是260，符合最上面的兩個公式，所以最後元素的尺寸是260x260，並不是我們設定的150x150

對於第二個div：

很明顯可以看到，第二個div裡面的內容已經被擠了換行了，這個div的真實的高度和寬度和我們設定的一樣，可以它的內容部分的尺寸只有40x40，遠小於150，可以看到，這就是content-box和border-box的區別了，再來計算一下：

150 = 5+50+40+50+5 // 高度


150 = 5+50+40+50+5 // 寬度
可知，整個元素的高度其實是包括了border、padding和內容的高度，寬度也是如此。

瀏覽器的相容性

可以看到，不管是手機端還是桌面端大部分都是不支援padding-box的，所以建議實際開發中避免使用padding-box。

跟多詳細內容請參考：

CSS3中盒子的box sizing屬性

box sizing 屬性box sizing 屬 性用來改變預設的 css盒模型 對元素寬高的計算方式。這個屬性可以用於模擬那些非正確支援標準盒模型的瀏覽器的表現。box sizing content box default border box content box 預設值，標準盒模型。wid...

css3中的box sizing屬性的使用

box sizing屬性用來定義元素的width和height所表示的區域,該屬性一般有三種值 content box border box inherit。其中inherit表示box sizing的值應該從父元素繼承。content box和border box的主要區別就是元素的width和h...

CSS 3學習 box sizing和背景

在css 2中設定元素的width和height僅僅是設定了元素內容區的寬和高，元素實際的尺寸是 margin border padding 內容區。css 3 截止到2016年12月6日該屬性還是草案 中新加了box sizing屬性，用來重新規定設定元素的width和height時，到底包含哪些...