[CSS全解]CSS定位
本文章资料主要来自饥人谷2020版前端体系课,本文为课程笔记。
布局 vs 定位
布局是基于平面空间的二维坐标,定位基于垂直于屏幕的三维坐标。
文档流与盒模型
之前我们知道,文档流(Normal Flow)正常从上到下,从左到右根据盒模型依次排列,但是一个盒模型其实有多个图层,从下到上依次为:
- background
- border
- 块级子元素
- 浮动元素
- 内联子元素(文字内容)
通过上面的模型,可知浮动元素脱离文档流,就是从第三层的块级子元素变为了第四层的浮动元素。