前端面试题 —— CSS（布局）

1、CSS 盒子模型

CSS 盒模型整体上适用于区块盒子，它定义了盒子的不同部分（外边距、边框、内边距和内容）如何协同工作，以创建一个在页面上可以看到的盒子。行内盒子使用的只是盒模型中定义的部分行为。

1）计算盒模型宽度

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

• box 的 offsetWidth 是多少？
  • offsetWidth = 内容宽度 + 内边距 + 边框 = 410px
  • offsetWidth 不包括外边距

	margin	border	padding	width	scroll	窗口之外的内容
clientWidth	不包括	不包括	包括	包括	不包括	不包括
offsetWidth	不包括	包括	包括	包括	包括	包括
scrollWidth	不包括	不包括	包括	包括	不包括	包括

2、margin 纵向重叠问题

<style>
  p {
    margin-top: 10px;
    margin-bottom: 15px;
  }
</style>

<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>

AAA 和 BBB 之间的距离是多少？

• 相邻元素的 margin-top 和 margin-bottom 会发生重叠，且高度为两者最大值；
• 空白内容的<p></p>也会重叠；
• 所以 AAA 和 BBB 之间距离是 15px。