什么是HTML文档流

html-css013

什么是HTML文档流,第1张

              什么是HTML文档流

HTML元素可分为两大类内联元素和块级元素.二者在显示方式上是不同的.

  内联元素是在水平方向上一个拦一个排列的,元素前后不产生换行,元素间的水平间距可以通过水平方向上的填充,边框和间距来控制,觉的strong,span等就属于内联元素,需要注意的是,竖直方向上的填充,边框和间距对控制内联元素的高度是不起作用的,水平方向的一行将构成一个所谓的line box,这是一个逻辑上的概念,line box是一个虚拟的矩形区域,包含了组成这行的所有内联元素,其高度本行内所有内联元素内容完全显示出来,尽管浏览器自动计算内联元素高度,我们还是可以通过设置line-height属性的值来改变元素的高度.

块级元素是在竖址方向上一个接一排列的,元素前后均产生换行,竖直方向上元素之间的距离可以用上下边距来控制,注意竖直方向的边距会产生重叠,其间距值取相邻元素中边距较大的那一个,常见p,div等都是块级元素,这些元素的内容都 是以块的形式显示在浏览器中,

  内联元素和块级元素各自遵循着不同的显示方式,这就构成了html的文档文流档的内容被比喻为流,文档中的元素可以随波流,也可以脱离流,漂浮在其上,如果你没有为元素设定附加css属性,那么元素将按照它在html代码中出现的顺序一个挨着一地排列.

HTML标签。文档流指的是HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动地从左到右(非块级元素),从上到下(块级元素)的排列规则。而在html中fl经常表示文档流指中的HTML标签,用来作为记号。

一、文档流

在我们生活中,有各种各样的“流”,有电流、水流等,就像水流从高处往低处流一样,我们可以把文档流想象成html元素在浏览器上“流动”。浏览器的顶端就是河流的源头,浏览器的底部就是河流的尽头。 而所谓的文档流(normal flow,也被称为“普通流”),指的是就是元素排版布局过程中,元素会自动从上往下,从左往右地遵守这种流式排列方式。

当浏览器渲染HTML文档时,从顶部开始渲染,为每个元素分配所需要的空间,遇到块级元素则放置在一行,行内元素则被水平放置直到在当前行遇到边界,然后从下一行起点继续渲染。

二、脱离文档流

脱离文档流说的是将元素从普通文档流中脱离出来,而其他没脱离的元素会当其不存在,仍按照给定的位置进行定位,也可以与脱离文档流元素重叠。

三、引起元素脱离文档流的情况有哪些呢?

1、float浮动

2、position:absolute绝对定位

3、position:fixed固定定位

怎么脱离文档流?

1:float

使用float可以脱离文档流。

注意!!!:使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在该元素的周围。

2:absolute

absolute称为绝对定位,其实博主觉得应该称为相对定位,因为使用absolute脱离文档流后的元素,是相对于该元素的父类(及以上,如果直系父类元素不满足条件则继续向上查询)元素进行定位的,并且这个父类元素的position必须是非static定位的(static是默认定位方式)。

3:fixed

完全脱离文档流,相对于浏览器窗口进行定位。(相对于浏览器窗口就是相对于html)。