布局

文档流布局： 这是最基本的布局方式，就是按照文档的顺序一个一个显示出来，块元素独占一行，行内元素共享一行，所以只需要给块级元素加上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的值确定定位元素的位置。

fixed布局

居中

当元素有固定宽高时，可以通过margin-left:auto; margin-right:auto; 

通过 margin-left:auto; margin-right:auto;  居中

当元素宽度不确定时，先给子元素一个display:inline-block; 让他变成内联元素 再给父元素设置 text-align: center;

text-align: center; 居中

通过绝对定位居中 父元素设置position: relative;  子元素设置position: absolute;  在通过left：50% top：50% 设置 子元素左上角顶点到父元素中心的位置 然后 通过margin-top:-50px; margin-left:-50px;  这里的数值一定要是 子元素宽高的一半  这样子元素的中心才能调整到父元素的中心

绝对定位居中