您的位置：首页 > Web前端 > css > 正文

css3 box-sizing

更多时间：2015-7-22 类别：Web前端浏览量：980

css3 box-sizing

css3 box-sizing

css3中box-sizing 用来改变 CSS 盒模型，从而改变元素高宽的计算方式。

一、语法

box-sizing：content-box | border-box | padding-box

默认值：content-box

二、box-sizing取值

1、content-box

标准盒模型。padding和border不被包含在定义的width和height之内。 width 与 height 是内容区的宽与高，不包括边框，内边距，外边距。对象的实际宽度等于设置的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin )

2、border-box

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

3、padding-box

width 与 height 包括内边距，不包括边框与外边距。

三、css3中box-sizing实例

1、content-box


.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

效果如图：宽度为（200+10*2+15*2）

2、border-box


.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

效果如图

标签：css3

上一篇：HTML5中新增的Input类型

下一篇：泛型中new()约束

您可能感兴趣

css3 box-sizing

css3 box-sizing

热门推荐

排行榜