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区域;

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

样例代码:

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div {
 width: 200px;
 height: 200px;
 background-color: #000;
 color: #fff;
 margin: 30px auto;
 padding: 30px;
 border: 30px solid #f60;
 }
 .box-1 {
 -moz-box-sizing: content-box;
 }
 .box-2 {
 -moz-box-sizing: padding-box;
 }
 .box-3 {
 -moz-box-sizing: border-box;
 }
 </style>
</head>
<body>
 <div class="box-1">content-box</div>
 <div class="box-2">padding-box</div>
 <div class="box-3">border-box</div>
</body>
</html>

样例图片:(ff下测试)

box-sizing属性

 

QQ1

QQ2

QQ3