本篇涉及的知識點有左右布局，左中右布局 ，水平居中，垂直居中，水平垂直居中。??

一 左右布局

1.浮動方法? 給父容器添加浮動

具體代碼

2絕對定位方法

3.flex方法

flex布局

? flex布局父元素必須設(shè)置display：flex；。子元素flex的值有 auto inital? none;

? flex:0 0 300px(元素的寬) flex的優(yōu)先級較高可以取代具體的寬。

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

1絕對定位方法

?

?左右兩個元素設(shè)置為絕對定位，并且將兩個元素分別左右擺放，中間的元素通過margin-left和margin-right自動適應(yīng)寬。

2浮動

? ? ? ? ? ?這里寬是用百分比設(shè)置的，可以設(shè)為具體的寬

? ?三 水平居中?

1.通過設(shè)置text-align:center;和margin:0 auto; 子元素和父元素必須設(shè)置具體的寬高

2絕對定位方法

父元素設(shè)置絕對定位和具體的寬，

3通過inline-block設(shè)置

四垂直居中

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

2display:table-ceil;

3display:fiex;

4絕對定位和0

? ? ? 要確定元素的寬高，也可以用百分比替代。

適合用于移動端

5translate