一、文档流

• 流动方向

1. inline 元素从左到右，到达最右边才会换行
2. block 元素从上到下，每一个都另起一行
3. inline-block 也是从左到右

• 宽度

1. inline 宽度为内部 inline 元素的和，不能用 width 指定
2. block 默认自动计算宽度，可用 width 指定
3. inline-block 结合前两者特点，可用 width

• 高度

1. inline 高度由 line-height 间接确定，跟 height 无关
2. block 高度由内部文档流元素决定，可以设置 height
3. inline-block 跟 block 类似，可以设置 height

• 新的 HTML5 不再规定块级元素和内联元素，取决于 display 设置的样式

• 不要在 inline 元素里面加上 block 元素，渲染规律会错乱

• div 默认的宽度是 auto ，不是 100% ，即能占据的最大宽度。
• 永远不要写 width: 100%;

• 设置的 inline 元素的 padding ，但外面的 div 没有被撑高

因为 padding 改变的不是 span 的实际高度，而是看得见的高度，绿色 div 包住的部分才是 span 的实际高度

“你好” 与 “span元素” 对齐

• inline 高度由 line-height 间接确定

可以看到 div 的 line-height 为 100px，所以 span 的实际高度为 line-height

line-height 写在 div 上是一样的，因为 line-height 会继承

• 之所以说是间接确定，是因为还可能受到字体的影响，在此原因不做深究

可以看到高度是 100.8px
参考文章：深入理解 CSS：字体度量、line-height 和 vertical-align

• overflow 溢出

• 当内容大于容器

1. 等内容的宽度或高度大于容器的，会溢出
2. 可用 overflow 来设置是否显示滚动条
3. auto 是灵活设置
4. scroll 是永远显示
5. hidden 是直接隐藏溢出部分
6. visible 是直接显示溢出部分
7. overflow 可以分为 overflow-x 和 overflow-y

• 脱离文档流

• 回顾

1. block 高度由内部文档流元素决定，可是设置 height
2. 这句话的意思是不是说，有些元素可以不在文档流中

• 哪些元素脱离文档流

1. float
2. position: absolute / fixed

• 怎么让元素不脱离文档流

1. 不要用上面的属性

二、盒模型

• 两种盒模型

• 分别是

1. content-box 内容盒 - 内容就是盒子的边界
2. border-box 边框盒 - 边框才是盒子的边界

• 公式

1. content-box width = 内容宽度
2. border-box width = 内容宽度 + padding + border

• margin 合并

• 哪些情况会合并

1. 父子 margin 合并
2. 兄弟 margin 合并

• 如何阻止合并

1. 父子合并用 padding / border 挡住
2. 父子合并用 overflow: hidden 挡住
3. 父子合并用 display: flex ，不知道为什么
4. 兄弟合并是符合预期的
5. 兄弟合并可以用 inline-block 消除
6. 总之要一条一条死记
7. 而且 CSS 的属性逐年增多，每年都有可能有新的

---

• margin 会合并（兄弟）

因为实际开发中，我们期望如下形式，避免 margin/2 的计算

兄弟合并可以用 inline-block 消除

• margin 会合并（父子）

子元素比父元素 margin 大，依然合并，并且覆盖父元素

子元素比父元素 margin 小，以父元素为准，父元素中 50px = 子元素 30px + 20px，还是合并了

• 注意，只有上下重叠，左右从来不重叠

• 父子合并用 padding / border 挡住

• 父子合并用 overflow: hidden 挡住