1.如何解決盒子塌陷問題

i.在父盒子添加一個(gè)新元素，并設(shè)置clear:both;

ii.為父元素設(shè)置overflow:hidden；或者overflow:auto；

iii.為父元素添加偽類after 并設(shè)置clear：both;（推薦）

iiii.給盒子固定的高和寬

iiiii.給父盒子也添加浮動(dòng)

2.脫離文檔流

position定位

float浮動(dòng)

fixed定位

3.使用定位實(shí)現(xiàn)元素的絕對(duì)居中

設(shè)置 left:50%;top:50%;margin-left:-width/2;marigin-top:-height/2;

4.flex

flex-direction 主軸方向

flex-wrap 控制換行

justify-content 主軸對(duì)齊 start end? center space-between space-around

項(xiàng)目位于主軸起點(diǎn)? 項(xiàng)目位于主軸終點(diǎn)? 居中? 兩端對(duì)齊且項(xiàng)目之間間隔相等? 同上，但左右兩端相較于父類有間隔

align-items 交叉單行對(duì)齊 start end center baseline(根據(jù)文字) stretch

align-content 交叉多行對(duì)齊 start end center space-between space-around stretch

(以上均在父容器設(shè)置)

order 設(shè)置項(xiàng)目的排列順序 數(shù)值越小越靠前

flex-grow 設(shè)定項(xiàng)目放大比例

flex-shrink 設(shè)定項(xiàng)目縮小比例

flex-basis 設(shè)定伸縮基準(zhǔn)值? ? 以上三種縮寫形式 flex: grow shrink basis;

align-self 可以設(shè)置單個(gè)項(xiàng)目在交叉軸上的排列方式 屬性值與align-item一樣

sticky定位是fix和relative和fixed的結(jié)合，一些時(shí)候是relative定位（定位基點(diǎn)是自身默認(rèn)位置），另一些時(shí)候自動(dòng)變成fixed定位（定位基點(diǎn)是視口）。 在設(shè)置的參數(shù)基礎(chǔ)上改變定位方式

特點(diǎn)：1.以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素（固定定位特點(diǎn)）

2.粘性定位占有原先的位置（相對(duì)定位特點(diǎn)）

3.必須添加 top 、left、right、bottom 其中一個(gè)才有效