【前端-CSS3盒模型】box-sizing

拼搏现实的明天。 2023-07-04 14:18 53阅读 0赞

box-sizing盒模型是CSS3的一个重要属性之一，常常被很多人给忽略了！CSS3出现之前box-sizing盒模型默认的宽高是指内容的宽高，css3之后可以用box-sizing来指定宽高。

目前比较火的前端框架Bootstrap,Foundation等国外框架都是全局设置box-sizing:border-box，如果您不再支持低版本浏览器，这个属性对您来说将会相当好用，相信你会爱上他的！

### **语法：** ###

box-sizing: content-box|border-box|inherit;

content-box：这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

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

inherit:规定应从父元素继承 box-sizing 属性的值。

**提示：IE8以下的浏览器支持content-box,不支持border-box,border-box是CSS3新增加属性！**

### **content-box示例：** ###

.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }

![format_png][]

### **border-box示例：** ###

.test2{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }

![format_png 1][]

注意：看图可以清楚看到它们的，属性为content-box时宽为：250，属性为border-box时宽为：200

[format_png]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXoveDRjZ3g4cDg4ZVJHckFWSXo1QVA1dFFJaWNFQ2liOUh1TkdNQWdoYVlORmNjcG9SUmliUnNyS0hoWGY1dlRTcWdCcmNPZHpuSnRmZGI3aDZiVndCSHdRbGcvNjQw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cDovL21tYml6LnFwaWMuY24vbW1iaXoveDRjZ3g4cDg4ZVJHckFWSXo1QVA1dFFJaWNFQ2liOUh1TkdRUllROXRMY1R4VnVObjZxOEJxZ1VwaWJrU1Z6M0llUTFCQUZmdm9va2Q4N1F2YzBXRG1HcEEvNjQw?x-oss-process=image/format,png