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

CSS 文档流 和 盒模型

CSS第二弹 概念简介！