CSS之box-sizing:border-box

最新推荐文章于 2025-04-14 18:05:48 发布

转载最新推荐文章于 2025-04-14 18:05:48 发布 · 1.3k 阅读

本文详细解析了CSS属性box-sizing:border-box的作用，说明了当应用此属性时，元素的宽度和高度将包括内边距和边框，确保了布局的一致性和准确性。文章通过实例展示了在不同浏览器上的兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

box-sizing:border-box：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

如果上述的内容还不是太明白，我们就来举个例子：
· 比如插入一个DIV，这个DIV的宽度设置为200像素，高度也设置为200像素；那么这个DIV就是宽200px，高200px；
· 下面我们为这个DIV的上下左右分别增加10的像素，即padding:5px；那么这个时候这个DIV的宽就会变成210px，高同样也是210px
· 若再给这个DIV加上一个15像素的边框，那个这个DIV也就会继续扩大，变成了宽240px，高也是240px。该DIV的CSS代码如下：

div {width:200px; height:200px; border:solid 1em #DD1F22; box-sizing:border-box;padding:5px}

预览效果如下：

CSS3中box-sizing:border-box代码举例

而box-sizing:border-box实际作用中就是定义了元素指定的宽度和高度，也就是当你为该DIV加上box-sizing:border-box这条样式，那么无论你是增加内边距还是添加框线，它都会在原来的大小中进行。也就是原来宽200px，高200px的div，在你增加了边框线和内边距之后，这个的DIV的总大小仍然会是宽200px，高200px。如下图所示。

box-sizing:border-box代码应用实例

另外，目前支持box-sizing属性的浏览器有Chrom，Opera和IE，而同样的效果FireFox 支持 -moz-box-sizing；Safari 支持 -webkit-box-sizing。所以，为了能使样式兼容各大主流浏览器，通常都会同时加上 -moz-box-sizing 和 -webkit-box-sizing 这两句。这个DIV的完整的CSS代码应该是以下书写：

div {width:200px; height:200px; border:solid 1em #DD1F22; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:5px}