2020-03-15

CSS浮动文档流
1、纯文本的排列。
文档流就像我们的文本内容一样，所有的文字都会紧挨着，一个个排列下来，如果到了边界，就会换一行排列。当然如果敲回车或者按下空格键一般都会认为是一个词间距，因为英文中每个单词之间是有距离的，不像中文每个汉字连在一起的。所以不管你敲了几个回车，不管你敲了几个空格。程序都认为只有一个词间距的空格距离。我们把这种现象称为空白折叠现象。

2、文本和图片的排列
因为图文排版的原因，图片的宽度是一个整体。不像文字可以中间分开，因此在图文一起的时候我们会发现，图片作为文档流中的内容也是和一个文字元素一样，紧挨前一个文字，后面的文字也紧跟着图片。但是如果一行剩下的位置不够图片的宽度，就会自动换一行。
因为图片和一个文字元素一样，因此，图片的高度大于文字的高度，就会把这一行撑高，图片越高，行越高。在同一行的文字默认就会在图片的下端。如果你希望文字相对在图片的中间位置，那么就需要给图片设置一个CSS样式vertical-align: middle;注意一定是给图片设置，不是给文字设置。

3、块元素和行内元素
刚才我们所说的都是行内元素，也就是内容添加后会自动放在一行，如果页面的剩余的宽度比要放入的元素小，那么就会自动换行。
除了文本和图片还有一些其他的HTML标签也是行内元素。例如:
行内元素
…行内元素
… 链接

换行
… 加粗
… 加粗
图片
^… 上标
_… 下标
… 斜体
… 斜体
… 删除线
… 下划线
文本框
… 多行文本
… 下拉列表

上面所有的行内元素，如果直接写在代码中都会存在同一行中。当然换行br会将后面的元素都放在另外一行了。
有时候我们希望一个内容可以自己独立成行。这样我们就有了块元素。块元素会独立成行，与行内元素做明显的区分。
例如：

地址文字 ... 居中

...

标题一级

...

标题二级

...

标题三级

...

标题四级

...

标题五级

...

标题六级

---

水平分割线

...

段落

...

预格式化

...

段落缩进 前后5个字符

• ...

无序列表

1. ...

有序列表

...

定义列表 ... 表格 ... 表单

...

块容器 块元素和行内元素具体有哪些区别呢。 行内元素 块元素 同行 输入行内元素，就会自动同行 输入块级元素，自动换行，并且独立占有一行，其它行内元素不会和它同行的。 设置宽高 行内元素部分内容是不可以设置宽高的，例如span容器,a超链接标签等等，当然有些还是可以通过CSS样式更改宽高的，例如input，img,textarea等非文字的标签 块元素直接可以设置宽高，如果没有设置就会根据该元素的父级容器的宽自动设置100%，高度是根据内容撑开的，如果没有内容，块元素默认高度是0，这点很重要。