前端面试笔记2：盒子模型(部分重点)

盒子模型

我们网页的元素排列通常都是一个盒子套着另外一个盒子。在盒子里面有不同的元素。元素之间就会有间距、内边距、外边距、边框等等的效果。如下图所示：

我们可以看到我们的每个盒子都由元素内容、内边距、边框和外边距这四个部分所组成。

同时我们还观察到每个盒子都有四条边，这四条边在盒子模型中的顺序是上、右、下、左。

元素居中定义

对于外边距来说，当我们没有设置的时候，外边距就是自动的。这时如果我们让一个元素的左右两边的外边距都是自动的话，就可以产生一个元素居中的效果。代码如下：

margin: 0 auto;

此外我们的外边距不仅可以有正值还可以有负值，比如：

margin-left:-50px;
margin-right:-50px;

此时我们的元素就会有一个溢出的效果。

边距合并

当我们设置两个 h2 标签，在里面写入内容，然后对其设置样式：

h2: {
    border:1px solid red;
    margin-bottom: 30px;
    margin-top: 30px;
}

可以看到我们为这两个 h2 标签都设置了上下为 30px 的外边距。这时我们会发现两个 h2 标签之间的距离是 30px 而不是我们想象的 60px 。

这就是边距合并。如果两个元素之间即有向下的边距又有向上的边距，那么就会取两个边距中较大的那个边距值来使用。

所以上面的例子中只取了 30px 这个值来作为两个元素之间的边距。

尺寸限制

有时我们在一个固定大小的 div 中添加其他元素，然后这个元素又设置了边框、内边距等属性，我们就会发现我们外层的 div 的大小就会随之发生变化，这会影响我们的页面布局，所以有的时候我们想要这个 div 就是固定的大小，不会因为其他因素而发生大小变化，这是我们就可以为 div 设置一个属性：box-sizing: border-box;。如下：

box-sizing: border-box

这是我们就会发现无论我们 div 中的元素的属性如何设置，我们外层的 div 的大小都不会发生变化。这样就不会影响我们的页面布局。

轮廓线

轮廓线在 css 中的属性名是 outline 。

要强调一点是，轮廓线位于边框的外部，与边框的使用方法类似。但是与边框不同的一点是，轮廓线不会占用布局空间。

fit-content 根据内容自适应尺寸

这个属性可以使我们的盒子的宽度根据内容的大小来实现自适应的效果。具体代码如下：

width: fit-content;

max-content&min-content盒子根据内容尺寸自适应

max-content

容器尺寸按子元素最大宽度设置。

min-content

将容器尺寸按最小子元素宽度设置。