CSS 盒模型

CSS 盒模型本質(zhì)上是一個(gè)盒子，盒子包裹著 html 元素。盒子由四個(gè)屬性組成，從內(nèi)到外分別是：content 內(nèi)容、padding 內(nèi)填充、border 邊框、外邊距 margin。

盒模型分為兩種：

1. W3C 盒子模型，即標(biāo)準(zhǔn)盒模型：width = content-width
2. IE 盒模型，即怪異盒模型：width = content-width + padding-width + border-width

行內(nèi)元素和塊級(jí)元素的區(qū)別

清除浮動(dòng)的方法

1. 給父盒子設(shè)置高度
2. 給浮動(dòng)元素后面加一個(gè)空的 div，并且該元素不浮動(dòng)，然后設(shè)置 clear: both;
3. 偽元素清除法

   .clearfix:after {
       display: table;
       content: '';
       clear: both;
   }
   

4. overflow: hidden;（觸發(fā) BFC）

BFC，塊格式化上下文（block formatting context）

具有 BFC 特性的元素可以看做是隔離了的獨(dú)立容器，容器里面的元素不會(huì)在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性。

觸發(fā) BFC：

1. body 根元素
2. 浮動(dòng)元素：float 除 none 以外的值
3. 絕對(duì)定位元素：position（absolute、fixed）
4. display 為 inline-block、table-cell、flex
5. overflow 除了 visible 以外的值（hidden、auto、scroll）

BFC 的特點(diǎn)：

1. 內(nèi)部塊級(jí)盒子垂直方向排列
2. 盒子垂直距離由 margin 決定，同一個(gè) BFC 盒子的外邊距會(huì)重疊
3. BFC 就是一個(gè)隔離的容器，內(nèi)部子元素不會(huì)影響到外部元素
4. BFC 的區(qū)域不會(huì)與 float box 疊加
5. 每個(gè)元素的 margin box 的左邊，與包含塊 border box 的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。

BFC 的用途：

1. 清除浮動(dòng)
2. 解決外邊距合并
3. 布局

IFC

內(nèi)聯(lián)元素會(huì)觸發(fā) IFC，IFC 只有在一個(gè)塊元素中僅包含內(nèi)聯(lián)級(jí)別元素時(shí)才會(huì)生成。

IFC 的特點(diǎn)：

1. 內(nèi)部的 box 會(huì)在水平方向排布；
2. 這些 box 之間的水平方向的 margin、boder、padding 都有效；
3. Box 垂直對(duì)齊方式：以它們的底部、頂部對(duì)齊，或以它們里面的文本的基線（baseline）對(duì)齊（默認(rèn)，文本與圖片對(duì)齊），例：line-heigth 與 vertical-align。

position 有哪些值，分別是什么含義

• static(靜態(tài))：默認(rèn)值，不受 top、bottom、left、right、z-index 屬性影響，元素出現(xiàn)在正常的文檔流中。

• relative(相對(duì))：相對(duì)定位，相對(duì)于其正常位置進(jìn)行定位。不脫離文檔流的布局，受 top、bottom、left、right 屬性影響，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域。

• absolute(絕對(duì))：絕對(duì)定位，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。脫離文檔流的布局，遺留下來(lái)的空間由后面的元素填充。

• fixed(固定)：固定定位，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過 top、bottom、left、right 屬性進(jìn)行規(guī)定。

• sticky(粘性定位)：該定位基于用戶滾動(dòng)的位置。主要用在對(duì) scroll 事件的監(jiān)聽上，當(dāng)元素在屏幕內(nèi)，表現(xiàn)為 position: relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像 position: fixed;，它會(huì)固定在目標(biāo)位置。
  使用條件：

  1. 父元素不能 overflow: hidden 或者 overflow: auto 屬性。
  2. 必須指定top、bottom、left、right 4個(gè)值之一，否則只會(huì)處于相對(duì)定位。
  3. 父元素的高度不能低于 sticky 元素的高度。
  4. sticky 元素僅在其父元素內(nèi)生效

• inherit(繼承)：規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

• initial(默認(rèn)值)：設(shè)置該屬性為默認(rèn)值，即 static。

6種方式實(shí)現(xiàn)左右固定 100px，中間自適應(yīng)

1. 雙飛翼布局
   布局順序：main + left + right
   實(shí)現(xiàn)：三個(gè)元素均左浮，且 html, body, main 均設(shè)置寬高 100%；left 設(shè)置 margin-left: -100%，使其擠到最左邊展示；right 設(shè)置 margin-left: -100px；main 內(nèi)盒子設(shè)置 margin: 0 100px

2. 圣杯布局
   布局順序：main + left + right
   實(shí)現(xiàn)：三個(gè)元素均左浮，且 html, body 均設(shè)置高度 100%；main 設(shè)置寬高 100%，body 設(shè)置 padding: 0 100px，為左右盒子預(yù)留空間；left 設(shè)置 margin-left: -100%; position: relative; left: -100px; right 設(shè)置 margin-left: -100px; position: relative; right: -100px;

3. 浮動(dòng)布局
   布局順序：left + right + main
   實(shí)現(xiàn)：html, body, main 均設(shè)置寬高 100%；left 左浮，right 右浮，main 設(shè)置 margin: 0 100px

4. position 定位
   布局順序：left + right + main
   實(shí)現(xiàn)：html, body, main 均設(shè)置寬高 100%；left、right 定位，main 設(shè)置 margin: 0 100px

