css3 box-sizing属性

css3 box-sizing属性有三个值：content-box（default），border-box。

content-box：border和padding不计算入width之内border-box：border和padding计算入width之内

来看代码：

<div class='content-box'>content-box</div><br> <div class='border-box'>border-box</div> .content-box{ width:100px; height:100px; background:yellow; border:5px solid #000; padding:10px; box-sizing:content-box; -webkit-box-sizing:content-box; } .border-box{ width:100px; height:100px; background:yellow; border:5px solid #000; padding:10px; box-sizing:border-box; -webkit-box-sizing:border-box; }

效果：

可以看到，很明显的border-box属性的宽高都小于content-box。审查元素会发现border-box类的div的border和padding都包含在了width和height属性中。

程序员青戈 认证博客专家 Java 架构 博客专家 Java程序员，5年一线大厂实战经验。关注我的原创微信公众号「Java学习指南」，回复「面试」可获取大厂通关面试题解一套。