CSS 文档流 和 盒模型

CSS第二弹 概念简介！

十分关键！

几个重要概念：

• 文档流 Normal Flow
• 块、内联、内联块
• margin合并
• 两种盒模型（border-box用的更多）

---

1.文档流方向

流动方向

• inline元素从左到右，到达最右边才会换行
• block元素从上到下，每个都另起一行
• inline-block也是从左到右，可是元素不会由于有边界而截断

宽度

• inline宽度为内部元素之和，不能用width指定
• block默认自动计算宽度，通常为一行长，可用width指定
• inline-block结合前二者特色，可用width

高度

• inline高度由line-height间接肯定，跟height无关
• block高度由内部文档流元素决定，能够设height
• inline-block跟block相似，能够设置height

注意：可用display:inline-block;指定元素类型，没有绝对的元素类型

---

2. overflow溢出

当内容大于容器时，

等内容宽度或高度大于容器的，会溢出

故用overflow属性来设置是否显示滚动条

.rainbow {
  overflow: auto;
  height: 200px;
  border: 2px solid;
}
复制代码

• auto:自动设置（本图形有溢出，故自动设置为scroll）

  

• scroll: 滚动

• hidden: 隐藏溢出部分

• visible：直接显示溢出的部分

注意：overflow可设置为 overflow-x 和 overflow-y

---

3. 脱离文档流

block高度由内部文档流元素决定，能够设置height

可是有些元素能够不在文档流中

使用以下属性，会脱离文档流:

• float
• position:absolute/fixed

---

4. 盒模型

CSS 盒模型有两种，一种是 content-box 一种是 border-box。content-box 的宽度 width 表示内容区的宽度，不包含 padding 和 border；border-box 的宽度 width 表示内容区 + padding + border 的总和。通常优先使用后者。

---

5. margin合并

通常上下margin会合并

• 父子margin合并
• 兄弟margin合并

之因此设计合并是为了方便，不用以目标宽度除以2

解决办法：

1.父子合并

• 用padding/border挡住
• 用overflow：hidden挡住
• 用display：flex

2.兄弟合并

• 用inline-block