css布局

本篇涉及的知识点有左右布局，左中右布局 ，水平居中，垂直居中，水平垂直居中。  

一 左右布局

1.浮动方法  给父容器添加浮动

具体代码

2绝对定位方法

3.flex方法

flex布局

  flex布局父元素必须设置display：flex；。子元素flex的值有 auto inital  none;

  flex:0 0 300px(元素的宽) flex的优先级较高可以取代具体的宽。

二 左中右布局（三栏布局）

1绝对定位方法

 

 左右两个元素设置为绝对定位，并且将两个元素分别左右摆放，中间的元素通过margin-left和margin-right自动适应宽。

2浮动

           这里宽是用百分比设置的，可以设为具体的宽

   三 水平居中 

1.通过设置text-align:center;和margin:0 auto; 子元素和父元素必须设置具体的宽高

2绝对定位方法

父元素设置绝对定位和具体的宽，

3通过inline-block设置

四垂直居中

 1line-height=行高和text-align:center;

2display:table-ceil;

3display:fiex;

4绝对定位和0

      要确定元素的宽高，也可以用百分比替代。

适合用于移动端

5translate