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

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

苏南大叔:网页前端css,如何理解盒子模型box-sizing属性? - 盒子模型
网页前端css,如何理解盒子模型box-sizing属性?(图4-1)

大家好,这里是苏南大叔的"程序如此灵动"博客,这里记录苏南大叔和计算机代码的故事。本文讲述,前端css的盒子模型控制转化。本文测试环境:win10chrome@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到底指的是哪里。

苏南大叔:网页前端css,如何理解盒子模型box-sizing属性? - 盒子模型运行结果
网页前端css,如何理解盒子模型box-sizing属性?(图4-2)

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

模型css中的宽度值肉眼可见的实际宽度特点
border-box就是最终的值就是css中设置的值传统备受诟病
content-box边界需要想象width+padding+border新的默认类型

怪异盒子模型border-box

box-sizing: border-box;

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

苏南大叔:网页前端css,如何理解盒子模型box-sizing属性? - 怪异盒子模型解释
网页前端css,如何理解盒子模型box-sizing属性?(图4-3)

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

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

主流标准模型content-box

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

box-sizing: content-box;

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

苏南大叔:网页前端css,如何理解盒子模型box-sizing属性? - 内容盒子模型解释
网页前端css,如何理解盒子模型box-sizing属性?(图4-4)

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

相关文档

综述

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css