布局
文档流布局： 这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行，所以只需要给块级元素加上display：inline-block 元素就会按照文档流的顺序从左到右排列
浮动布局： 浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。 给元素添加 float 属性 通过margin 和padding 控制位置 如果元素上有float属性则一定要在其父元素上清理浮动 要不然会有BUG， 一般使用 .clearfix::after{ content:''; display: block; clear:both;}
定位布局：给父元素 position：relative； 子元素position： absolute 这样子元素就可以相对父元素进行绝对定位 ，可以通过top left right button 设置位置
fixed布局： 生成绝对定位的元素，相对于浏览器窗口进行定位。top,bottom,left,right的值确定定位元素的位置。
居中
当元素有固定宽高时，可以通过margin-left:auto; margin-right:auto;
当元素宽度不确定时，先给子元素一个display:inline-block; 让他变成内联元素 再给父元素设置 text-align: center;
通过绝对定位居中 父元素设置position: relative; 子元素设置position: absolute; 在通过left：50% top：50% 设置 子元素左上角顶点到父元素中心的位置 然后 通过margin-top:-50px; margin-left:-50px; 这里的数值一定要是 子元素宽高的一半 这样子元素的中心才能调整到父元素的中心
