【CSS】css 盒子模型 以及 box-sizing屬性
css 盒子模型 以及 box-sizing屬性
在標準的盒子模型下，css中 width，padding以及border的關係
關於css中的width和padding以及border的關係。
在css中，width和height指的是內容區域的寬度和高度，增加padding,border,和margin不會影響內容區域的尺寸，但是會增加元素框的總尺寸。
例如： 這樣設定div：width=300px; padding=10px;得到的圖如下
在這個圖中，width的值是多少？
有人可能以為是：width=300+10+10=320,這是錯誤的，實際width的值還是300。
不會形成總寬度為：300-10-10=280的效果，最終的寬度還是300px不變，總寬度會變成300+10+10=320px;
css3中的box-sizing 改變盒子模型的組成方式
語法：
box-sizing ： content-box | border-box | inherit
相關屬性 ： 無
取值：
content-box:
此值維持css2.1盒模型的組成模式，border|padding|content {element width=border+padding+content}
padding和border不被包含在定義的width和height之內。物件的實際寬度等於設定的width值和border、padding之和，即 ( Element width = width + border + padding )此屬性表現為標準模式下的盒模型。
示例：
-
content-box:
.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }
border-box:
此值改變css2.1盒模型組成模式，content|border|padding {element width=content}
padding和border被包含在定義的width和height之內。物件的實際寬度就等於設定的width值，即使定義有border和padding也不會改變物件的實際寬度，即 ( Element width = width )此屬性表現為怪異模式下的盒模型。
border-box:
.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
示例程式碼如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css3 box-sizing使用指南</title>
<style>
.box_sizing {
width: 180px;
padding: 40px 20px;
background: #a0b3d6;
overflow: hidden;
}
.box_sizing .in {
width: 100%;
border: 12px double #34538b;
padding: 5px;
background: white;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box_sizing">
<div class="in">此處12畫素的border和5畫素的padding值算在寬度裡面了~~！</div>
</div>
</body>
</html>選中最外層div的時候，css的截圖如下：
可以看到設定了width=180,實際的內容依然是180，只不過總寬度到了220px
當選中裡面的div時，css圖如下：
由於設定了box-sizing:border-box,此時12px的border和5px的padding算在了寬度中，此時實際的內容區域為146px
當我們把box-sizing:border-box屬性去掉的時候，截圖如下：
此時內容區域的寬度還是為180px，但是最外層的div的總寬度為： 180+20+20=220px；
而裡面的div的總寬度為： 180+12+12+5+5+20=234px,所以溢位了。最後面的20為最外層div的padding-left;
所以設定了 box-sizing:boder-box ,會把boeder和padding的值也算在內容的寬度中，總寬度不變。
原文地址：
css 盒子模型 以及 box-sizing屬性 - Alice.Luo - 部落格園 https://www.cnblogs.com/alice626/p/5318352.html