1.BFC

參考：
學(xué)習(xí) BFC (Block Formatting Context)

塊級(jí)格式化上下文，是一個(gè)獨(dú)立的渲染區(qū)域易阳，讓處于 BFC 內(nèi)部的元素與外部的元素相互隔離附较，使內(nèi)外元素的定位不會(huì)相互影響。

觸發(fā)條件：

• display:inline-block/table(table-cell/table-caption等)/flex/inline-flex/flow-root
• position:absolue/fixed
• float的值不為none
• overflow!=visible
• 根元素或其它包含它的元素
• column-span: all;橫跨多少列

作用：

• 去除浮動(dòng)影響潦俺，防止父級(jí)高度塌陷拒课，因?yàn)橛?jì)算BFC高度時(shí)浮動(dòng)元素也參與計(jì)算
• 阻止元素被浮動(dòng)元素覆蓋，因?yàn)锽FC的區(qū)域不會(huì)與float的元素區(qū)域重疊
• 自適應(yīng)兩欄布局事示、多欄布局
• 阻止margin重疊：
  • 阻止子元素和父元素重疊(margin-top)
  • 阻止同一個(gè)BFC下相鄰的子元素重疊（可給其中一個(gè)自元素設(shè)置BFC）

擴(kuò)展：有哪些方法去除浮動(dòng)早像，防止父級(jí)高度塌陷？

• 通過增加尾元素清除浮動(dòng)：:after/<br>{clear:both}
• 創(chuàng)建父級(jí)BFC
• 父級(jí)設(shè)置高度

2.層疊上下文

元素提升為一個(gè)比較特殊的圖層肖爵，在三維空間中 (z軸) 高出普通元素一等卢鹦。
從上往下：

• z-index為正值
• z-index：0 ：沒有設(shè)置z-index的層疊上下文
• 行內(nèi)元素
• 浮動(dòng)元素
• 塊級(jí)元素
• z-index為負(fù)值
• background/border

3.flex布局

整體容器：

• align-items:center|flex-start|flex-end|baseline|stretch
• justify-content:center|space-around|space-between|flex-start|flex-end
• flex-direction:row（默認(rèn)水平方向）|column|row-reverse|column-reverse
• flex-wrap:nowrap（默認(rèn)不換行）|wrap|wrap-reverse
• flex-flow（flex-direction和flex-wrap簡(jiǎn)寫）:row nowrap（默認(rèn)）
• align-content（多根軸線的對(duì)齊方式）:center|space-around|space-between|flex-start|flex-end|stretch

子元素項(xiàng)目：

• flex:0 1 auto（默認(rèn)值）;表示flex-grow:0（項(xiàng)目的放大比例）;flex-shrink:1（項(xiàng)目的縮小比例）;flex-basis:auto（項(xiàng)目占據(jù)的固定空間）;
  • flex:auto(1 1 auto)
  • flex:none(0 0 auto)
• align-self:auto（默認(rèn)值劝堪，表示繼承父元素的align-items屬性冀自，如果沒有父元素驻呐，則等同于stretch）|center|flex-start|flex-end|baseline|stretch
• order（項(xiàng)目的排列順序，數(shù)值越小排列越靠前）

參考鏈接：Flex 布局教程：語(yǔ)法篇

引申：grid布局

容器：

• grid-template-columns |grid-template-rows
  • repeat:grid-template-columns:repeat(3, 33.33%);
  • auto-fill
  • fr
  • minmax()
  • auto
• row-gap（行間距） |column-gap（列間距）|gap（前兩個(gè)的縮寫）
• grid-template-areas：用于定義區(qū)域
• grid-auto-flow:row（默認(rèn)先行后列）| column | row dense | column dense
• justify-items（設(shè)置單元格內(nèi)容的水平位置） | align-items（設(shè)置單元格內(nèi)容的垂直位置） | place-items（前兩者簡(jiǎn)寫形式）
• justify-content （整個(gè)內(nèi)容區(qū)域在容器里面的水平位置）| align-content （整個(gè)內(nèi)容區(qū)域在容器里面的垂直位置）| place-content （前兩者簡(jiǎn)寫形式）
• grid-auto-columns | grid-auto-rows瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的列寬和行高

項(xiàng)目屬性：

• grid-column-start：左邊框所在的垂直網(wǎng)格線| grid-column-end：右邊框所在的垂直網(wǎng)格線 |grid-column（前兩者簡(jiǎn)寫）
• grid-row-start：上邊框所在的水平網(wǎng)格線| grid-row-end：下邊框所在的水平網(wǎng)格線 |grid-row前兩者簡(jiǎn)寫
• grid-area ：指定項(xiàng)目放在哪一個(gè)區(qū)域
• justify-self（設(shè)置單元格內(nèi)容的水平位置）| align-self（設(shè)置單元格內(nèi)容的垂直位置） | place-self（前兩者簡(jiǎn)寫）

4.布局

水平居中布局：

• position:absolute宋雏；left:50%;transform:translateX(-50%)
• display:flex;justify-content:center
• margin:0 auto
• text-align:center

垂直居中：

• line-height
• display:flex;align-items:center
• display:table-cell;vertical-align:middle;
• position:absolute蚪燕；top:50%;transform:translateY(-50%)

水平垂直居中：

• position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
• display:table-cell;vertical-align:middle;
• display:flex;align-items:center;justify-content:center;

5.如何實(shí)現(xiàn)左側(cè)寬度固定钥弯，右側(cè)寬度自適應(yīng)的布局

