css布局box-sizing使用，css布局box-sizing

css布局box-sizing使用，css布局box-sizing

div{

 box-sizing:border-box;

width:200px;

padding:20px;

border:1px solid red;

}

 

這段css的意思是說，div寬度為200px,邊框為1px，左右空白邊距是20px,時間內容寬度自適應，是200-2-20*2=158px;

 

如果box-sizing的值為content-box,說明設定的是內容區的寬度，不是div盒子的寬度；

 

瀏覽器安全色性：

ie8以上支援該屬性，firefox需要加上瀏覽器廠商首碼-moz-,低版本的IOS和Android瀏覽器也需要加上-webkit-

*,*:before,*:after{

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

box-sizing:border-box;

 

}