盒模型
可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：外边距（margin）、边框（border）、内边距（padding）、内容（content）。它在页面中所占的实际空间宽度是margin + border + padding + content 的宽度相加。
但是，盒模型有标准盒模型和IE盒模型。
1、两者的区别是什么？
标准的(W3C)盒模型：元素的实际宽度等于设置的宽高 + border + padding (默认方式)
IE盒模型： 元素的实际宽度就等于设置的宽高，即使定义有 border 和 padding 也不会改变元素的实际宽度，即 ( Element width = width )
2、怎么设置这两种模型呢？
很简单，通过设置 box-sizing就可以达到自由切换的效果。
box-sizing:content-box;(标准)
box-sizing:border-box;(IE)3、描述一下下面盒子的大小，颜色什么的（content-box模型）
<html>
<style>
body{
background-color: gray;
}
div{
color: blue;
width: 100px;
background-color: pink;
border: 10px solid;
padding: 20px;
}
</style>
<body>
<div></div>
</body>
</html>考查点：
- 整个盒子的大小
- padding的颜色
- border的颜色
- height为0了，看得见盒子吗？
- 整个盒子的大小(内容区) = 0 （因为height为0）
- padding的颜色 = pink（默认背景色蔓延到padding和border区域）
- border的颜色 = blue（会继承color字体的颜色，默认为black）
- height为0了，看得见盒子吗？（虽然height为0，但是看得见盒子，因为有border和padding）
这里需要注意：
- 如果没有写border-style，那么边框的宽度不管设置成多少，都是无效的。
- border-color的颜色默认跟字体颜色相同
- padding颜色跟背景颜色相同
4、当元素设置成inline-block会出现什么问题？怎么消除？
inline-block元素水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：
.space a {
display: inline-block;
padding: .5em 1em;
background-color: #cad5eb;
}
<div class="space">
<a href="##">惆怅</a>
<a href="##">淡定</a>
<a href="##">热血</a>
</div>去除inline-block元素间间距的N种方法
- 元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：
<div class="space">
<a href="##">惆怅</a
><a href="##">淡定</a
><a href="##">热血</a>
</div>- 使用font-size:0
详细的可以看看这篇文章去除inline-block元素间间距的N种方法
5、行内元素可以设置padding，margin吗？
行内元素的margin左右有效，上下无效。
行内元素的padding左右有效 ，但是由于设置padding上下不占页面空间，无法显示效果，所以无效。
6、什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？
边距重叠：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。
边距重叠分为两种：
- 同级关系的重叠：
同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个
- 父子关系的边距重叠：
嵌套崩塌
父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。
给父元素添加overflow：hidden 这样父元素就变为 BFC，不会随子元素产生外边距。
文档更新时间: 2023-01-05 17:21 作者：孙老师