• float+margin
• calc
• float+overflow
• flex

參考鏈接：兩年工作經(jīng)驗(yàn)成功面試阿里P6總結(jié)

6.display:inline-block之間為什么有間隔

• font-size:0
• letter-spacing：0 |負(fù)值
• word-spacing
• 移除空格
• 使用margin負(fù)值

參考鏈接：去除inline-block元素間間距的N種方法

7.選擇器優(yōu)先級(jí)

選擇器從右向左解析
!important> id選擇器> class選擇器 >標(biāo)簽選擇器 >* >繼承>默認(rèn)

8.link與@import的區(qū)別

9.CSS動(dòng)畫

• transition:屬性名默認(rèn)為all 時(shí)長(zhǎng) 曲線 延時(shí)
• animation:動(dòng)畫名字 動(dòng)畫時(shí)間 曲線（linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier ）延遲時(shí)間 次數(shù) 方向
  • animation-fill-mode(靜止模式)：forwards(停止時(shí)郊酒，保留最后一幀) | backwards(在 animation-delay所指定的一段時(shí)間內(nèi)褐健，在動(dòng)畫開始之前屬性值) |both兩者皆可
• transform:
  • translate
  • scale
  • rotate
  • skew

參考鏈接：中高級(jí)前端大廠面試秘籍徽诲，為你保駕護(hù)航金三銀四挫掏，直通大廠(上)

引申：動(dòng)畫的實(shí)現(xiàn)方案有哪些？有哪些動(dòng)畫優(yōu)化的方案喷舀？

優(yōu)化：

• 盡可能多的利用硬件能力砍濒，如使用3D變形來(lái)開啟GPU加速。一個(gè)元素通過translate3d右移500px的動(dòng)畫流暢度會(huì)明顯優(yōu)于使用left屬性硫麻。原因是因?yàn)椋?
  • CSS動(dòng)畫屬性會(huì)觸發(fā)整個(gè)頁(yè)面的重排relayout爸邢、重繪repaint、重組recomposite
  • Paint通常是其中最花費(fèi)性能的拿愧，盡可能避免使用觸發(fā)paint的CSS動(dòng)畫屬性杠河，這也是為什么我們推薦在CSS動(dòng)畫中使用webkit-transform:ranslateX(3em)的方案代替使用left: 3em，因?yàn)閘eft會(huì)額外觸發(fā)layout與paint，而webkit-transform只觸發(fā)整個(gè)頁(yè)面composite
• 盡可能少的使用box-shadow與gradient券敌。box-shadow與gradient往往都是頁(yè)面的性能殺手唾戚，尤其是在一個(gè)元素同時(shí)都使用了它們
• 盡可能的讓動(dòng)畫元素不在文檔流中，以減少重排待诅。比如使用定位
  引申：css3結(jié)束動(dòng)畫時(shí)會(huì)出現(xiàn)閃爍問題
• 如果沒有特別規(guī)定動(dòng)畫結(jié)束后的狀態(tài)的話叹坦，動(dòng)畫在結(jié)束后都會(huì)直接跳回到動(dòng)畫未執(zhí)行時(shí)候的原始狀態(tài)。解決方法：添加animation-fill-mode:forwards

10.如何解決移動(dòng)端 Retina 屏 1px 像素問題

• border-image
• background-image
• 多背景漸變
• box-shadow

.box-shadow-1px {
box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

• viewport +rem
• 偽元素+transform

11.已知如下代碼卑雁，如何修改才能讓圖片寬度為 300px 募书？注意下面代碼不可修改。

  <img src="1.jpg" style="width:480px!important;”>

1. css方法
   • max-width:300px;覆蓋其樣式测蹲；
   • transform: scale(0.625);按比例縮放圖片莹捡；
   • box-sizing: border-box;padding: 0 90px;
2. js方法
   • document.getElementsByTagName("img")[0].setAttribute("style","width:300px!important;")

12.分析比較 opacity: 0、visibility: hidden扣甲、display: none 優(yōu)劣和適用場(chǎng)景篮赢。

1. 結(jié)構(gòu)：

   • display:none: 會(huì)讓元素完全從渲染樹中消失，渲染的時(shí)候不占據(jù)任何空間琉挖， 不能點(diǎn)擊
   • visibility: hidden：不會(huì)讓元素從渲染樹消失启泣，渲染元素繼續(xù)占據(jù)空間，只是內(nèi)容 不可見粹排，不能點(diǎn)擊
   • opacity: 0：不會(huì)讓元素從渲染樹消失种远，渲染元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見顽耳，可以點(diǎn)擊

2. 繼承：

   • display: none和opacity:0：是非繼承屬性坠敷，子孫節(jié)點(diǎn)消失由于元素從渲染樹消失造成，通過修改子孫節(jié)點(diǎn)屬性無(wú)法顯示射富。
   • visibility: hidden：是繼承屬性膝迎，子孫節(jié)點(diǎn)消失由于繼承了hidden，通過設(shè)置visibility: visible胰耗，可以讓子孫節(jié)點(diǎn)顯示限次。

3. 性能：

   • display:none : 修改元素會(huì)造成文檔回流，讀屏器不會(huì)讀取display: none元素內(nèi)容柴灯，性能消耗較大
   • visibility:hidden:修改元素只會(huì)造成本元素的重繪卖漫，性能消耗較少。讀屏器讀取visibility: hidden元素內(nèi)容
   • opacity: 0 ：修改元素會(huì)造成重繪赠群，性能消耗較少

聯(lián)系：它們都能讓元素不可見