border-sizing屬性詳解和應用

box-sizing
用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。它有
content-box
、
border-box
和
inherit
三種取值。
inherit
指的是從父元素繼承
box-sizing
表現形式，不再冗贅。

1. 屬性講解

content-box

默認值，也是css2.1中的盒子模型。在計算

width

和

height

時候，不計算

border

、

padding

和

margin

。 高度、寬度都只是內容高度。

border-box

css3

新增。

width

和

height

屬性包括內容，內邊距和邊框，但不包括外邊距。

計算公式：

width = width = border padding 內容寬度
height = border padding 內容高度

2. 考慮盒子模型的

margin

從上面可以知道，即時是

border-box

也是不計算

margin

，只是多余計算了

border

和

padding

。因為
border
和
padding
都是盒子模型的一部分，但是
margin
標記的是盒子和盒子的間距。所以，

border-box

的解釋很符合常理。

問題來了，如果有時候一定要設置
margin
，怎么做到自由控制來保證兼容？例如，我們下面要設置一個撐滿頁面的盒子元素，而且有外邊距干擾，怎么做？

實現如下效果圖：
border-sizing屬性詳解和應用

代碼：源碼下載

<!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><div id="app"></div>
</body>
</html>

所以，當需要計算外邊距(margin)，可以配合css3中的四則運算（

calc

）來使用。

3. 使用建議

根據項目中的使用經驗和w3c的建議，推薦將
box-sizing
屬性設置為
border-box
。

* {margin: 0;padding: 0;
}
div {box-sizing: border-box;
}

4. 關于

歡迎技術交流，引用請注明出處。
個人網站：godbmw.com
原文鏈接：border-sizing屬性詳解和應用

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=0a0b1jb&title=border-sizing屬性詳解和應用

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/370630.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/370630.shtml
英文地址，請注明出處：http://en.pswp.cn/news/370630.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！