1.一個(gè)前端必須要學(xué)好命令行
2.CSS首先要學(xué)會(huì)基本的語(yǔ)法,然后學(xué)會(huì)常用的套路,最后要會(huì)用一些常用的工具。
????常用的布局套路。float(兒子全加 float: left (right)老子加 .clearfix) 和?flex(老子加 display: flex)
3.面試常問(wèn)的BFC
堆疊上下文和BFC:我們只是知道一些屬性會(huì)觸發(fā)他們,但并不知道他們是什么。
(1)觸發(fā)堆疊上下文:
根元素 (HTML),
z-index 值不為 "auto"的 絕對(duì)/相對(duì)定位,
一個(gè) z-index 值不為 "auto"的 flex 項(xiàng)目 (flex item),即父元素 display: flex|inline-flex,
opacity 屬性值小于 1 的元素(參考 the specification for opacity),
transform 屬性值不為 "none"的元素,
mix-blend-mode 屬性值不為 "normal"的元素,
filter值不為“none”的元素,
perspective值不為“none”的元素,
isolation 屬性被設(shè)置為 "isolate"的元素,
position: fixed
在 will-change 中指定了任意 CSS 屬性,即便你沒(méi)有直接指定這些屬性的值(參考 這篇文章)
-webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素
? (2)觸發(fā)BFC
? ? ? ? 根元素或其它包含它的元素
浮動(dòng)元素(元素的float不是none)
絕對(duì)定位元素(元素具有postion為absolute或fixed)
內(nèi)聯(lián)塊(元素具有display:inline-block)
表格單元格(元素具有display:table-cell,HTML表格單元格默認(rèn)屬性)
表格標(biāo)題(元素具有display:table-caption,HTML表格單元格默認(rèn)屬性)
具有overflow且值不是visible的塊元素
display:flow-root (CSS3 專門出的觸發(fā)BFC)?
4.移動(dòng)端頁(yè)面(響應(yīng)式) 學(xué)會(huì)media query 注意手機(jī)端需要加一個(gè)meta標(biāo)簽 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
5.學(xué)會(huì)通過(guò)動(dòng)態(tài)的REM來(lái)做手機(jī)專用的自適應(yīng)方案,(通過(guò)命令行下載sass 通過(guò)sass將PX單位動(dòng)態(tài)的裝換成REM)