CSS标准文档流

1. 标准文档流

---

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

2. 标准流的微观现象：

---

• 空白折叠现象。

// 比如，如果我们想让img标签之间没有空隙，必须紧密连接.

• 高矮不齐，底边对齐
• 自动换行，一行写不完时，换行写

3.标准文档流等级

---

分为两种等级：块级元素和行内元素；
块级元素：
1).霸占一行，不能与其他任何元素并列
2).能接受宽、高
3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽
行内元素：
1).与其他元素并排
2).不能设置宽、高。默认的宽度就是文字的宽度
在HTML中，标签分为：文本级和容器级；
文本级：p、span、a、b、i、u、em
容器级：div、h系列、li、dt、dd
温馨小提示：
(1).容器级的标签，里面可以放置任何东西；文本级的标签里面，只能放置文字、图片、表单元素。
(2).p标签是一个文本级标签。p里面只能放文字、图片、表单元素。其他的一律不能放。
(3).定义列表是一个组标签，不过比较复杂，出现了三个标签：
dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义表述词儿
dt、dd只能在dl里面；dl里面只能有dt、dd

 
北京
 
国家首都，政治文化中心
 
上海
 
魔都，有外滩、东方明珠塔、黄浦江
 
广州
 
中国南大门，有珠江、小蛮腰
 
` 

表达的语义是两层：

• 是一个列表，列出了北京、上海、广州三个项目
• 每一个词儿都有自己的描述项。
  dd是描述dt的。

延伸外之后，开始说正事儿

css的分类和HTML的分类很像，就p不一样
所有的文本级标签都是行内元素，除了p；p是个文本级，但是是个块级元素；
所有的容器级标签都是块级元素
我们用图表示一下：

4.块级元素与行内元素的相互转换

块级元素可以设置为行内元素；
行内元素也可以设置为块级元素。
举个例子：

div {
  display: inline;
  background-color: pink;
  width: 400px;
  height: 400px;
}

display是显示模式，用来改变元素的行内、块级性质
，一旦给一个标签设置display:inline;那么这个标签立即变为行内元素。此时div和span没有什么区别，此时的div不能设置宽度和高度（即使设置了也并不显示出来，不信你去用代码验证一下呀），此时div可以和别人并排

同理

span {
   display: block;
   width: 300px;
   height: 300px;
   background-color: green;
}

此span标签变为块级元素，与div无异；此时的span能够设置高度和宽度；并且霸占一行，别人不能与之并排；如果不设置宽度，那么将撑满父亲。

标准流里面的限制特别多，标签的性质也特备恶心。标准流做不出网页：因为能并排的不能改宽高。所以，要脱离标准流。

css中有三种手段可以使一个元素脱离标准文档流，分别为浮动和绝对定位,固定定位。