使用方法:
- 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下测试)