Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

Home > Web Front-end > HTML Tutorial > body text

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

WBOY

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

Original

1722 people have browsed it

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

Copy after login

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

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

Copy after login

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

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

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

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

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

Related labels：

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

source：php.cn

Previous article：day01 html_html/css_WEB-ITnose Next article：html5 section和article,向左还是向右？_html/css_WEB-ITnose

Statement of this Website

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