【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