CSS哪些属性脱离文档流
🌙
手机阅读
本文目录结构
什么是文档流？
将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。
这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。
什么是脱离文档流？
如果脱离文档流，那么文档原本占据文档流的位置会被它后面的元素填补。
CSS哪些属性脱离文档流
脱离文档流有两种方式，浮动和定位
第一种:定位
position:absoluteposition:fixed
第二种:浮动
float也脱离文档流；
float:leftfloat:right
安邦认为需要延伸了解的
需要注意position: sticky，就是 粘性定位 并不会脱离文档流；
上面**什么是脱离文档流？**说了如果脱离文档流，那么文档原本占据文档流的位置会被它后面的元素填补。
粘性定位是相对定位和固定定位的混合，元素在跨越特定阈值前为相对定位，之后为固定定位。
继续延伸sticky的使用注意
1.必须指定阙值
也就是top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。
所以如果你使用sticky属性，那么你一定要定阙值，否则不生效；
2.父级定位不能是 absolute 和 fixed
如果 position:sticky 元素的任意父节点定位设置为 position:absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。
如果父节点定位设置为 relative 是没有问题的，有些人说是也不可以的，实际测试可以的（2020年最新版Chrome测试，版本 80.0.3987.100（正式版本） （64 位））。
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
