css3使用box-sizing布局

css3增添了盒模型box-sizing，屬性值有下面三個：

content-box：默認值，讓元素維持W3C的標准盒模型。元素的寬度/高度（width/height）（所占空間）等於元素邊框寬度（border）加上元素內邊距（padding）加上元素內容寬度 /高度（content width/height）即：Element Width/Height = border+padding+content width/height。

border-box：讓元素維持IE6及以下版本盒模型，元素的寬度/高度（所占空間）等於元素內容的寬度/高度。這里的content width/height包含了元素的border,padding,內容的width/height。即：Element Width/Height =width /height-border-padding。

inherit：繼承父元素的盒模型模式。

 

 

比如：在寫項目時，有人要你在一個空間里寫內容,如下：

<div class="wrapper">
    <div id="header">頁眉</div>
    <div class="sidebar">側邊欄</div>
    <div class="content">內容內容內容內容內容內容內容內容內容內容內容</div>
    <div id="footer">頁腳</div>
</div>

 

 

        *{margin: 0;padding: 0;}
        .wrapper{
            width: 500px;
            margin: 0 auto;
            color:#fff;
            text-align: center;
        }
        #header{
            height: 50px;
            background-color: red;
        }
        .sidebar{
            float: left;
            width: 150px;
            height: 100px;
            background-color: #0099cc;
        }
        .content{
            float: left;
            width: 350px;
            height: 100px;
            background-color: #999999;
        }
        #footer{
            background-color: #ff6600;
            height: 50px;
            clear: both;
        }

 

效果圖    

 

終於寫好了，但如果又被要求改好看點，比如內容區加內邊距，邊框什么的修飾一下。

如果直接加上padding、border什么的，馬上就破壞了布局：

 

因為box-sizing默認是content-box，內容區大小不會變，加上padding、margin、border的話，就會往外撐開，從而破壞布局結構

這時，使用border-box就可以完美解決了。

 

        .content{
            box-sizing: border-box;
            padding: 22px;
            border: 12px solid blue;
            float: left;
            width: 350px;
            height: 100px;
            background-color: #999999;
        } 

這樣，元素所占空間不會變，加了padding、border的話，會往內擠，保持外面容器不被破壞

（注意，margin不包含在元素空間，加了margin會向外撐開）

效果圖：

 兼容性：IE8+及其他主流瀏覽器均支持box-sizing。其中IE6及以下默認是以類似border-box盒模型來計算尺寸。

 （ps：Firefox瀏覽器，box-sizing還可以設置一個padding-box，指定元素的寬度/高度等於內容的寬度/高度和內距，

   即：Element Width/Height = content width/height+padding。）