這篇文章給大家介紹的文章內容是關於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和height屬性包括內容，內邊距和邊框，但不包括外邊距。
計算公式：
width = width = border + padding + 內容寬度
height = border + padding + 內容高度
## 2. 考慮盒子模型的margin
從上面可以知道，即時是border-box也是不計算margin，只是多餘計算了border和padding。因為border和padding都是盒子模型的一部分，但是margin標記的是盒子和盒子的間距。所以，border-box的解釋很符合常理。
問題來了，如果有時候一定要設定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;}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
