CSS3常见布局标准流布局标准流布局就是最初始的布局，默认按照文档从上到下，从左到右进行布局。遇到块元素进行换行。块

标准流布局

标准流布局就是最初始的布局，默认按照文档从上到下，从左到右进行布局。遇到块元素进行换行。

块级元素：独占一行可以设置宽高，适用于垂直布局。

行内元素：和多个相邻的行内元素排成一行，默认宽高为自身内容的宽高，无法设置宽高。

通过设置float属性来实现元素脱离标准文档流，下方元素会自动填充到同一行空白区域。

可以给下方元素设置clear属性来实现不填充。

通过给父元素（此处称为flex盒子）设置display:flex属性，可以操作子元素（此处称为flex项）在主轴和副轴上的布局及排序。这里的排序仅影响用户的观感不会操作dom树。

在学习定位布局前我们要先知道标准流布局在默认情况下，块级元素在浏览器视窗中每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。而内联元素相反，它们互相之间相邻位于同一行上，只要在父块级元素的宽度内有空间可以这样做。如果没有空间，那么溢流的内联元素将向下移动到新行。

定位布局则是通过修改该元素距离父元素或包裹它的元素的相对距离实现布局。

static：静态布局，系统默认定位布局效果和标准流布局一致。
relative：相对布局，元素相对于父元素或包裹它的元素进行定位。通过top、bottom、left、right进行距离调整。父元素的右上角顶点视为坐标轴起始点，所以top:30px left:30px效果是该元素距离父元素上方30px，距离父元素左边30px。
absolute: 绝对布局，和相对布局类似绝对布局也是相对于父元素右上角的距离进行布局。但是不同的是，在使用absolute进行定位时需要设置在包裹它的父元素position属性，否则该绝对定位元素将视<html>为包裹它的元素。同时经过absolute修饰的元素会脱离文档流，其他元素会填充文档流的位置。
fixed: 固定布局，这种布局和绝对布局相同，唯一的不同是绝对布局是相对于最近的布局元素；固定布局是相对于浏览器视窗本身。所以可以通过fixed布局来持久化UI。
sticky: 黏性布局，这种布局类似相对布局和绝对布局的结合体，被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起 10px）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。

和flex弹性布局类似，grid是一个行和列的二维布局。通过在父元素设置display：grid，它的直接子项就会变成一个个网格项。和弹性布局不同的时，在父元素设置display：grid后页面不会马上变化，只是声明一个列数为一的网格。

网格布局特殊的点在于可以通过grid-template-areas来命名一些变量并在属性中使用这些变量作为一个区域进行布局。