css布局box-sizing使用_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:46:52
原創
995 人瀏覽過

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;

 

}

 

 

 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板