标准文档流

最新推荐文章于 2024-09-24 09:51:57 发布

原创最新推荐文章于 2024-09-24 09:51:57 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#标准文档流 #脱离标准文档流方法 #标准文档流特点

css 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了标准文档流的概念，包括其定义、微观现象如空白折叠、元素排列特点，以及如何通过浮动、绝对定位和相对定位来脱离标准文档流，以实现更灵活的页面布局。

一、标准文档流定义

在web页面制作，是个“流”，文档流指的是元素排版布局过程中，元素会自动从左往右，自上而下的流式布局。

二、标准文档流的微观现象：

1、空白折叠现象

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

<img src="img/00.jpg"/><img src="img/02.jpg"/>

2、高矮不齐，底边对齐

3、自动换行，一行写不满，换行写

三、标准文档流等级

标准文档流等级森严，分为两种等级：块级元素和行内元素

块级元素特点：

1、霸占一行，不能与其他任何元素并列
2、能接受宽、高设置
3、如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽

行内元素：

1、与其他行内元素并排
2、不能设置宽、高，默认的宽度就是文字的宽度

这里我们说明一下，在HTML中，我们将标签分为：文本级（只能放置文字、图片、表单元素）和容器级（里面可以放置任何东西）
文本级标签：p、span、a、b、i、u、em
容器级标签：div、h系列标签、li、dt、dd
css分类也类似，分为行内元素和块级元素，除了p以外，所有文本级标签都是行内元素，所有容器级标签都是块级元素

四、脱离文档流的方法

标准文档流限制很多，很难满足我们的编程要求，所以我们只有通过脱离标准文档流来实现
css一共有三种手段，让一个元素脱离标准文档流：

1、浮动（float）

浮动的元素的特点：
1)浮动的元素脱离了标准文档流，不再有行内元素和块级元素之分了，既能并排也能设置高度了
2）浮动的元素相互贴靠，如果有足够的空间，浮动的元素会一个紧靠着一个，连在一起。这是浮动后的一个麻烦，后面我们介绍清除浮动带来的影响解决这个问题

3）浮动的元素会有字围的效果

HTML：

<div><img src="icon.png" alt=""></div>
<p>我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！
    我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！
    我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！
    我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！
    我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！
    我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！
    我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！
    我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！
    我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！
    我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！
    我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！
    我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！
    我是文字，我不会被遮挡，我会形成字围效果哦！我是文字，我不会被遮挡，我会形成字围效果哦！</p>

CSS:

 div {
            float: left;
        }

结果：

div挡住了p，但是p中的文字不会被挡住，而是形成“字围”效果

2、绝对定位
3、相对定位

关于绝对定位和相对定位以及清除浮动的方法，我另写一篇文章，就不在这里详细赘述了