溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下css3中border-sizing屬性有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
box-sizing用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inherit指的是從父元素繼承box-sizing表現形式，不再冗贅。
content-box默認值，也是css2.1中的盒子模型。在計算width和height時候，不計算border、padding和margin。高度、寬度都只是內容高度。
border-boxcss3新增。 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屬性有什么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
