CSS改變盒子模型（box-sizing）

62805 閱讀 0 評論 0 點贊

box-sizing屬性是CSS3中引入的，有人解釋為它可以指定用width屬性與height屬性分別指定的寬度值與高度值是否包含元素內(nèi)部的補白區(qū)域，以及邊框的寬度與高度。這句話有點繞，我理解為它是一種容器高寬的計算方法，具體是怎樣的一種計算方法，和傳統(tǒng)的計算方法又有什么區(qū)別，通過下面的例子我們可以很直觀的了解到。

舉例說明：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>box-sizing</title>  
    <style type="text/css">  
        div{  
            width: 50px;  
            height: 50px;  
            margin: 10px;  
            padding: 10px;  
            border: 10px solid #888;  
        }  
        #bs{  
            box-sizing: border-box;  
        }  
    </style>  
</head>  
<body>  
<div></div>  
<div id="bs"></div>  
</body>  
</html>

運行結(jié)果：

box

從上圖可以看出兩者大小的區(qū)別非常明顯，我們可以借助瀏覽器來查看兩者是如何計算的。

傳統(tǒng)的計算方法

上圖這種是傳統(tǒng)的計算方法，也就是上面第一個div的大小。

可以看出實際div的寬度為50+10*2+10*2=90px。因為我們給div指定的高寬是指的內(nèi)容區(qū)的高寬，也就是圖1-1中最里面的那個區(qū)域。

div的實際計算大小

上圖第二個div的實際計算大小，這里div的實際寬度為10+10*2+10*2=50px，這么一計算，我們就很明白了，原來在設(shè)置了box-sizing為border-box后，容器的高寬就是實際容器的高寬，而不是單純指的是內(nèi)容區(qū)的大小。也可以理解為，這時候的高寬計算方式把padding和border大小也算進來了。

box-sizing 屬性的可選值如下：

值	描述
content-box	默認值，元素的實際寬度或高度等于元素內(nèi)容區(qū)的寬度或高度、內(nèi)邊距和邊框的和。
border-box	在元素的內(nèi)容區(qū)內(nèi)繪制內(nèi)邊距或邊框，內(nèi)邊距或邊框不會影響元素的實際寬度或高度。
inherit	從父元素繼承 box-sizing 屬性的值。

【示例】下面通過一個示例來演示 box-sizing 屬性的使用：

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
            height: 50px;
            margin-top: 5px;
            border: 10px solid red;
            padding: 5px;
        }
        .two {
            box-sizing: content-box;
        }
        .three {
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="one">默認情況</div>
    <div class="two">content-box</div>
    <div class="three">border-box</div>
</body>
</html>

運行結(jié)果：

box-sizing屬性