【筆記】學習CSS佈局06——box-sizing
阿新 • • 發佈：2018-11-30
人們慢慢的意識到傳統的盒子模型不直接，所以他們新增了一個叫做 box-sizing 的CSS屬性。當你設定一個元素為 box-sizing: border-box; 時，此元素的內邊距和邊框不再會增加它的寬度。這裡有一個與前一頁相同的例子，唯一的區別是兩個元素都設定了 box-sizing: border-box; ：
.simple { width: 500px; margin: 20px auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .fancy { width: 500px; margin: 20px auto; padding: 50px; border: solid blue 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
既然沒有比這更好的方法，一些CSS開發者想要頁面上所有的元素都有如此表現。所以開發者們把以下CSS程式碼放在他們頁面上：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}這樣可以確保所有的元素都會用這種更直觀的方式排版。
不過 box-sizing 是個很新的屬性，目前你還應該像我上面例子中那樣使用 -webkit- 和 -moz- 字首。這可以啟用特定瀏覽器實驗中的特性。同時記住它是支援 IE8+的。
程式碼例項：
<!DOCTYPE html> <html> <head> <style type="text/css"> .simple { width:500px; margin:20px auto; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; background-color: #65ca5c; } .fancy { width:500px; margin:20px auto; padding:50px; border-width:10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; background-color: #65ca5c; } </style> </head> <body> <div class="simple"> <p>我小一些...</p> </div> <div class="fancy"> <p>我比它大！</p> </div> </body> </html>
效果圖如下：
