box-sizing

關於css 常用的box-sizing

在做項目時，有許多因素都要考慮到，其中瀏覽器解析的盒子模型就是其中之一；特別是在早些時候，萬惡的IE 6 7 8時代 。我們都知道 一個常規完整的盒子模型內 包含 padding border width 如果有需求的話還要加上margin 。在保留元素各項聲明需求的同時（比如border padding）還要得到我們想要的整個元素的width 不如試試box-sizing；css爲我們減輕了不必要的麻煩。css3 真的帶來便利 。

box-sizing 有三個屬性，在這裏第三個屬性就不聊了 （inherit 就是繼承來自父級的box-sizing屬性）
box-sizing的第二個屬性：
box-sizing：content-box；（

寬度和高度分別應用到元素的內容框。
在寬度和高度之外繪製元素的內邊距和邊框。

    div{
        width: 180px;
        height:130px;
        padding: 50px;
        border:10px solid gray;
        background: red;
        /* box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box; */
    };

這是一個常規的盒子，content-box 就是這種效果 默認的。
）；
box-sizing：content-box；（
這裏重點說明下這個值：
爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
這裏先上樣式：

    div{
        width: 180px;
        height:130px;
        padding: 50px;
        border:10px solid gray;
        background: red;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
    };

事實說明最終整個盒子模型的大小就是180px 邊框和內補包含在內。
）；