标准文档流、脱离文档流及脱离文档流的3种方式
1、如果元素不再满足浏览器的默认布局排版,也就是说将元素从默认的布局排版中拿走,此时这个元素不再占有它在标准流中的位置。那么这时这个元素就脱离了文档标准流,此时就是脱离文档流了。2、元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。3、脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间
目录
一、标准文档流
1、定义
一个“默认”状态。文档流指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。也就是没有被其他排版浮动和定位相关的CSS属性干扰的就叫标准流。
2.现象
(1)空白折叠现象。比如,如果我们想让img标签之间没有空隙,必须紧密连接。
<img src="img/00.jpg"/><img src="img/02.jpg"/>
若是以下没有紧密连接的情况,则会出现空白折叠现象:
<span class="box1">怎么么怎么怎么啦</span>
<span class="box2">怎么么怎么怎么啦</span>
<span class="box3">怎么么怎么怎么啦</span>
(2)高矮不齐,底边对齐。
(3)自动换行,一行写不完时,换行写。
二、脱离文档流
1、定义
1、如果元素不再满足浏览器的默认布局排版,也就是说将元素从默认的布局排版中拿走,此时这个元素不再占有它在标准流中的位置。那么这时这个元素就脱离了文档标准流,此时就是脱离文档流了。
2、元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方)。
3、脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
既要实现既要并排,又要设置宽高,此刻就要脱离标准流。
2、3种方式
(1)浮动
如果给一个元素添加了float
属性,那么它将脱离文档流,并不在占有原来的位置。例如执行下面这段代码:
得到的结果是:
虽然我们div3的高度是40px,但是由于div2浮动了,所以div2不再占有文档标准流中的位置,所以div3就填补了20px的div2的位置,然后div2漂浮在文档标准流之上,所以div3填补的那20px就没有显示出来。
如果我们让div2向右浮动。得到的结果就是:
使用浮动的初心就是为了让几个div在同一行显示,两个同时使用了float的元素,如果能在一行显示的下就会浮动到一行显示,如果不能就算使用了float也会在不同的行显示,但是他们依然脱离了标准文档流。
如果使用了浮动的元素的上一个元素是标准流中的元素,如上面例子中的div2使用了浮动,div1是标准流,此使div2的顶部是与div1的底部对齐的而不会与div1在同一行显示。如果div1也使用了浮动,那么在空间允许的情况下div2会 和div1在同一行显示。
(2)绝对定位absolute
绝对定位使用的参考点是页面的角。绝对定位脱离标准文档物流即脱标。
绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角:
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。所以给一个绝对定位的框添加边距时是相对其包含框的,但是如果没调整边距,默认情况是和上一个元素对齐。例如下面这段代码:
运行之后结果为:
因为h2脱离标准流,所以向上移动代替了h2原先的位置。
(3)固定定位fixed
固定定位就是相对浏览器定位,无论页面怎么滚动,他都不会变化。
用途:①固定导航栏②返回顶部
更多推荐
所有评论(0)