css3 box-sizing属性_html/css_WEB-ITnose
程序员文章站
2022-03-27 11:05:26
...
定义和用法
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
content-box |
no |
CSS3 |
object.style.boxSizing="border-box" |
box-sizing:content-box | border-box
默认值:content-box
content-box:
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding以及margin之和,即 ( Element width = width + border + padding+margin )
此属性表现为标准模式下的盒模型。
border-box:
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )
此属性表现为怪异模式下的盒模型。
例子:
content-boxpadding-box/*chrome 不支持*/border-box
推荐阅读
-
CSS3的3D转换translate3d(x,y,z)函数_html/css_WEB-ITnose
-
纯css3制作写轮眼开眼及进化过程_html/css_WEB-ITnose
-
css3中 弹性盒模型布局之box-flex_html/css_WEB-ITnose
-
CSS3中的background-size(对响应性图片等比例缩放)_html/css_WEB-ITnose
-
CSS3实现全景图特效_html/css_WEB-ITnose
-
结合CSS3的布局新特征谈谈常见布局方法_html/css_WEB-ITnose
-
div+CSS绝对定位absolute属性_html/css_WEB-ITnose
-
transition的四个属性_html/css_WEB-ITnose
-
「CSS3 」动画详解_html/css_WEB-ITnose
-
css3火焰文字样式代码_html/css_WEB-ITnose