1. 块级盒子和内联盒子
块级盒子
developer.mozilla.org/en-US/docs/…
- The box will break onto a new line.
- The box will extend in the inline direction to fill the space available in its container. In most cases this means that the box will become as wide as its container, filling up 100% of the space available.
- The width and height properties are respected.
- Padding, margin and border will cause other elements to be pushed away from the box
翻译一下：
- 块级盒子创建新行
- 会计盒子将会在内联的方向上尽可能占满所有空间
- 宽度和高度属性会发挥作用
- padding，margin，border属性值都会占有空间，推开其他盒子
内联盒子
developer.mozilla.org/en-US/docs/…
- The box will not break onto a new line.
- The width and height properties will not apply.
- Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away from the box.
- Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away from the box.
- 内连盒子不会创建新行
- 宽度和高度不会发挥作用
- 垂直方向上：padding，margin，border属性值不会推开其他的内联盒子
- 水平方向上：padding，margin，border属性值会推开其他的内联盒子
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block {
width: 300px;
height: 200px;
margin: 20px;
border: 2px solid red;
padding: 30px;
}
</style>
</head>
<body>
<div class="block">
123
</div>
<span class="block">123</span>12312312312312312312312312312312312312312312<span class="block">123</span>3123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123123 /n 123123123123123123123123123123123123123123123123123123123123123123123123
</body>
</html>
2. 盒模型
CSS中组成一个块级盒子需要:
- Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
- Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
- Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
- Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。
标准盒模型
在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
</style>
</head>
<body>
<div class="block" />
</body>
</html>
替代盒模型
css还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.block {
box-sizing: border-box;
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
</style>
</head>
<body>
<div class="block" />
</body>
</html>
全局设置替代盒模型
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
3. 盒子塌陷【外边距重叠】
块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
同一层相邻元素之间
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:nth-child(1){
margin-bottom: 13px;
background-color: yellow;
}
p:nth-child(2){
margin-top: 87px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<p>下边界范围会...</p>
<p>...会跟这个元素的上边界范围重叠。</p>
</body>
</html>
问题残留【后面继续跟踪】：
[The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats。]
(developer.mozilla.org/en-US/docs/…)
没有内容将父元素和后代元素分开
下面的例子当中：
Section的margin-top [13] 与内部子元素header元素的margin-top [87] 属性重叠，最后的结果是section元素的距离上为 [87] 。
Section的margin-bottom [87] 与内部子元素footer元素的margin-bottom [13] 属性重叠，最后的结果是section元素的距离下为 [87]。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
section {
margin-top: 13px;
margin-bottom: 87px;
}
header {
margin-top: 87px;
}
footer {
margin-bottom: 13px;
}
</style>
</head>
<body>
<section>
<header>上边界重叠 87</header>
<main></main>
<footer>下边界重叠 87 不能再高了</footer>
</section>
</body>
</html>
空的块级元素
当一个块元素上边界margin-top 直接贴到元素下边界margin-bottom时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框border、内边距paddng、高度height、最小高度min-height 、最大高度max-height 、内容设定为inline或是加上clear-fix的时候。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
margin: 0;
}
main {
margin-top: 13px;
margin-bottom: 87px;
}
</style>
</head>
<body>
<section>
<header>上边界重叠 87</header>
<main></main>
<footer>下边界重叠 87 不能再高了</footer>
</section>
</body>
</html>
此时，main的marin上下属性发生塌陷，中间的距离只有87px。
负边距规则
- 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和,；也就是说如果有-13px 8px 100px叠在一起，边界范围的基数就是 100px -13px的87px。
- 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