5. flex 布局
   布局順序：div.flex > ( left + main + right )
   實(shí)現(xiàn)：html, body, div.flex 均設(shè)置寬高 100%；div.flex 設(shè)置 display: flex; flex-direction: row; left、right 固定寬度，main 設(shè)置 flex: 1;

6. calc 函數(shù)
   布局順序：left + main + right
   實(shí)現(xiàn)：html, body 均設(shè)置寬高 100%；left 左?。籱ain 左浮，且設(shè)置 width: calc(100% - 200px)；right 右浮

7種方式實(shí)現(xiàn)左側(cè)固定，右側(cè)自適應(yīng)

怎么實(shí)現(xiàn)水平垂直居中

flex布局

1. 2009年，W3C 提出了一種新的方案 —— Flex 布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局。Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為 Flex 布局。設(shè)為 Flex 布局以后，子元素的 float、clear、vertical-align 屬性將失效。

2. 采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為 Flex 項(xiàng)目（flex item），簡(jiǎn)稱"項(xiàng)目"。

3. 容器的屬性

   • flex-direction：決定主軸的方向（即項(xiàng)目的排列方向）。row | row-reverse | column | column-reverse
   • flex-wrap：定義如果一條軸線排不下，如何換行。nowrap | wrap | wrap-reverse
   • flex-flow：flex-direction 屬性和 flex-wrap 屬性的簡(jiǎn)寫形式
   • justify-content：定義了項(xiàng)目在主軸上的對(duì)齊方式。flex-start | flex-end | center | space-between | space-around
   • align-items：定義項(xiàng)目在交叉軸上如何對(duì)齊。flex-start | flex-end | center | baseline | stretch
   • align-content：定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。flex-start | flex-end | center | space-between | space-around | stretch

4. 項(xiàng)目的屬性

   • order：定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
   • flex-grow：定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。
   • flex-shrink：定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。
   • flex-basis：定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。它的默認(rèn)值為 auto，即項(xiàng)目的本來(lái)大小。
   • flex：flex-grow、flex-shrink 和 flex-basis 的簡(jiǎn)寫，默認(rèn)值為 0 1 auto。后兩個(gè)屬性可選。該屬性有三個(gè)快捷值：auto (1 1 auto) 、1（1 1 0%）、 none (0 0 auto)。
   • align-self：允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋 align-items 屬性。默認(rèn)值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。

transform 動(dòng)畫和直接使用 left、top 改變位置有什么優(yōu)缺點(diǎn)

Chrome 渲染主要包括：

1. 構(gòu)建 DOM 樹：渲染進(jìn)程將 HTML 內(nèi)容轉(zhuǎn)換為能夠讀懂的 DOM 樹結(jié)構(gòu)。
2. 樣式計(jì)算（Recalculate Style）：渲染引擎將 CSS 樣式表轉(zhuǎn)化為瀏覽器可以理解的 styleSheets，計(jì)算出 DOM 節(jié)點(diǎn)的樣式。
3. 布局階段：創(chuàng)建布局樹，并計(jì)算元素的布局信息。
4. 分層：對(duì)布局樹進(jìn)行分層，并生成分層樹。為每個(gè)圖層生成繪制列表，并將其提交到合成線程。
5. 圖層繪制：合成線程將圖層分成圖塊，并在光柵化線程池中將圖塊轉(zhuǎn)換成位圖。
6. 柵格化（raster）操作：合成線程發(fā)送繪制圖塊命令 DrawQuad 給瀏覽器進(jìn)程。
7. 合成和顯示：瀏覽器進(jìn)程根據(jù) DrawQuad 消息生成頁(yè)面，并顯示到顯示器上。

transform 屬于合成屬性，對(duì)合成屬性進(jìn)行動(dòng)畫，瀏覽器會(huì)為元素創(chuàng)建一個(gè)獨(dú)立的復(fù)合層，當(dāng)元素內(nèi)容沒有發(fā)生改變，該層就不會(huì)被重繪，瀏覽器會(huì)通過重新復(fù)合來(lái)創(chuàng)建動(dòng)畫幀。

left、top 屬于布局屬性，當(dāng)對(duì)布局屬性進(jìn)行動(dòng)畫時(shí)，該元素的布局改變可能會(huì)影響到其他元素在文檔中的位置，這就導(dǎo)致了所有被影響到的元素都要進(jìn)行重新布局，瀏覽器需要為整個(gè)層進(jìn)行重繪并重新上傳到 GPU，造成了極大的性能開銷。

css var 自定義變量

瀏覽器兼容性

CSS中原生的變量定義語(yǔ)法是：--，變量使用語(yǔ)法是：var(--)，其中 * 表示變量名稱。

p {
    --size: 20;   
    font-size: calc(var(--size) * 1px);//20px
}

CSS的實(shí)現(xiàn)

1. 淘寶購(gòu)物車添加商品到購(gòu)物車的動(dòng)畫——拋物線運(yùn)動(dòng)效果
2. toolTip的實(shí)現(xiàn)

其他面試題

• 偽類和偽元素
• 實(shí)現(xiàn)固定寬高比(width: height = 4: 3)的div，怎么設(shè)置
• CSS 選擇器
• CSS 解析規(guī)則
• flex: 1 完整寫法
• display: none 和 visibility:hidden 的區(qū)別
• em rem vh vw calc() line-height 百分比
• rem 實(shí)現(xiàn)原理及相應(yīng)的計(jì)算方案
• 清除浮動(dòng)方法及原理
• postcss 是什么
• css modules
• CSS 預(yù)處理器
• CSS 中的 vertical-align 有哪些值？它在什么情況下才能生效？
• BFC (塊格式化上下文)
• 常見布局的實(shí)現(xiàn)