推薦:
box-sizing
用於更改用於計算元素寬度和高度的預設的 CSS 盒子模型。它有content-box
、border-box
和inherit
三種取值。inherit
指的是從父元素繼承box-sizing
表現形式,不再冗贅。
content-box
預設值,也是css2.1中的盒子模型。在計算width
和height
時候,不計算border
、padding
和margin
。高度、寬度都只是內容高度。
border-box
css3
新增。 width
和height
屬性包括內容,內邊距和邊框,但不包括外邊距。
計算公式:
width = width = border + padding + 內容寬度
height = border + padding + 內容高度
margin
從上面可以知道,即時是border-box
也是不計算margin
,只是多餘計算了border
和padding
。因為border
和padding
都是盒子模型的一部分,但是margin
標記的是盒子和盒子的間距。所以,border-box
的解釋很符合常理。
問題來了,如果有時候一定要設定
margin
,怎麼做到自由控制來保證相容?例如,我們下面要設定一個撐滿頁面的盒子元素,而且有外邊距干擾,怎麼做?
實現如下效果圖:
程式碼:原始碼下載
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>yuanxin.me</title> <style type="text/css"> *{ margin: 0; padding: 0; } #app { box-sizing: border-box; /* 指定計算方式 */ margin: 10px; /* 外邊距干擾 */ /* 利用 css3 的 calc */ width: calc(100vw - 2*10px); height: calc(100vh - 2*10px); } </style> </head> <body> <div id="app"> </div> </body> </html>
所以,當需要計算外邊距(margin),可以配合css3中的四則運算(calc
)來使用。
根據專案中的使用經驗和w3c的建議,推薦將
box-sizing
屬性設定為border-box
。
* { margin: 0; padding: 0; } div { box-sizing: border-box; }
更多程式設計相關知識,請存取:!!
以上就是深入瞭解css3 border-sizing屬性的詳細內容,更多請關注TW511.COM其它相關文章!