CSS3的box-sizing属性怎么用

本篇内容介绍了“CSS3的box-sizing属性怎么用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

在河源等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站制作、成都做网站 网站设计制作定制网站建设,公司网站建设,企业网站建设,品牌网站建设,全网营销推广,成都外贸网站建设公司,河源网站建设费用合理。

直观通俗的解释是：

content-box：指定盒模型为 W3C 标准模型，设置 border、padding 会增加元素 width与 height 的尺寸，即 border 与 padding 相当于是元素的“殖民地”，元素的“土地”、尺寸会增加，为向外延伸。

border-box：指定盒模型为 IE模型(怪异模式)，设置 border、padding 不会影响元素 width 与 height 的尺寸，即 border 与 padding 由元素已设空间转变。即空间还是这个空间，只是将部分空余的地方，转变成了其他空间用法而已，为内部转变。

设置border与padding与被影响属性值的关系公式：

W3C标准盒模型(conten-box值)【width/height被改变，扩展】

width = content + border + padding;

// 其中，width 为浏览器视窗呈现尺寸，content 为在CSS中设置的元素的 width;

IE怪异盒模型(border-box值)【content被改变，压缩】

content = width - border - padding;

// 其中，width 为在CSS中设置的元素的width;

具体可用浏览器调试看看，多观察观察就懂了。

总之：

1.W3C标准盒模型(content-box)，border、padding 的设置会破坏元素宽高，必须得重新计算，非常麻烦(除了在IE浏览器，默认就是标准盒模型，所以可以用 box-sizing 来转换)；

2.IE(怪异)盒模型(border-box)，border、padding 的设置不会影响元素的宽高，这非常实用(且因为IE盒模型不是标准，所以才有 box-sizing 这个标准属性来设置，将它标准化)【IE6/5 是怪异模型，IE7开始是标准盒模型】

另外的小技巧：【行高的计算】

.box {

width: 200px;

height: 200px;

text-align: center;

border: 10px solid black;

padding: 15px;

}

.box {

width: 200px;

height: 200px;

text-align: center;

border: 10px solid black;

padding: 15px;

box-sizing: border-box;

}

“CSS3的box-sizing属性怎么用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！