一 Grid布局与flex布局：https://zhuanlan.zhihu.com/p/46757975
布局的传统解决方案，是基于盒状模型，依赖display + position + float，但它对于那些特殊的布局非常不方便，比如，垂直居中实现起来很麻烦。
display: grid指定一个容器采用网格布局。设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
CSS Grid网格布局教程：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
二 盒模型：是建立在“块”之上。
1盒子模型：它是网页设计中CSS使用的一种思维模式，具有内容(content)、填充(padding)、边框(border)、边界(margin)属性的一种元素称为盒子模型。
2<!DOCTYPE html>:声明文档解析类型，避免浏览器的怪异模式：
- BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面；元素的width=content+padding+border
- CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面；元素的width=content的宽度
- CSS3新增一个box-sizing属性（解决上面问题）
- content-box 元素的width（设定宽度是盒子内容宽度）；
- border-box 元素的width=width（设定的宽度是盒子总宽度）；
三 盒模型定位：
- Static(静态的）:默认的
- Relative(相对的):相对定位会按照元素的原始位置对该元素进行移动。
- Absolute(绝对的) :元素可以放置到页面上的任何位置。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>.
- Fixed (固定的):元素相对于浏览器窗口对元素进行定位。通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。
- Float (浮动的): 用于页面布局。CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。
四 文档流和非文档流的定义：
- 文档流：将窗体自上而下分成一行行，并在每一行中按从左到右的顺序来排放元素，这个我们称之为文档流。
- 非文档流(脱离文档流):也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
- 下面有三种定位将使元素脱离文档流;一旦该元素脱离文档流，后面的元素都会做相应的位置调整: 1.float 2.绝对定位 3.固定定位 (注意：在IE中浮动也是存在于文档流中的。)
- 需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。而对于使用absolute 脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
- z-index属性指定了一个元素的堆叠顺序;一个元素可以有正数或负数的堆叠顺序;注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
Grid布局与flex布局
原文：https://www.cnblogs.com/terrymin/p/14586108.html
