回流,重绘与文档流
回流与重绘
- 回流:引起DOM树结构变化,页面布局变化的行为叫回流,且回流一定伴随重绘
包括了但不限于:
- 盒模型的改变
- 元素的偏移量属性(scrollTop、scrollLeft等)
- 定位或者浮动
- 浏览器窗口尺寸改变
- 文字改变,字体改变
- DOM的增删行为
- 页面初次渲染
- 重绘:只是样式的变化,不会引起DOM树变化,页面布局变化的行为叫重绘,且重绘不一定会便随回流
- 改变了背景颜色
回流所需的成本比重绘高的多,改变父节点里的子节点很可能会导致父节点的一系列的回流。
例如:一个div的高度100px是被其内容撑开的,如果为其添加样式height:50px;overflow:hidden,会触发回流重绘吗?如果其先有样式position:absolute,再添加上述样式会触发哪些?
会的,高度改变了dom 结构发生了改变
如果之前有position:absolute也会触发回流重绘
文档流有哪几种
定位方案(文档流)是控制元素的布局的方案
普通流 (normal flow)
- 标准流又称普通流,标准流中元素会自动从左往右,从上往下的流式排列
分为了
-
块级元素 (block)
宽高起作用 独占一行
块级元素:div h1-h6 ul ol li dl dt dd form p -
行内元素 (inline)
不能设置宽高 就像橡皮筋包住字
宽高靠内容撑开,一行可以放多个
行内元素:span a b strong i em ins del u -
行内块元素 (inline-block)
宽高靠内容撑开 ,一行可以放多个
行内块元素宽高、内边距、外边距都是可以控制的。
常见的块级元素:Img input a
<style>
#fa{
border: 2px solid black;
}
#son{
width: 100px;
height: 100px;
margin-left: 2px;
background-color: aqua;
}
</style>
<body>
<div id="fa">
<div id="son"></div>
<div id="son"></div>
<div id="son"></div>
</div>
</body>
子元素按照块级元素的规则排列,撑开了父元素
浮动流 (float)
添加了浮动的元素,会脱离文档流,按照一定的方式在一行排列
在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。
- 还是会对其兄弟元素造成影响
<style>
#fa{
border: 2px solid black;
}
#son{
width: 100px;
height: 100px;
/* position: absolute; */
float: left;
margin-left: 2px;
background-color: aqua;
}
</style>
<body>
<div id="fa">
<div id="son"></div>
<div id="son"></div>
<div id="son"></div>
</div>
</body>
不再撑开父元素,子元素之间的布局还是会互相影响
会按照float的方向找到在原本自己的位置上能放下自己的位置
例如
改变最后一个元素的大小
定位流(绝对定位) (absolute positioning)
在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素
造成影响,而元素具体的位置由绝对定位的坐标决定。
<style>
#fa{
border: 2px solid black;
}
#son{
width: 100px;
height: 100px;
position: absolute;
/* float: left; */
margin-left: 2px;
background-color: aqua;
}
</style>
<body>
<div id="fa">
<div id="son"></div>
<div id="son"></div>
<div id="son"></div>
</div>
</body>
三个子元素之间的定位互不干扰
使用定位与浮动两种方式可以脱离普通文档流