CSS布局
一個元素在頁面中一般有4種狀態(tài)：
- 普通文檔流（默認(rèn)值）
- 使用了float的浮動
- relative或者absoult的定位, 相對于瀏覽器的flexd燎斩。
CSS定位只要依靠position屬性實現(xiàn)原环，該屬性有四個值:
float:
設(shè)置元素浮動涌萤， 該元素將脫離普通文檔流号坡。直到外邊緣或者另一個浮動塊的邊緣买羞。
注意爷光，浮動對于普通流元素會形成一個擠壓的狀態(tài)峻贮， 比如<a></a><div></div> 這樣一個布局席怪，
如果設(shè)置div元素浮動，那么a元素就會被擠壓到div元素的后面去纤控。
同時挂捻，float元素的尺寸講不會計入父元素的尺寸中， 所以船万， 這里就涉及到一個清除浮動的概念：
清楚浮動的幾種做法：
1.父元素設(shè)置ovflow:hidden;
2.在需要清除浮動的底部加一個div標(biāo)簽刻撒， 同時，將這個標(biāo)簽clear:both;
3.使用偽類清楚浮動：在父元素上添加一個clear類 同時耿导，講該類設(shè)置成：
{
clear: both;
content: " ";
display: block;
height: 0;
visibility: hidden;
}
ralative
相對定位原有位置不脫離普通文檔流声怔，相對自己原有的位置進(jìn)行定位。
absolute
絕對定位舱呻， 脫離原有定位醋火，相對于祖先中，已經(jīng)定位的元素（相對和絕對）進(jìn)行定位箱吕。
flexd
相對于瀏覽器定位芥驳， 不會隨著滾動條滾動。
z-index: 對于relatvie absolute fixed 可以設(shè)置堆疊順序茬高。 值越大越在上面兆旬。
CSS中水平和垂直居中
水平居中：
1)行框： 只需要在父級元素中設(shè)置 text-align:center;
2)塊級框：父級元素 margin:0 aoto;或者設(shè)置父級框 text-align:center;
垂直居中：
單行框：一般設(shè)置子元素 height 和 line-height一致就可以實現(xiàn)。
多級行框: 借助vertical-align: middle; 實現(xiàn).
-
塊級框:
a)知道height ：子元素設(shè)置為position: absolute; top: 50%; height: 100px; margin-top: -50px;
b)不知道height:子元素設(shè)置為：
position: absolute;
top: 50%;
transform: translateY(-50%);
3.于此同時怎栽， 設(shè)置合適的內(nèi)邊距也可以實現(xiàn)垂直和水平居中丽猬。
4.flex布局對于實現(xiàn)垂直居中更加簡潔方便。
