css 盒子模型以及 box-sizing屬性

本文轉載自查看原文 2016-03-25 09:58 6066 css

在標准的盒子模型下，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>