這篇文章介紹給大家的文章內容是關於css中border-sizing屬性的用法，有很好的參考價值，希望可以幫助到有需要的朋友。
box-sizing用於更改用於計算元素寬度和高度的預設的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。 inherit指的是從父元素繼承box-sizing表現形式，不再冗餘。
## 1. 屬性解說
#content-box預設值，也是css2.1中的盒子模型。在計算width和height時候，不計算border、padding和margin。 高度、寬度都只是內容高度
#border-boxcss3新增。 width和
屬性包括內容，內邊距和邊框，但不包括外邊距。
計算公式：## 2. 考慮盒子模型的
margin從上面可以知道，即時是border-box也是不計算margin，只是多餘計算了border#和padding。 因為border和padding都是盒子模型的一部分，但是margin標記的是盒子和盒子的間距。所以，
的解釋很符合常理。
問題來了，如果有時候一定要設定margin，怎麼做到自由控制來保證相容？例如，我們下面要設定一個撐滿頁面的盒子元素，而且有外邊距幹擾，怎麼做？ 
實作如下效果圖：
程式碼：
原始碼下載<!DOCTYPE html>
<html lang="en">
<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>
<p id="app">
</p>
</body>
</html>所以，當需要計算外邊距(margin)，可以配合css3中的四則運算（calc
。
## 3. 使用建議
根據專案中的使用經驗和w3c的建議，建議將box-sizing屬性設定為border-box。
* {
margin: 0;
padding: 0;
}
p {
box-sizing: border-box;
}以上是css中border-sizing屬性的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
