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)垂直居中更加簡潔方便。