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 具有普通容器所沒(méi)有的一些特性膨更。

觸發(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)行定位疯淫。元素的位置通過(guò) top地来、bottom、left熙掺、right 屬性進(jìn)行規(guī)定未斑。

• sticky(粘性定位)：該定位基于用戶滾動(dòng)的位置。主要用在對(duì) scroll 事件的監(jiān)聽(tīng)上币绩，當(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 左浮枷餐；main 左浮靶瘸，且設(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 屬性，如果沒(méi)有父元素椭坚，則等同于 stretch予跌。

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

Chrome 渲染主要包括：

1. 構(gòu)建 DOM 樹(shù)：渲染進(jìn)程將 HTML 內(nèi)容轉(zhuǎn)換為能夠讀懂的 DOM 樹(shù)結(jié)構(gòu)善茎。
2. 樣式計(jì)算（Recalculate Style）：渲染引擎將 CSS 樣式表轉(zhuǎn)化為瀏覽器可以理解的 styleSheets券册，計(jì)算出 DOM 節(jié)點(diǎn)的樣式。
3. 布局階段：創(chuàng)建布局樹(shù)，并計(jì)算元素的布局信息烁焙。
4. 分層：對(duì)布局樹(shù)進(jìn)行分層航邢，并生成分層樹(shù)。為每個(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)容沒(méi)有發(fā)生改變辱匿，該層就不會(huì)被重繪，瀏覽器會(huì)通過(guò)重新復(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划址，造成了極大的性能開(kāi)銷扔嵌。

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 (塊格式化上下文)
• 常見(jiàn)布局的實(shí)現(xiàn)