CSS3盒模型box-sizing属性详解，布局更方便

使用方法：

• box-sizing: content-box;
• box-sizing: padding-box;
• box-sizing: border-box;

属性解析：

当设置为content-box时，盒子的宽度和高度同默认宽度（不包括padding，border）；

当设置为padding-box时，盒子的宽度和高度包括padding区域；

当时设置为border-box时，盒子的宽度和高度包括padding和border区域；

注：浏览器支持性不做介绍，具体使用时请做具体测试，本人秉着早晚所有浏览器都会支持的态度写此文。

样例代码：

 
 
 


 
content-box
 
padding-box
 
border-box

样例图片：（ff下测试）

 

本条目发布于 2013年11月15日。属于 CSS3分类，被贴了  -moz-、 box-sizing、 盒模型 标签。 作者是听心_cy。