- content-box：
- padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding ).此属性表现为标准模式下的盒模型。
- border-box：
- padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ).此属性表现为怪异模式下的盒模型。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Box Sizing Demo</title> <style> .content-box{
box-sizing:content-box; width:200px; height:200px; padding:10px; border: 20px solid blue; background-color:#F00; margin:20px; color:white; font-size:xx-large; box-shadow:5px 5px 5px grey; text-shadow:5px 5px 5px grey; line-height:200px; text-align:center; border-radius:5px; -ms-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .border-box{ box-sizing:border-box; width:260px; height:260px; padding:10px; border: 20px solid blue; background-color:#F00; margin:20px; color:white; font-size:xx-large; box-shadow:5px 5px 5px grey; text-shadow:5px 5px 5px grey; line-height:200px; text-align:center; border-radius:5px; -ms-border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } </style> </head> <body> <div class="content-box"> Content Box </div> <div class="border-box"> Border Box</div> </body> </html>
效果图:
点击此处链接.