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