首先學習box-sizing布局之前，來了解一下css盒子模型（box model）
一般來說，css盒子模型有兩種模式：
我們對元素設定的寬度和高度就是內容（content）的寬度和高度，也就是內盒子的寬度；外盒子的寬度包括：content+padding+border的
這個模型下，我們設定的寬度和高度是包括：content+padding+border的，此時這個寬度和高度，相當於我們在w3c模型下面的寬度和高度。其內容的寬度比我們設定的寬度要小的。
預設值，標準的盒模型，width和height只包括內容（content）的寬度和高度，不包括border，padding，margin，這些都是盒子的外部。
ps：當我們設定好了寬度和高度的時候，其外盒子的寬度和高度基本上就定了，當我們想在內容（content）外面設定padding和margin或者border時，非常容易破壞我們的布局，此時我們就需要想到box-sizing：border-box
這個模式下，當我們設定了盒子寬度和高度的時候，其包括：content+padding+border，但是不包括margin。
ps如果計算的content的內容寬度為負值，其都會被計算為0，內容還在，故不能通過border-box來隱藏元素。元素的內容寬度和高度是在我們設定的寬度和高度的裡面渲染的。當我們想給元素新增border或者padding時，這個模型不會破壞我們的布局，因為其會適當的調整我們內容content的寬度和高度來滿足。故可以用來設定自適應布局
當我們試著給粉紅色加上border的時候，你會發現，黃色掉下去了，因為此時的寬度正好是body的100%，其是標準的盒子模型。但是我們一定要給中間的加上padding，那咋辦？此時我們可以給中間的新增：
> box-sizing：border-boxbox-sizing的另外乙個作用是在表單元素上面調整布局，因為我們的表單元素還有一部分是ie的傳統盒子模型，詳情參考：w3cplus
posted @
2017-03-05 17:23
newman·li 閱讀(
...)
編輯收藏
css布局學習筆記之box sizing
當你設定了元素的寬度，實際展現的元素卻能夠超出你的設定 因為元素的邊框和內邊距會撐開元素。div 上面的元素所展示出來的效果，寬度會不止500px。這可能不是我們想要的。通常或許我們會去計算寬度來實現想要的效果。但是如果計算的地方太多的話，事件很煩人的事。此時我們可以通過設定box sizing b...
筆記 學習CSS布局06 box sizing
人們慢慢的意識到傳統的盒子模型不直接，所以他們新增了乙個叫做box sizing的css屬性。當你設定乙個元素為box sizing border box 時，此元素的內邊距和邊框不再會增加它的寬度。這裡有乙個與前一頁相同的例子，唯一的區別是兩個元素都設定了box sizing border box...
關於box sizing布局
在講box sizing屬性之前，我們講一下盒子模型 css的盒子模型包括外邊距 margin 邊框 padding 內邊距 padding 元素內容 content 如下圖 在頁面上呈現的盒子的寬度和高度為 width content padding border height content p...