Home  >  Article  >  Web Front-end  >  css3:border-box将边框,padding计算都计算在宽度内_html/css_WEB-ITnose

css3:border-box将边框,padding计算都计算在宽度内_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:56:051639browse

.border-box { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box }

这个class可以让元素的宽度始终等于其width的值,不管padding和border宽度为多少,如:

.input { width: 100%; padding: 0 10px}

这个input宽度始终都为100%,对应自适应的元素设置padding和border非常好用

这个是css3属性,必须在支持html5浏览器下,一般用在手机端!


box-sizing的默认值是content-box,宽高度等于边框宽度+内边距+内容宽高度

border-box:宽高度等于内容其设置好的width和height值

参考:http://www.w3cplus.com/content/css3-box-sizing

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn