网页前端css，如何理解盒子模型box-sizing属性?

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

在编写网页的过程中，就是一个又一个的盒子模型套另外一个盒子模型。如果您经历过ie时代的话，就会知道：ie的盒子模型和现在的谷歌浏览器系列里面的盒子模型，是不一样的。具体表现在：width到底指的包不包含padding。曾经被奇怪的width支配过的前端兄弟们一定不会陌生。

大家好，这里是苏南大叔的"程序如此灵动"博客，这里记录苏南大叔和计算机代码的故事。本文讲述，前端css的盒子模型控制转化。本文测试环境：win10，chrome@100.0.4896.60。

两个选项

以前的时候，都是根据浏览器来选择用不同的宽度。本来以为这个盒子模型如何表现，是根据浏览器变化的。而实际上：盒子模型有两种，只不过是浏览器里面默认的盒子模型表现项不同罢了。

测试代码：

<div>盒子模型360*60</div>
<div id="t1">border-box</div>
<div id="t2">content-box</div>
<style>
    div{
        width: 360px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        vertical-align: middle;
        margin-bottom: 15px;
        background-color: blue;
        color: #ffffff;
        clear: both;
    }
    div#t1{
        box-sizing: border-box;
        padding: 15px;
        border:5px solid gray;
    }
    div#t2{
        box-sizing: content-box;
        padding: 15px;
        border:5px solid gray;
    }
</style>

其实，主要的区别就是：对于一个盒子来说，width/height到底指的是哪里。

这个是苏南大叔的个人总结，没有啥资料是这样写的：

怪异盒子模型border-box

box-sizing: border-box;

设置padding或者border的时候，老的怪异盒子模型的实际宽度高度并不会变化，padding和border都是在已经设置好的尺寸内测的。

就是说：css里面的width就是最终的宽度，border-box是内敛的，尺寸一旦设定，就不再改变。改变padding或者border的时候，再多的压力也不会往外说，都是挤压其内部的，“打断牙齿往肚子里咽”。
对于里面包含的内容来说，宽度/高度是一直变化的，被padding和border所挤压。对于盒子自身来说，实际的宽度/高度一直没变。

其实，苏南大叔对于“怪异盒子”的叫法非常不理解，毕竟以先入为主的角度来说的话，是先有的ie专享的“怪异盒子”模型的。而且英文表述上也没有“怪异”的说法啊，为啥到中文表述上就带上了这个歧视的字眼了呢？

主流标准模型content-box

因为这个是主流默认，所以可以把box-sizing设置为content-box，或者不做任何设置。

box-sizing: content-box;

设置padding或者border的时候，新的主流内容盒子模型的实际宽度/高度会发生变化，padding和border都是在已经设置好的宽度/高度外测的。定好的尺寸就是最小的范围，有了新的压力，也不能突破最小底线，需要在向外面叠加，“你们看到的我不是真正的我”。

就是说：css里面的width并不是最终的宽度。改变padding或者border的时候，
对于里面包含的内容来说，宽度是一直不变的。对于盒子自身来说，实际的宽度一直在变化。

相关文档

• https://newsn.net/say/css-content-attr.html
• https://newsn.net/say/css-background-position-x.html

综述

盒子模型是网页制作里面最基本基本的单元，但是你真的弄清楚了么？更多网页前端方面的文章总结：

• https://newsn.net/tag/h5/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。