CSS3的box-sizing屬性怎么用

本篇內容介紹了“CSS3的box-sizing屬性怎么用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　直觀通俗的解釋是：

　　content-box：指定盒模型為 W3C 標準模型，設置 border、padding 會增加元素 width與 height 的尺寸，即 border 與 padding 相當于是元素的“殖民地”，元素的“土地”、尺寸會增加，為向外延伸。

　　border-box：指定盒模型為 IE模型(怪異模式)，設置 border、padding 不會影響元素 width 與 height 的尺寸，即 border 與 padding 由元素已設空間轉變。即空間還是這個空間，只是將部分空余的地方，轉變成了其他空間用法而已，為內部轉變。

　　設置border與padding與被影響屬性值的關系公式：

　　W3C標準盒模型(conten-box值)【width/height被改變，擴展】

　　width = content + border + padding;

　　// 其中，width 為瀏覽器視窗呈現尺寸，content 為在CSS中設置的元素的 width;

　　IE怪異盒模型(border-box值)【content被改變，壓縮】

　　content = width - border - padding;

　　// 其中，width 為在CSS中設置的元素的width;

　　具體可用瀏覽器調試看看，多觀察觀察就懂了。

　　總之：

　　1.W3C標準盒模型(content-box)，border、padding 的設置會破壞元素寬高，必須得重新計算，非常麻煩(除了在IE瀏覽器，默認就是標準盒模型，所以可以用 box-sizing 來轉換)；

　　2.IE(怪異)盒模型(border-box)，border、padding 的設置不會影響元素的寬高，這非常實用(且因為IE盒模型不是標準，所以才有 box-sizing 這個標準屬性來設置，將它標準化)【IE6/5 是怪異模型，IE7開始是標準盒模型】

　　另外的小技巧：【行高的計算】

　　.box {

　　width: 200px;

　　height: 200px;

　　text-align: center;

　　border: 10px solid black;

　　padding: 15px;

　　}

　　.box {

　　width: 200px;

　　height: 200px;

　　text-align: center;

　　border: 10px solid black;

　　padding: 15px;

　　box-sizing: border-box;

　　}

“CSS3的box-sizing屬性怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！