box-sizing這個屬性可規定盒子大小是否包含padding和border

1.以下三個值:

　　box-sizing:content-box;/*盒子寬度就是內容的寬度,不包含border,padding.有這個屬性之前就是這種情況*/

　　box-sizing:border-box;/*盒子寬度包含border,padding*/

　　box-sizing:padding-box;/*包含padding*/

2.這有什麽用處:

　　以前在布局時,比如經典的左邊菜單右邊內容的兩欄布局一般是

　　<div class="container">

　　　　<div class="left"></div>

　　　　<div class="right"></div>

　　</div>

　　.left{width:15%}

　　.right{width:83.5%}

　　// 這裏left+width不是100%.因為它兩裏padding或者border值,會將實際占用的寬度撐出設定的值.就算沒有設定這兩值,由於某些原因,實測結果也會發生right會被擠到下一行,布局就亂了.

　　// 如果使用了box-sizing之後,就可以弄成100%了.如下:

　　.container{box-sizing:content-box;}/* 外層讓內容充滿整個大小,並且不設padding margin border,並且它的父級是body為好,並且html,body的margin,padding都設為0 */

.left,right

　　{

　　　　box-sizing:border-box;/* 設為包含border和padding的那種.這樣一來,即使設置了這兩屬性,它兩的寬度也不會撐出設定值.而是會擠壓內容區的大小 */

　　}

　　.left{width:15%;border:1px solid red;padding:5px;}

　　.right{width:85%;border:1px solid green;padding:8px;}

　　/*left+right是100%,並且設定了border padding.但是 right不會被擠到第二行 ^_^*/

3.如果設定left或者right的margin會怎麽樣呢?

　　如果設置了margin,那麽right就會擠下去了.所以不能設外邊距.用padding就好了.

box-sizing屬性