2020-11-10

标准文档流+浮动

定义：

内容从左到右，从上到下书写的。前面的内容大小或者位置发生变化时，后面的内容位置也会随之变化。

web页面，就是一个标准的文档流。内容跟咱们的书写顺序有关。

标准文档流的特性

（1）空白折叠现象

无论多少个空格，tab，换行都会折叠为一个空格。

<div>张老师                    真帅</div>

(2)高矮不同，底部对齐

妖怪我要你助我修行<img src="img/zhaoshifu.jpg" alt="">

(3)一行写满，自动换行

行内元素和块级元素

标准文档流将咱们的HTML元素分为了两种：

• 行内元素

• 块级元素

区别：

行内元素：

• 可以与其他行内元素并排。

• 宽、高设置是无效的。宽度是随内容自适应。

块级元素：

• 独占一行，不能与其他任何元素并排。

• 宽、高可以设置。如果不设置宽，宽将默认为父标签的100%，不设置高度，高度自适应。

我们将HTML标签分为两大类：容器级标签、文本级标签

容器级标签：能嵌套几乎所有的其他标签

文本级标签：只能嵌套文本、图片、超链接、表单元素。

常用的文本级标签：span，p，a，b

常用的容器级标签：div，h1-h6、li、dd dt td.

几乎所有的容器级标签都对应块级元素。

几乎所有的文本标签都对应行内元素。p标签除外，它是文本级标签，都属于块级元素。

行内元素和块级元素的转换

块级元素转行内元素

display: inline;

一旦，转为行内元素：

• 宽、高就会失效

• 可以与其他行内元素并排。

行内元素转块级元素

display: block;

转行内块元素

display: inline-block;

标准文档流限制比较多，导致页面中很多布局无法实现。如果我们想要并排，又要设置宽高，就要脱离文档流。

css中提供三种方法，可以脱离文档流。

• 浮动

• 绝对定位

• 固定定位

浮动

浮动是css里布局使用最多的属性。

浮动之后，元素会脱离文档流，紧贴上一个浮动盒子的边。

性质1：浮动的元素脱标

一旦我们设置了浮动，那么该元素就能够并排展示，而且可以设置宽和高。

/* float:right*/
float: left;

性质2：浮动元素互相贴靠

浮动元素会紧贴上一个浮动元素。若宽度不够，会换行。顶部顶帖上一个浮动元素的底部。

浮动方向是要一直。

性质3：浮动元素的“字围”效果

div可以挡住p标签，但不会挡住p中的文字。字围效果。

性质4：收缩

当一个元素设置为浮动，且没有设置宽度的时候，它的宽度会自动收缩为内容的宽度。

父类塌陷

子元素都设置了浮动，父元素没有设置高度。那么父元素的高度会变成0