浮动布局
- 使用DIV元素来进行浮动布局，因为DIV元素上没有任何特性。
- 为什么使用浮动，为了使块级元素能够水平排列。因为如果不使用浮动，则块级元素默认是垂直排列，而改为行级元素又无法调整宽高和边距，所以我们采用浮动，来使两个块级元素水平排列。
- 清除浮动：clear:left;
定位布局
- 静态定位：position: static; (添加top、left不起作用)
- 相对定位：position: relative;(相对于自身的原始位置进行平移)
- 绝对定位：position:absolute;(相对于父容器进行定位)
- fixed固定定位：position:fixed;(相对于窗口进行定位)
三栏式布局
-
圣杯布局（包含三个子盒子（左，中，右）。设置父盒子的 padding 值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding 出来的空位；）
-
双飞翼布局（父盒子包含三个子盒子（左，中，右），中间的子盒子里再加一个子盒子。在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin 值来让出空位，而不用再调整左右盒子。）
-
这两种布局效果一样，只是实现思路不一样。
-
两种方法基本思路都相同：首先让中间盒子 100% 宽度占满同一高度的空间，在左右两个盒子被挤出中间盒子所在区域时，使用 margin-left 的负值将左右两个盒子拉回与中间盒子同一高度的空间。接下来进行一些调整避免中间盒子的内容被左右盒子遮挡。
-
主要区别在于 如何使中间盒子的内容不被左右盒子遮挡：
圣杯布局的方法：设置父盒子的 padding 值为左右盒子留出空位，再利用相对布局对左右盒子调整位置占据 padding 出来的空位； 双飞翼布局的方法：在中间盒子里再增加一个子盒子，直接设置这个子盒子的 margin 值来让出空位，而不用再调整左右盒子。
水平居中
- 行内元素(inline)：text-align: center;
- 块级元素(block)：width: 10px; marigin-left: auto; margin-right: auto;
- 多个块级元素：父元素 text-align: center; 子元素 display: inline-block;。或者使用 flex 布局。
垂直居中
水平垂直居中