Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > HTML-Tutorial > css3:border-box将边框，padding计算都计算在宽度内_html/css_WEB-ITnose

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

WBOY

Freigeben： 2016-06-21 08:56:05

Original

1774 Leute haben es durchsucht

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

Nach dem Login kopieren

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

.input { width: 100%; padding: 0 10px}<input class="input border-box">

Nach dem Login kopieren

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

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

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

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

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

Verwandte Etiketten：

css3:border-box将边框，padding计算都计算在宽度内

Quelle：php.cn

Vorheriger Artikel：day01 html_html/css_WEB-ITnose Nächster Artikel：html5 section和article,向左还是向右？_html/css_WEB-ITnose

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors