序言

CSS盒模型是CSS的基础，在面试过程中这个问题也经常被提问到，属于是面试经典考点，在这里我们将对CSS盒模型相关知识点进行整理重温，让我们扎实基础拿捏这个考点。

盒模型的组成

在一个HTML文档中，每一个元素都会被视为一个BOX（盒子），并且这个盒子由四个部分组成。

Content（内容区域）：是盒子内部实际内容显示的区域，例如文本、图片或其他元素。内容区域的大小由盒子的宽度和高度属性决定。
Padding（内边距）：是内容区域与边框之间的空白区域，通常用来控制盒子内容与盒子边框的距离。可以使用padding属性设置内边距的大小，可以单独设置上、右、下、左四个方向的内边距，也可以同时设置统一的内边距。
Border（边框）：是元素的边框，如果将盒子比作是一个房子，那么边框就是房子墙壁的厚度。边框由border-width（宽度）、border-style（样式）和border-color（颜色）三个属性来定义。可以分别设置上、右、下、左四个方向的边框样式，也可以通过border属性同时设置宽度、样式和颜色。
Margin（外边距）：是盒子与其他元素之间的空白区域，用来控制盒子与周围元素的距离，如果盒子是一个房子，边框是墙壁，那么外边距的意思就是这个房子上下左右周围元素需要距离这个房子的大小。可以使用margin属性设置外边距的大小，可以单独设置上、右、下、左四个方向的外边距，也可以同时设置统一的外边距。

box-sizing 盒模型计算方式

在一些公司面试中hr很可能会问让你说下盒模型，意思就是将你对于盒模型的理解都说出来，而CSS盒模型的计算方式其实由两种，第一种就是默认为W3C标准盒模型，而第二种就是IE盒模型。

W3C标准盒模型

在标准盒模型中，元素的宽度和高度只包括content的大小，也就是说，元素的padding和border会增加元素的总尺寸。这意味着，如果你设置了一个元素的宽度为200px，加上10px的内边距和5px的边框，那么这个元素将会占用230px的总宽度

css 复制代码

<style>
        .container{
                width: 200px;
                height: 200px;
                padding: 10px;
                border: 5px solid red;
                background-color: blue;
        }
    </style>

这里可能有伙伴会有一些疑问明明border设置的属性为5PX显示却是4.8PX，这是因为浏览器默认情况下会将像素值转化为物理像素（设备像素），而某些设备的显示屏像素密度较高，导致浏览器渲染出来的实际像素值略小于 CSS 设置的像素值。

例如，在一个像素密度为 2 倍的设备上，CSS 设置了 border-width: 5px，浏览器会将其转化为 10 个物理像素，但是实际渲染出来的边框宽度可能只有 4.8px 左右，因为该设备上每个 CSS 像素需要占据两个物理像素。

如果你想要在不同设备上保持更加一致的显示效果，可以考虑使用 viewport meta 标签或 CSS 的媒体查询来调整页面缩放比例，以便让不同设备上的像素在视觉上更加一致。

js 复制代码

@media (min-device-pixel-ratio: 1.5) {
  /* 针对高像素密度设备的 CSS 样式 */
}

IE盒模型

在IE盒模型中，元素的宽度和高度包括content、padding和border的大小，也就是说，元素的总尺寸已经包括了边框和内边距。这意味着，如果你设置了一个元素的宽度为200px，加上10px的内边距和5px的边框，那么这个元素将会占用200px的总宽度，然后元素实际内容区域的宽度就会被压榨到170px需要注意的是IE盒模型目前已经被标准盒模型所代替，大多数浏览器都采用标准盒模型作为默认的计算方式。如果需要使用IE盒模型，还需要在CSS中明确指定box-sizing: border-box;

js 复制代码

<style>
        .container{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 5px solid red;
            background-color: green;
            box-sizing: border-box;
        }
    </style>

这里我们可以看到当我们把这个元素的盒模型设置为IE盒模型，元素的宽度和高度只由content的width和height属性决定，不管我们怎么将border和padding属性设置到多大也不会影响元素所占据的总大小，在ie8+中所采用的盒子模式是通过box-sizing（CSS新增加的属性）来控制的。如果把box-sizing定义为border-box，就会使用 IE盒模式。如果在ie6、7、8中缺少 DOCTYPE, IE模式将被触发。在目前的W3C标准中，盒模型的切换是可以通过box-sizing来实现的。

js 复制代码

<style>
        .box1{
            width: 200px;
            height: 200px;
            padding: 10px;
            margin: 5px;
            border: 5px solid red;
            background-color: green;
            display: inline-block;
        }
        .box2{
            width: 200px;
            height: 200px;
            padding: 10px;
            margin: 5px;
            border: 5px solid red;
            background-color: green;
            display: inline-block;
        }
    </style>

在这里我们先设置了两个元素并且在CSS中给这两个元素额外添加了margin：5px属性，但是我们发现这两个元素的大小相比之前并没有改变，这是因为我们在计算元素的大小时并不会考虑margin属性，这并不是属于元素本身所占据的大小，那么这个属性有什么作用呢？

如果我们不设置这个属性，页面将会呈现一种原始的模样，在HTML中我们所有元素都是从最左边最上面开始计算位置大小的，所以我们将margin这个样式去掉就会变成

我们可以看到两个元素去掉margin属性后box1就不会和body、box2产生5px的外边距效果了，那么我们现在就更好地理解了margin属性的作用----margin能够让这个元素与其他元素产生一种距离感的美，规定限制其他元素应该离我们多远，并且这个margin外边距属性时不会计算到我们元素本身的大小中去的

总结

按实用性来说还是推荐大家尽量使用W3C标准盒模型，但是我们需要在HTML文件中声明DOCTYPE类型，从而避免不同浏览器对同一页面的不兼容性。
盒模型的4个部分：content（内容）、padding（内边距）、border（边框）、margin（外边距）
考点 2种盒子模型

(公摊) W3C标准盒子模型 = content + padding + border + margin
IE盒模型 = content（自动缩放） + padding + border + margin

感谢大家的阅读，点点赞吧♥

如果文章对你有帮助的关注+收藏从此不迷茫

时刻更新中

开源Git仓库: gitee.com/cheng-bingw...

更多内容：【面试篇】当面试官问你JS预编译的底层逻辑

【面试篇】重温CSS盒模型 扎实基础RUN不停

序言

盒模型的组成

box-sizing 盒模型计算方式

总结

感谢大家的阅读，点点赞吧♥

【面试篇】重温CSS盒模型扎实基础RUN不停