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一樣
5.transiton 過渡
屬性值順序?yàn)椋簆roperty參與過渡的屬性 duration過渡時(shí)間 timing-function過渡的樣式 delay 過渡前的延遲
過渡樣式：ease 逐漸變慢 linear勻速 ease-in加速 ease-out減速 ease-in-out 先加速再減速
6.z-index失效的原因
i使用該屬性時(shí)，元素沒有定位
ii在有定位的情況下褥蚯，該元素的z-index沒有生效挚冤，是因?yàn)樵撛氐淖釉睾髞砭由希w住了該元素
解決方式：將蓋住該元素的子元素的z-index設(shè)置為負(fù)數(shù)赞庶，而該元素不設(shè)z-index屬性.
7.居中方式
1.table-cell
2使用彈性布局的justify-content：center和align-items：center训挡；
3使用定位實(shí)現(xiàn)元素的絕對(duì)居中 設(shè)置 left:50%;top:50%;margin-left:-width/2;marigin-top:-height/2;
4.絕對(duì)定位和0
5.translate
8.如何讓每行多余文字顯示省略號(hào)
給父盒子設(shè)置以下屬性：
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
9.css選擇器
通用選擇器
標(biāo)簽選擇器
類選擇器
id選擇器
后代選擇器（空格）與子代選擇器（>）
交集選擇器（#） 并集選擇器（,#）
偽類選擇器
！important將優(yōu)先級(jí)提到最高
選擇器優(yōu)先級(jí)：
歧强！important>行內(nèi)選擇器>id選擇器>偽類選擇器>元素選擇器>繼承或者*
10.img和background的區(qū)別
1.
是一個(gè)塊狀元素澜薄，它是一個(gè)圖片，占位
need-to-insert-img
background-image是背景圖片摊册，不占位
2.background-image只能設(shè)置background-position設(shè)置初始位置,background-attachment定義背景圖是固定還是隨滾輪滾動(dòng),background-repeat,設(shè)置圖片是否平鋪
11.塊級(jí)元素與行內(nèi)元素
常見塊級(jí)元素：form肤京，select，textrea茅特，h1-h6忘分，table棋枕，button，hr妒峦，p重斑，ol，ul等
常見行內(nèi)元素：span肯骇，input窥浪，a，em笛丙，strong漾脂，b，br若债，img符相，input拆融，select等
塊級(jí)元素特點(diǎn)：
1.每個(gè)塊級(jí)元素獨(dú)占一行
2.元素的寬高等屬性可以設(shè)置
3.元素的寬度不設(shè)置蠢琳，默認(rèn)為父元素的寬度
行內(nèi)元素特點(diǎn)：
1.行內(nèi)元素排在一行，排不下就換行
2.行內(nèi)元素設(shè)置width镜豹，height無效傲须，寬度隨元素的內(nèi)容變化
3.行內(nèi)水平方向的padding-left和padding-right都會(huì)產(chǎn)生邊距效果，但是豎直方向上的padding-top和padding-bottom都不會(huì)產(chǎn)生邊距效果
行內(nèi)元素還分為替換元素和非替換元素：
替換元素：瀏覽器根據(jù)元素的標(biāo)簽和屬性趟脂，來決定其具體顯示內(nèi)容的元素泰讽，寬高可以設(shè)置
非替換元素：內(nèi)容直接表現(xiàn)出來
12css三大特性
層疊性
相同選擇器給設(shè)置相同的樣式，此時(shí)一個(gè)樣式就會(huì)覆蓋（層疊）另一個(gè)沖突樣式昔期，層疊性只要是解決樣式?jīng)_突的問題
層疊性原則：
樣式?jīng)_突已卸，遵循就近原則，哪個(gè)樣式離結(jié)構(gòu)近硼一，就執(zhí)行哪個(gè)樣式
樣式不沖突累澡，不會(huì)層疊
繼承性
子標(biāo)簽繼承父標(biāo)簽的某些樣式，文本顏色般贼，字號(hào)等
恰當(dāng)?shù)氖褂美^承可以優(yōu)化我們的代碼降低css樣式的復(fù)雜性
子元素可以繼承父元素的樣式
優(yōu)先級(jí)
當(dāng)同一個(gè)元素指定多個(gè)選擇器愧哟，就會(huì)產(chǎn)生優(yōu)先級(jí)
如果選擇器相同，執(zhí)行層疊性
如果選擇器不同哼蛆，則根據(jù)權(quán)重
