摘要：前言本文講解道前端面試的的內(nèi)容。文章原文地址前端硬核面試專題之問(wèn)。前端硬核面試專題的完整版在此前端硬核面試專題，包含數(shù)據(jù)結(jié)構(gòu)與算法。

本文講解 55 道前端面試的 CSS 的內(nèi)容。

復(fù)習(xí)前端面試的知識(shí)，是為了鞏固前端的基礎(chǔ)知識(shí)，最重要的還是平時(shí)的積累！

注意：文章的題與題之間用下劃線分隔開(kāi)，答案僅供參考。

筆者技術(shù)博客首發(fā)地址 GitHub，歡迎關(guān)注。

文章原文地址：前端硬核面試專題之 CSS 55 問(wèn) 。

前端硬核面試專題的完整版在此：前端硬核面試專題，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 數(shù)據(jù)結(jié)構(gòu)與算法 + Git 。

盒子模型的理解 ?

標(biāo)準(zhǔn)模式和混雜模式（IE）。

在標(biāo)準(zhǔn)模式下瀏覽器按照規(guī)范呈現(xiàn)頁(yè)面；

在混雜模式下，頁(yè)面以一種比較寬松的向后兼容的方式顯示。

混雜模式通常模擬老式瀏覽器的行為以防止老站點(diǎn)無(wú)法工作。

CSS 盒子模型具有內(nèi)容 (content)、填充 (padding)、邊框 (border)、邊界 (margin)這些屬性。

我們所說(shuō)的 width，height 指的是內(nèi)容 (content) 的寬高。

一個(gè)盒子模型的中：

寬度 = width+ pdding(寬) + border(寬)。

高度 = height + padding(高) + border(高)。

如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域 ？

1、map+area 或者 svg

2、border-radius

3、純 js 實(shí)現(xiàn)，需要求一個(gè)點(diǎn)在不在圓上簡(jiǎn)單算法、獲取鼠標(biāo)坐標(biāo)等等

實(shí)現(xiàn)不使用 border 畫(huà)出 1px 高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果。

CSS 中哪些屬性可以同父元素繼承 ?

繼承：(X)HTML 元素可以從其父元素那里繼承部分 CSS 屬性，即使當(dāng)前元素并沒(méi)有定義該屬性，比如： color，font-size。

box-sizing 常用的屬性有哪些 ？分別有什么作用 ？

常用的屬性：content-box、 border-box 、inherit

作用

content-box(默認(rèn))：寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框(元素默認(rèn)效果)。

border-box：元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

頁(yè)面導(dǎo)入樣式時(shí)，使用 link 和 @import 有什么區(qū)別 ？

link 屬于 XHTML 標(biāo)簽，除了加載 CSS 外，還能用于定義 RSS(是一種描述和同步網(wǎng)站內(nèi)容的格式，是使用最廣泛的 XML 應(yīng)用), 定義 rel 連接屬性等作用；

而 @import 是 CSS 提供的，只能用于加載 CSS;

頁(yè)面被加載的時(shí)，link 會(huì)同時(shí)被加載，而 @import 引用的 CSS 會(huì)等到頁(yè)面被加載完再加載;

import 是 CSS2.1 提出的，只在 IE5 以上才能被識(shí)別，而 link 是 XHTML 標(biāo)簽，無(wú)兼容問(wèn)題。

總之，link 要優(yōu)于 @import。

常見(jiàn)兼容性問(wèn)題？

瀏覽器默認(rèn)的 margin 和 padding 不同。解決方案是加一個(gè)全局的 *{margin: 0; padding: 0;} 來(lái)統(tǒng)一。

IE下 event 對(duì)象有 event.x，event.y 屬性，而 Firefox 下沒(méi)有。Firefox 下有 event.pageX，event.PageY 屬性，而 IE 下沒(méi)有。

解決辦法：var mx = event.x ? event.x : event.pageX;

Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

超鏈接訪問(wèn)過(guò)后 hover 樣式就不出現(xiàn)了，被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有 hover 和 active 了，解決方法是改變 CSS 屬性的排列順序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

清除浮動(dòng)，什么時(shí)候需要清除浮動(dòng)，清除浮動(dòng)都有哪些方法 ？

一個(gè)塊級(jí)元素如果沒(méi)有設(shè)置 height，那么其高度就是由里面的子元素?fù)伍_(kāi)，如果子元素使用浮動(dòng)，脫離了標(biāo)準(zhǔn)的文檔流，那么父元素的高度會(huì)將其忽略，如果不清除浮動(dòng)，父元素會(huì)出現(xiàn)高度不夠，那樣如果設(shè)置 border 或者 background 都得不到正確的解析。

正是因?yàn)楦?dòng)的這種特性，導(dǎo)致本屬于普通流中的元素浮動(dòng)之后，包含框內(nèi)部由于不存在其他普通流元素了，也就表現(xiàn)出高度為 0（高度塌陷）。在實(shí)際布局中，往往這并不是我們所希望的，所以需要閉合浮動(dòng)元素，使其包含框表現(xiàn)出正常的高度。

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

父級(jí) div 定義 height，原理：父級(jí) div 手動(dòng)定義 height，就解決了父級(jí) div 無(wú)法自動(dòng)獲取到高度的問(wèn)題。?

結(jié)尾處加空 div 標(biāo)簽 clear: both，原理：添加一個(gè)空 div，利用 css 提高的 clear: both 清除浮動(dòng)，讓父級(jí) div 能自動(dòng)獲取到高度。

父級(jí) div 定義 overflow: hidden， ?原理：必須定義 width 或 zoom: 1，同時(shí)不能定義 height，使用 overflow: hidden 時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度?

父級(jí) div 也一起浮動(dòng)?。

父級(jí) div 定義 display: table?。

父級(jí) div 定義 偽類 :after 和 zoom?。

結(jié)尾處加 br 標(biāo)簽 clear: both，?原理：父級(jí) div 定義 zoom: 1 來(lái)解決 IE 浮動(dòng)問(wèn)題，結(jié)尾處加 br 標(biāo)簽 clear: both。

總結(jié)：比較好的是倒數(shù)第 2 種方式，簡(jiǎn)潔方便。

如何保持浮層水平垂直居中 ？

一、水平居中?

（1）行內(nèi)元素解決方案

只需要把行內(nèi)元素包裹在一個(gè)屬性 display 為 block 的父層元素中，并且把父層元素添加如下屬性即可。

.parent {
    text-align: center;
}

（2）塊狀元素解決方案
?

.item {
    /* 這里可以設(shè)置頂端外邊距 */
    margin: 10px auto;
}

（3）多個(gè)塊狀元素解決方案將元素的 display 屬性設(shè)置為 inline-block，并且把父元素的 text-align 屬性設(shè)置為 center 即可:

.parent {
    text-align:center;
}

（4）多個(gè)塊狀元素解決方案

使用 flexbox 布局，只需要把待處理的塊狀元素的父元素添加屬性 display: flex 及 justify-content: center 即可。

.parent {
    display: flex;
    justify-content: center;
}

二、垂直居中

（1）單行的行內(nèi)元素解決方案

.parent {
    background: #222;
    height: 200px;
}

/* 以下代碼中，將 a 元素的 height 和 line-height 設(shè)置的和父元素一樣高度即可實(shí)現(xiàn)垂直居中 */
a {
    height: 200px;
    line-height:200px; 
    color: #FFF;
}

（2）多行的行內(nèi)元素解決方案組合

使用 display: table-cell 和 vertical-align: middle 屬性來(lái)定義需要居中的元素的父容器元素生成效果，如下：

.parent {
    background: #222;
    width: 300px;
    height: 300px;
    /* 以下屬性垂直居中 */
    display: table-cell;
    vertical-align: middle;
}

（3）已知高度的塊狀元素解決方案

.item{
    position: absolute;
    top: 50%;
    margin-top: -50px;  /* margin-top值為自身高度的一半 */
    padding:0;
}

三、水平垂直居中

（1）已知高度和寬度的元素解決方案 1

這是一種不常見(jiàn)的居中方法，可自適應(yīng)，比方案 2 更智能，如下：

.item{
    position: absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

（2）已知高度和寬度的元素解決方案 2

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;  /* 設(shè)置margin-left / margin-top 為自身高度的一半 */
    margin-left: -75px;
}

（3）未知高度和寬度元素解決方案

.item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用 css3 的 transform 來(lái)實(shí)現(xiàn) */
}

（4）使用 flex 布局實(shí)現(xiàn)

.parent{
    display: flex;
    justify-content: center;
    align-items: center;
    /* 注意這里需要設(shè)置高度來(lái)查看垂直居中效果 */
    background: #AAA;
    height: 300px;
}

position 、float 和 display 的取值和各自的意思和用法

position

position 屬性取值：static(默認(rèn))、relative、absolute、fixed、inherit、sticky。

postision：static；始終處于文檔流給予的位置。看起來(lái)好像沒(méi)有用，但它可以快速取消定位，讓 top，right，bottom，left 的值失效。在切換的時(shí)候可以嘗試這個(gè)方法。

除了 static 值，在其他三個(gè)值的設(shè)置下，z-index 才會(huì)起作用。確切地說(shuō) z-index 只在定位元素上有效。

position：relative 和 absolute 都可以用于定位，區(qū)別在于前者的 div 還屬于正常的文檔流，后者已經(jīng)是脫離了正常文檔流，不占據(jù)空間位置，不會(huì)將父類撐開(kāi)。

定位原點(diǎn) relative 是相對(duì)于它在正常流中的默認(rèn)位置偏移，它原本占據(jù)的空間任然保留；absolute 相對(duì)于第一個(gè) position 屬性值不為 static 的父類。所以設(shè)置了 position：absolute，其父類的該屬性值要注意，而且 overflow：hidden 也不能亂設(shè)置，因?yàn)椴粚儆谡Ｎ臋n流，不會(huì)占據(jù)父類的高度，也就不會(huì)有滾動(dòng)條。

fixed 舊版本 IE 不支持，卻是很有用，定位原點(diǎn)相對(duì)于瀏覽器窗口，而且不能變。

常用于 header，footer 或者一些固定的懸浮 div，隨滾動(dòng)條滾動(dòng)又穩(wěn)定又流暢，比 JS 好多了。fixed 可以有很多創(chuàng)造性的布局和作用，兼容性是問(wèn)題。

position：inherit。

規(guī)定從父類繼承 position 屬性的值，所以這個(gè)屬性也是有繼承性的，但需要注意的是 IE8 以及往前的版本都不支持 inherit 屬性。

sticky ：設(shè)置了sticky 的元素，在屏幕范圍（viewport）時(shí)該元素的位置并不受到定位影響（設(shè)置是 top、left 等屬性無(wú)效），當(dāng)該元素的位置將要移出偏移范圍時(shí)，定位又會(huì)變成 fixed，根據(jù)設(shè)置的 left、top 等屬性成固定位置的效果。

float

float：left (或 right)，向左（或右）浮動(dòng)，直到它的邊緣碰到包含框或另一個(gè)浮動(dòng)框?yàn)橹埂?/p>

且脫離普通的文檔流，會(huì)被正常文檔流內(nèi)的塊框忽略。不占據(jù)空間，無(wú)法將父類元素?fù)伍_(kāi)。

任何元素都可以浮動(dòng)，浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，不論它本身是何種元素。因此，沒(méi)有必要為浮動(dòng)元素設(shè)置 display：block。

如果浮動(dòng)非替換元素，則要指定一個(gè)明確的 width，否則它們會(huì)盡可能的窄。

什么叫替換元素 ？根據(jù)元素本身的特點(diǎn)定義的，?(X)HTML中的 img、input、textarea、select、object 都是替換元素，這些元素都沒(méi)有實(shí)際的內(nèi)容。?(X)HTML 的大多數(shù)元素是不可替換元素，他們將內(nèi)容直接告訴瀏覽器，將其顯示出來(lái)。

display

display 屬性取值：none、inline、inline-block、block、table 相關(guān)屬性值、inherit。

display 屬性規(guī)定元素應(yīng)該生成的框的類型。文檔內(nèi)任何元素都是框，塊框或行內(nèi)框。

display：none 和 visiability：hidden 都可以隱藏 div，區(qū)別有點(diǎn)像 absolute 和 relative，前者不占據(jù)文檔的空間，后者還是占據(jù)文檔的位置。

display：inline 和 block，又叫行內(nèi)元素和塊級(jí)元素。

表現(xiàn)出來(lái)的區(qū)別就是 block 獨(dú)占一行，在瀏覽器中通常垂直布局，可以用 margin 來(lái)控制塊級(jí)元素之間的間距（存在 margin 合并的問(wèn)題，只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。）；
而 inline 以水平方式布局，垂直方向的 margin 和 padding 都是無(wú)效的，大小跟內(nèi)容一樣，且無(wú)法設(shè)置寬高。
inline 就像塑料袋，內(nèi)容怎么樣，就長(zhǎng)得怎么樣；block 就像盒子，有固定的寬和高。

inline-block 就介于兩者之間。

table 相關(guān)的屬性值可以用來(lái)垂直居中，效果一般。

flex

定位機(jī)制

上面三個(gè)屬性都屬于 CSS 定位屬性。CSS 三種基本的定位機(jī)制：普通流、浮動(dòng)、絕對(duì)定位。

css3 動(dòng)畫(huà)效果屬性有哪些 ?

animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱。。

animation-duration：規(guī)定完成動(dòng)畫(huà)所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。

animation-timing-function：規(guī)定動(dòng)畫(huà)的速度曲線。

animation-delay：規(guī)定在動(dòng)畫(huà)開(kāi)始之前的延遲。

animation-iteration-count：規(guī)定動(dòng)畫(huà)應(yīng)該播放的次數(shù)。

animation-direction：規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫(huà)。

canvas 與 svg 的區(qū)別 ？

Canvas 是基于像素的即時(shí)模式圖形系統(tǒng)，最適合較小的表面或較大數(shù)量的對(duì)象，Canvas 不支持鼠標(biāo)鍵盤(pán)等事件。

SVG 是基于形狀的保留模式圖形系統(tǒng)，更加適合較大的表面或較小數(shù)量的對(duì)象。

Canvas 和 SVG 在修改方式上還存在著不同。繪制 Canvas 對(duì)象后，不能使用腳本和 CSS 對(duì)它進(jìn)行修改。因?yàn)?SVG 對(duì)象是文檔對(duì)象模型的一部分，所以可以隨時(shí)使用腳本和 CSS 修改它們。

現(xiàn)在對(duì)兩種技術(shù)做對(duì)比歸納如下：

Canvas

1) 依賴分辨率
2) 不支持事件處理器
3) 弱的文本渲染能力
4) 能夠以 .png 或 .jpg 格式保存結(jié)果圖像
5) 最適合圖像密集型的游戲，其中的許多對(duì)象會(huì)被頻繁重繪

SVG

1) 不依賴分辨率
2) 支持事件處理器
3) 最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）
4) 復(fù)雜度高會(huì)減慢渲染速度（任何過(guò)度使用 DOM 的應(yīng)用都不快）
5) 不適合游戲應(yīng)用

px 和 em 的區(qū)別 ？

px 像素（Pixel）。相對(duì)長(zhǎng)度單位。像素 px 是相對(duì)于顯示器屏幕分辨率而言的。(引自CSS2.0手冊(cè))

em 是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。(引自CSS2.0手冊(cè))

任意瀏覽器的默認(rèn)字體高都是 16px。所有未經(jīng)調(diào)整的瀏覽器都符合：1em = 16px。

那么12px = 0.75em,10px = 0.625em。為了簡(jiǎn)化 font-size 的換算，需要在 css 中的 body 選擇器中聲明 Font-size = 62.5%，這就使 em 值變?yōu)?16px*62.5% = 10px, 這樣 12px = 1.2em, 10px = 1em, 也就是說(shuō)只需要將你的原來(lái)的 px 數(shù)值除以 10，然后換上 em 作為單位就行了。

會(huì)不會(huì)用 ps 扣圖，png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用。如何優(yōu)化圖像、圖像格式的區(qū)別 ?

JPG 的特性

支持?jǐn)z影圖像或?qū)憣?shí)圖像的高級(jí)壓縮，并且可利用壓縮比例控制圖像文件大小。

有損壓縮會(huì)使圖像數(shù)據(jù)質(zhì)量下降，并且在編輯和重新保存 JPG 格式圖像時(shí)，這種下降損失會(huì)累積。

JPG 不適用于所含顏色很少、具有大塊顏色相近的區(qū)域或亮度差異十分明顯的較簡(jiǎn)單的圖片。

PNG 的特性

能在保證最不失真的情況下盡可能壓縮圖像文件的大小。

PNG 用來(lái)存儲(chǔ)灰度圖像時(shí)，灰度圖像的深度可多到 16 位，存儲(chǔ)彩色圖像時(shí)，彩色圖像的深度可多到 48 位，并且還可存儲(chǔ)多到 16 位的 α 通道數(shù)據(jù)。

對(duì)于需要高保真的較復(fù)雜的圖像，PNG 雖然能無(wú)損壓縮，但圖片文件較大，不適合應(yīng)用在 Web 頁(yè)面上。

另外還有一個(gè)原則就是用于頁(yè)面結(jié)構(gòu)的基本視覺(jué)元素，如容器的背景、按鈕、導(dǎo)航的背景等應(yīng)該盡量用 PNG 格式進(jìn)行存儲(chǔ)，這樣才能更好的保證設(shè)計(jì)品質(zhì)。而其他一些內(nèi)容元素，如廣告 Banner、商品圖片 等對(duì)質(zhì)量要求不是特別苛刻的，則可以用 JPG 去進(jìn)行存儲(chǔ)從而降低文件大小。

GIF格式特點(diǎn)
?

透明性:?Gif 是一種布爾透明類型，既它可以是全透明，也可以是全不透明，但是它并沒(méi)有半透明（alpha 透明）。?

動(dòng)畫(huà)：Gif 這種格式支持動(dòng)畫(huà)。?

無(wú)損耗性：Gif 是一種無(wú)損耗的圖像格式，這也意味著你可以對(duì) gif 圖片做任何操作也不會(huì)使得圖像質(zhì)量產(chǎn)生損耗。?

水平掃描：Gif 是使用了一種叫作 LZW 的算法進(jìn)行壓縮的，當(dāng)壓縮 gif 的過(guò)程中，像素是由上到下水平壓縮的，這也意味著同等條件下，橫向的 gif 圖片比豎向的 gif 圖片更加小。

例如 50010 的圖片比 10500 的圖片更加小。
間隔漸進(jìn)顯示：Gif 支持可選擇性的間隔漸進(jìn)顯示?

由以上特點(diǎn)看出只有 256 種顏色的 gif 圖片不適合作為照片，它適合做對(duì)顏色要求不高的圖形。

我們知道可以以外鏈的方式引入 CSS 文件，請(qǐng)談?wù)勍怄溡?CSS 有哪些方式，這些方式的性能有區(qū)別嗎 ？

CSS 的引入方式最常用的有三種

第一：外鏈?zhǔn)?/p>

這種方法可以說(shuō)是現(xiàn)在占統(tǒng)治地位的引入方法。

如同 IE 與瀏覽器。這也是最能體現(xiàn) CSS 特點(diǎn)的方法；

最能體現(xiàn) DIV + CSS 中的內(nèi)容離的思想，也最易改版維護(hù)，代碼看起來(lái)也是最美觀的一種。

第二：內(nèi)部樣式表

這種方法的使用情況要少的多，最長(zhǎng)見(jiàn)得就是訪問(wèn)量大的門(mén)戶網(wǎng)站?；蛘咴L問(wèn)量較大的企業(yè)網(wǎng)站的首頁(yè)。

與第一種方法比起來(lái)，優(yōu)弊端也明顯。

優(yōu)點(diǎn)：速度快，所有的 CSS 控制都是針對(duì)本頁(yè)面標(biāo)簽的，沒(méi)有多余的 CSS 命令；再者不用外鏈 CSS 文件。直接在文檔中讀取樣式。

缺點(diǎn)：就是改版麻煩些，單個(gè)頁(yè)面顯得臃腫，CSS 不能被其他 HTML 引用造成代碼量相對(duì)較多，維護(hù)也麻煩些采用這種方法的公司大多有錢，對(duì)他們來(lái)說(shuō)用戶量是關(guān)鍵，他們不缺人進(jìn)行復(fù)雜的維護(hù)工作。

第三：行內(nèi)樣式

認(rèn)為 HTML 里不能出現(xiàn) CSS 命令。其實(shí)有時(shí)候沒(méi)有什么大不了。比如通用性差，效果特殊，使用 CSS 命令較少，并且不常改動(dòng)的地方，使用這種方法反而是很好的選擇。

第四、@import 引入方式

CSS Sprite 是什么，談?wù)勥@個(gè)技術(shù)的優(yōu)缺點(diǎn)。

加速的關(guān)鍵，不是降低重量，而是減少個(gè)數(shù)。傳統(tǒng)切圖講究精細(xì)，圖片規(guī)格越小越好，重量越小越好，其實(shí)規(guī)格大小無(wú)計(jì)算機(jī)統(tǒng)一都按 byte 計(jì)算?？蛻舳嗣匡@示一張圖片都會(huì)向服務(wù)器發(fā)送請(qǐng)求。所以，圖片越多請(qǐng)求次數(shù)越多，造成延遲的可越大。

利用 CSS Sprites 能很好地減少了網(wǎng)頁(yè)的 http 請(qǐng)求，從而大大的提高了頁(yè)面的性能，這也是 CSS Sprites 的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因；

CSS Sprites 能減少圖片的字節(jié)，曾經(jīng)比較過(guò)多次 3 張圖片合并成 1 張圖片的字節(jié)總是小于這 3 張圖片的和。

解決了網(wǎng)頁(yè)設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片上命名就可以了，不需要對(duì)每一個(gè)小元素名，從而提高了網(wǎng)頁(yè)的制作效率。

更換風(fēng)格方便，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁(yè)的風(fēng)格就可以改變。維護(hù)起方便。

誠(chéng)然 CSS Sprites 是如此的強(qiáng)大，但是也存在一些不可忽視的缺點(diǎn)，如下：

在圖片合并的時(shí)候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)不不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁(yè)面，你的圖片如果不夠?qū)?，很容背景斷裂?/p>

CSS Sprites 在開(kāi)發(fā)的時(shí)候比較麻煩，你要通過(guò) photoshop 或其他工具測(cè)量計(jì)算每一個(gè)背景單元的精確位是針線活，沒(méi)什么難度，但是很繁瑣；幸好騰訊的鬼哥用 RIA 開(kāi)發(fā)了一個(gè) CSS Sprites 樣式生成工具，雖然些使用上的不靈活，但是已經(jīng)比 photoshop 測(cè)量來(lái)的方便多了，而且樣式直接生成，復(fù)制，拷貝就 OK！

CSS Sprites 在維護(hù)的時(shí)候比較麻煩，如果頁(yè)面背景有少許改動(dòng)，一般就要改這張合并的圖片，無(wú)需改的好不要?jiǎng)?，這樣避免改動(dòng)更多的 css，如果在原來(lái)的地方放不下，又只能（最好）往下加圖片，這樣圖片的字加了，還要改動(dòng) css。

CSS Sprites 非常值得學(xué)習(xí)和應(yīng)用，特別是頁(yè)面有一堆 ico（圖標(biāo)）?？傊芏鄷r(shí)候大家要權(quán)衡一下再?zèng)Q定是不是應(yīng)用 CSS Sprites。

以 CSS3 標(biāo)準(zhǔn)定義一個(gè) webkit 內(nèi)核瀏覽器識(shí)別的圓角（尺寸隨意）

-moz-border-radius: 10px; 
-webkit-border-radius: 10px;
 border-radius: 10px;。

優(yōu)先級(jí)算法如何計(jì)算？?jī)?nèi)聯(lián)和 important 哪個(gè)優(yōu)先級(jí)高 ？

優(yōu)先級(jí)就近原則，樣式定義最近者為準(zhǔn)

載入樣式以最后載入的定位為準(zhǔn)

優(yōu)先級(jí)為 !important > [ id > class > tag ]

Important 比內(nèi)聯(lián)優(yōu)先級(jí)高

css 的基本語(yǔ)句構(gòu)成是 ？

回答：選擇器、屬性和屬性值。

如果讓你來(lái)制作一個(gè)訪問(wèn)量很高的大型網(wǎng)站，你會(huì)如何來(lái)管理所有 CSS 文件、JS 與圖片？

回答：涉及到人手、分工、同步；

先期團(tuán)隊(duì)必須確定好全局樣式（globe.css），編碼模式 (utf-8) 等

編寫(xiě)習(xí)慣必須一致（例如都是采用繼承式的寫(xiě)法，單樣式都寫(xiě)成一行）；

標(biāo)注樣式編寫(xiě)人，各模塊都及時(shí)標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）；

頁(yè)面進(jìn)行標(biāo)注（例如頁(yè)面模塊開(kāi)始和結(jié)束）；

CSS 跟 HTML 分文件夾并行存放，命名都得統(tǒng)一（例如 style.css）

JS 分文件夾存放，命名以該 JS 功能為準(zhǔn)

圖片采用整合的 png8 格式文件使用，盡量整合在一起使用，方便將來(lái)的管理。

CSS 選擇符有哪些 ？哪些屬性可以繼承 ？?jī)?yōu)先級(jí)算法如何計(jì)算 ？新增偽類有那些 ？

CSS 選擇符

id 選擇器（ #myid）

類選擇器（.myclassname）

標(biāo)簽選擇器（div, h1, p）

相鄰選擇器（h1 + p）

子選擇器（ul > li）

后代選擇器（li a）

通配符選擇器（ * ）

屬性選擇器（a[rel = "external"]）

偽類選擇器（a: hover, li: nth - child）

可繼承的樣式

font-size，font-family，color，ul，li，dl，dd，dt；

不可繼承的樣式

border padding margin width height
事實(shí)上，寬度也不是繼承的，而是如果你不指定寬度，那么它就是 100%。由于你子 DIV 并沒(méi)有指定寬度，那它就是 100%，也就是與父 DIV 同寬，但這與繼承無(wú)關(guān)，高度自然也沒(méi)有繼承一說(shuō)。

優(yōu)先級(jí)算法

優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);

載入樣式以最后載入的定位為準(zhǔn);

優(yōu)先級(jí)為: !important > id > class > tag , important 比 內(nèi)聯(lián)優(yōu)先級(jí)高

CSS3 新增偽類舉例

:root 選擇文檔的根元素，等同于 html 元素

:empty 選擇沒(méi)有子元素的元素

:target 選取當(dāng)前活動(dòng)的目標(biāo)元素

:not(selector) 選擇除 selector 元素意外的元素

:enabled 選擇可用的表單元素

:disabled 選擇禁用的表單元素

:checked 選擇被選中的表單元素

:after 選擇器在被選元素的內(nèi)容后面插入內(nèi)容

:before 選擇器在被選元素的內(nèi)容前面插入內(nèi)容

:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第 n

:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第 n，從后向前數(shù)

:nth-child(odd) 奇數(shù)

:nth-child(even) 偶數(shù)

:nth-child(3n+1)

:first-child

:last-child

:only-child

:nth-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第 n

:nth-last-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第 n，從后向前數(shù)

:nth-of-type(odd)

:nth-of-type(even)

:nth-of-type(3n+1)

:first-of-type

:last-of-type

:only-of-type

::selection 選擇被用戶選取的元素部分

:first-line 選擇元素中的第一行

:first-letter 選擇元素中的第一個(gè)字符

CSS3 有哪些新特性 ?

CSS3 實(shí)現(xiàn)圓角（border-radius:8px）

陰影（box-shadow:10px）

對(duì)文字加特效（text-shadow）

線性漸變（gradient）

旋轉(zhuǎn)、縮放、定位、傾斜

 transform: rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg); 

增加了更多的 CSS 選擇器

多背景 rgba

一個(gè)滿屏 品字布局 如何設(shè)計(jì) ？

第一種方式

效果如下：?

為什么要初始化 CSS 樣式 ?

因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)對(duì) CSS 初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異。
初始化樣式會(huì)對(duì) SEO 有一定的影響，但魚(yú)和熊掌不可兼得，但力求影響最小的情況下初始化。

初始化 CSS 樣式例子

html,
body {
  padding: 0; 
  margin: 0;
} 
...

collapse、overflow、float 這些特性相互疊加后會(huì)怎么樣？

margin collapse 我覺(jué)得這里的意思應(yīng)該是 Collapsing margins，即外邊距折疊，指的是毗鄰的兩個(gè)或多個(gè)外邊距 (margin) 會(huì)合并成一個(gè)外邊距。

其中所說(shuō)的 margin 毗鄰，可以歸結(jié)為以下兩點(diǎn)：

這兩個(gè)或多個(gè)外邊距沒(méi)有被非空內(nèi)容、padding、border 或 clear 分隔開(kāi)。

這些 margin 都處于普通流中。

兩個(gè)或多個(gè)毗鄰的普通流中的塊元素垂直方向上的 margin 會(huì)折疊。

浮動(dòng)元素、inline-block 元素、絕對(duì)定位元素的 margin 不會(huì)和垂直方向上其他元素的 margin 折疊.

創(chuàng)建了塊級(jí)格式化上下文的元素，不和它的子元素發(fā)生 margin 折疊

請(qǐng)解釋一下CSS3 的 Flexbox（彈性盒布局模型），以及適用場(chǎng)景 ？

http://www.ruanyifeng.com/blo...

任何一個(gè)容器都可以指定為 Flex 布局，行內(nèi)元素也可以使用 Flex 布局。

注意：設(shè)為 Flex 布局以后，子元素的 float、clear 和 vertical-align 屬性將失效。

flex 布局最常用的是什么場(chǎng)景 ？

一般實(shí)現(xiàn)垂直居中是一件很麻煩的事，但 flex 布局輕松解決。

.demo {
  display: flex; ? ? ? ? ? ?
  justify-content: center; ? ? ? ? ? ? ? ? ? ?
  align-items: center;
}

用純 CSS 創(chuàng)建一個(gè)三角形的原理是什么？

把上、左、右三條邊隱藏掉（顏色設(shè)為 transparent）

#demo {
?width: 0;
?height: 0;
?border-width: 20px;
?border-style: solid;
?border-color: transparent transparent red transparent;
}

absolute 的 containing block(容器塊) 計(jì)算方式跟正常流有什么不同 ？

無(wú)論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：

若此元素為 inline 元素，則 containing block 為能夠包含這個(gè)元素生成的第一個(gè)和最后一個(gè) inline box 的 padding box (除 margin，border 外的區(qū)域) 的最小矩形；

否則，則由這個(gè)祖先元素的 padding box 構(gòu)成。

如果都找不到，則為 initial containing block。

補(bǔ)充：

static / relative：簡(jiǎn)單說(shuō)就是它的父元素的內(nèi)容框（即去掉 padding 的部分）

absolute: 向上找最近的定位為 absolute / relative 的元素

fixed: 它的 containing block 一律為根元素(html / body)，根元素也是 initial containing block

對(duì) BFC 規(guī)范(塊級(jí)格式化上下文：blockformatting context)的理解 ？

W3C CSS 2.1 規(guī)范中的一個(gè)概念，它是一個(gè)獨(dú)立容器，決定了元素如何對(duì)其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。

一個(gè)頁(yè)面是由很多個(gè) Box 組成的，元素的類型和 display 屬性，決定了這個(gè) Box 的類型。

不同類型的 Box，會(huì)參與不同的 Formatting Context（決定如何渲染文檔的容器），因此 Box 內(nèi)的元素會(huì)以不同的方式渲染，也就是說(shuō) BFC 內(nèi)部的元素和外部的元素不會(huì)互相影響。

用 position: absolute 跟用 float 有什么區(qū)別嗎 ？

都是脫離標(biāo)準(zhǔn)流，只是 position: absolute 定位用的時(shí)候，位置可以給的更精確(想放哪就放哪)，而 float 用的更簡(jiǎn)潔，向右，左，兩個(gè)方向浮動(dòng)，用起來(lái)就一句代碼。

還有就是 position: absolute 不管在哪個(gè)標(biāo)簽里，都可以定位到任意位置，畢竟 top，left，bottom，right 都可以給正值或負(fù)值；

float 只是向左或向右浮動(dòng)，不如 position: absolute 靈活，浮動(dòng)后再想改變位置就要加各種 margin，padding 之類的通過(guò)間距的改變來(lái)改變位置，我自身覺(jué)得這樣的話用起來(lái)不方便，也不太好。

但在菜單欄，或者一些圖標(biāo)的橫向排列時(shí)，用起來(lái)特別方便，一個(gè) float 就解決了，而且每個(gè)元素之間不會(huì)有任何間距(所以可以用 float 消除元素間的距離)；

svg 與 convas 的區(qū)別 ？

svg 繪制出來(lái)的每一個(gè)圖形的元素都是獨(dú)立的 DOM 節(jié)點(diǎn)，能夠方便的綁定事件或用來(lái)修改，而 canvas 輸出的是一整幅畫(huà)布；

svg 輸出的圖形是矢量圖形，后期可以修改參數(shù)來(lái)自由放大縮小，不會(huì)是真和鋸齒。而 canvas 輸出標(biāo)量畫(huà)布，就像一張圖片一樣，放大會(huì)失真或者鋸齒。

何時(shí)應(yīng)當(dāng)時(shí)用 padding 和 margin ？

何時(shí)應(yīng)當(dāng)使用 margin

需要在 border 外側(cè)添加空白時(shí)。

空白處不需要背景（色）時(shí)。

上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。

如 15px + 20px 的 margin，將得到 20px 的空白。

何時(shí)應(yīng)當(dāng)時(shí)用 padding

需要在 border 內(nèi)測(cè)添加空白時(shí)。

空白處需要背景（色）時(shí)。

上下相連的兩個(gè)盒子之間的空白，希望等于兩者之和時(shí)。

如 15px + 20px 的 padding，將得到 35px 的空白。

個(gè)人認(rèn)為：margin 是用來(lái)隔開(kāi)元素與元素的間距；padding 是用來(lái)隔開(kāi)元素與內(nèi)容的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段 呼吸距離。

文字在超出長(zhǎng)度時(shí)，如何實(shí)現(xiàn)用省略號(hào)代替 ? 超長(zhǎng)長(zhǎng)度的文字在省略顯示后，如何在鼠標(biāo)懸停時(shí)，以懸浮框的形式顯示出全部信息 ?

注意：設(shè)置 width，overflow: hidden, white-space: nowrap (規(guī)定段落中的文本不進(jìn)行換行), text-overflow: ellipsis，四個(gè)屬性缺一不可。這種寫(xiě)法在所有的瀏覽器中都能正常顯示。

CSS 里的 visibility 屬性有個(gè) collapse 屬性值 ？在不同瀏覽器下有什么區(qū)別 ？

Collapse

當(dāng)在表格元素中使用時(shí)，此值可刪除一行或一列，但是它不會(huì)影響表格的布局，被行或列占據(jù)的空間會(huì)留給其他內(nèi)容使用。

如果此值被用在其他的元素上，會(huì)呈現(xiàn)為 hidden。

當(dāng)一個(gè)元素的 visibility 屬性被設(shè)置成 collapse 值后，對(duì)于一般的元素，它的表現(xiàn)跟 hidden 是一樣的。

chrome中，使用 collapse 值和使用 hidden 沒(méi)有區(qū)別。

firefox，opera 和 IE，使用 collapse 值和使用 display：none 沒(méi)有什么區(qū)別。

position 跟 display、overflow、float 這些特性相互疊加后會(huì)怎么樣 ？

display 屬性規(guī)定元素應(yīng)該生成的框的類型；

position 屬性規(guī)定元素的定位類型；

float 屬性是一種布局方式，定義元素在哪個(gè)方向浮動(dòng)。

類似于優(yōu)先級(jí)機(jī)制：position：absolute / fixed 優(yōu)先級(jí)最高，有他們?cè)跁r(shí)，float 不起作用，display 值需要調(diào)整。float 或者 absolute 定位的元素，只能是塊元素或表格。

對(duì) BFC 規(guī)范(塊級(jí)格式化上下文：block formatting context) 的理解 ？

BFC 規(guī)定了內(nèi)部的 Block Box 如何布局。

定位方案：

內(nèi)部的 Box 會(huì)在垂直方向上一個(gè)接一個(gè)放置。

Box 垂直方向的距離由 margin 決定，屬于同一個(gè) BFC 的兩個(gè)相鄰 Box 的 margin 會(huì)發(fā)生重疊。

每個(gè)元素的 margin box 的左邊，與包含塊 border box 的左邊相接觸。

BFC 的區(qū)域不會(huì)與 float box 重疊。

BFC 是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。

計(jì)算 BFC 的高度時(shí)，浮動(dòng)元素也會(huì)參與計(jì)算。

滿足下列條件之一就可觸發(fā) BFC：

1、根元素，即 html

2、float 的值不為 none（默認(rèn)）

3、overflow 的值不為 visible（默認(rèn)）

4、display 的值為 inline-block、table-cell、table-caption

5、position 的值為 absolute 或 fixed

瀏覽器是怎樣解析 CSS 選擇器的 ？

CSS 選擇器的解析是從右向左解析的。

若從左向右的匹配，發(fā)現(xiàn)不符合規(guī)則，需要進(jìn)行回溯，會(huì)損失很多性能。

若從右向左匹配，先找到所有的最右節(jié)點(diǎn)，對(duì)于每一個(gè)節(jié)點(diǎn)，向上尋找其父節(jié)點(diǎn)直到找到根元素或滿足條件的匹配規(guī)則，則結(jié)束這個(gè)分支的遍歷。

兩種匹配規(guī)則的性能差別很大，是因?yàn)閺挠蚁蜃蟮钠ヅ湓诘谝徊骄秃Y選掉了大量的不符合條件的最右節(jié)點(diǎn)（葉子節(jié)點(diǎn)），而從左向右的匹配規(guī)則的性能都浪費(fèi)在了失敗的查找上面。

而在 CSS 解析完畢后，需要將解析的結(jié)果與 DOM Tree 的內(nèi)容一起進(jìn)行分析建立一棵 Render Tree，最終用來(lái)進(jìn)行繪圖。

在建立 Render Tree 時(shí)（WebKit 中的「Attachment」過(guò)程），瀏覽器就要為每個(gè) DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果（Style Rules）來(lái)確定生成怎樣的 Render Tree。

元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎 ？

當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí)，它是相對(duì)于父容器的寬度計(jì)算的。

全屏滾動(dòng)的原理是什么 ？用到了 CSS 的哪些屬性 ？

原理

有點(diǎn)類似于輪播，整體的元素一直排列下去，假設(shè)有 5 個(gè)需要展示的全屏頁(yè)面，那么高度是 500%，只是展示 100%，剩下的可以通過(guò) transform 進(jìn)行 y 軸定位，也可以通過(guò)
margin-top 實(shí)現(xiàn)。

overflow：hidden；transition：all 1000ms ease；

什么是響應(yīng)式設(shè)計(jì) ？響應(yīng)式設(shè)計(jì)的基本原理是什么 ？如何兼容低版本的 IE ？

響應(yīng)式網(wǎng)站設(shè)計(jì)( Responsive Web design ) 是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每一個(gè)終端做一個(gè)特定的版本。

基本原理是通過(guò)媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理。

頁(yè)面頭部必須有 meta 聲明的 viewport。

視差滾動(dòng)效果 ？

視差滾動(dòng)（Parallax Scrolling）通過(guò)在網(wǎng)頁(yè)向下滾動(dòng)的時(shí)候，控制背景的移動(dòng)速度比前景的移動(dòng)速度慢 來(lái)創(chuàng)建出令人驚嘆的 3D 效果。

CSS3 實(shí)現(xiàn)。

優(yōu)點(diǎn)：開(kāi)發(fā)時(shí)間短、性能和開(kāi)發(fā)效率比較好，缺點(diǎn)是不能兼容到低版本的瀏覽器

jQuery 實(shí)現(xiàn)。

通過(guò)控制不同層滾動(dòng)速度，計(jì)算每一層的時(shí)間，控制滾動(dòng)效果。優(yōu)點(diǎn)：能兼容到各個(gè)版本的，效果可控性好。缺點(diǎn)：開(kāi)發(fā)起來(lái)對(duì)制作者要求高。

插件實(shí)現(xiàn)方式。

例如：parallax-scrolling，兼容性十分好。

::before 和 :after 中雙冒號(hào)和單冒號(hào)有什么區(qū)別 ？解釋一下這 2 個(gè)偽元素的作用

單冒號(hào) (:) 用于 CSS3 偽類，雙冒號(hào) (::) 用于 CSS3 偽元素。

::before 就是以一個(gè)子元素的存在，定義在元素主體內(nèi)容之前的一個(gè)偽元素。并不存在于 dom 之中，只存在在頁(yè)面之中。

:before 和 :after 這兩個(gè)偽元素，是在 CSS2.1 里新出現(xiàn)的。
起初，偽元素的前綴使用的是單冒號(hào)語(yǔ)法，但隨著 Web 的進(jìn)化，在 CSS3 的規(guī)范里，偽元素的語(yǔ)法被修改成使用雙冒號(hào)，成為 ::before、 ::after 。

怎么讓 Chrome 支持小于 12px 的文字 ？

p {
  font-size: 10px;
  -webkit-transform: scale(0.8);  // 0.8 是縮放比例
}?

讓頁(yè)面里的字體變清晰，變細(xì)用 CSS 怎么做 ？

-webkit-font-smoothing 在 window 系統(tǒng)下沒(méi)有起作用，但是在 IOS 設(shè)備上起作用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。

如果需要手動(dòng)寫(xiě)動(dòng)畫(huà)，你認(rèn)為最小時(shí)間間隔是多久，為什么 ？

多數(shù)顯示器默認(rèn)頻率是 60Hz，即 1 秒刷新 60 次，所以理論上最小間隔為：1/60＊1000ms ＝ 16.7ms。

有一個(gè)高度自適應(yīng)的 div，里面有兩個(gè) div，一個(gè)高度 100px，如何讓另一個(gè)填滿剩下的高度 ？

外層 div 使用 position：relative；

高度要求自適應(yīng)的 div 使用 position: absolute; top: 100px; bottom: 0; left: 0

png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用。有沒(méi)有了解過(guò)webp ？

png 是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）是一種無(wú)損數(shù)據(jù)壓縮位圖文件格式。

優(yōu)點(diǎn)是：壓縮比高，色彩好。 大多數(shù)地方都可以用。

jpg 是一種針對(duì)相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調(diào)及顏色平滑變化做的不錯(cuò)。在 www 上，被用來(lái)儲(chǔ)存和傳輸照片的格式。

gif 是一種位圖文件格式，以 8 位色重現(xiàn)真色彩的圖像?？梢詫?shí)現(xiàn)動(dòng)畫(huà)效果。

webp 格式是谷歌在 2010 年推出的圖片格式，壓縮率只有 jpg 的 2/3，大小比 png 小了 45%。缺點(diǎn)是壓縮的時(shí)間更久了，兼容性不好，目前谷歌和 opera 支持。

style 標(biāo)簽寫(xiě)在 body 后與 body 前有什么區(qū)別？

頁(yè)面加載自上而下，當(dāng)然是先加載樣式。

寫(xiě)在 body 標(biāo)簽后，由于瀏覽器以逐行方式對(duì) HTML 文檔進(jìn)行解析，當(dāng)解析到寫(xiě)在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在 windows 的 IE 下可能會(huì)出現(xiàn) FOUC 現(xiàn)象（即樣式失效導(dǎo)致的頁(yè)面閃爍問(wèn)題）

闡述一下CSS Sprites

將一個(gè)頁(yè)面涉及到的所有圖片都包含到一張大圖中去，然后利用 CSS 的 background-image，background-repeat，background-position 的組合進(jìn)行背景定位。

利用 CSS Sprites 能很好地減少網(wǎng)頁(yè)的 http 請(qǐng)求，從而大大的提高頁(yè)面的性能；
CSS Sprites 能減少圖片的字節(jié)。

用 css 實(shí)現(xiàn)左側(cè)寬度自適應(yīng)，右側(cè)固定寬度 ？

1、標(biāo)準(zhǔn)瀏覽器的方法

當(dāng)然，以不折騰人為標(biāo)準(zhǔn)的 w3c 標(biāo)準(zhǔn)早就為我們提供了制作這種自適應(yīng)寬度的標(biāo)準(zhǔn)方法。

把 container 設(shè)為 display: table 并指定寬度 100%；

然后把 main + sidebar 設(shè)為 display: table-cell;

然后只給 sidebar 指定一個(gè)寬度，那么 main 的寬度就變成自適應(yīng)了。

代碼很少，而且不會(huì)有額外標(biāo)簽。不過(guò)這是 IE7 及以下都無(wú)效的方法。

.container {
    display: table;
    width: 100%;
}
.main {
    display: table-cell;
}
.sidebar {
    display: table-cell;
    width: 300px;
}

2、固定區(qū)域浮動(dòng)，自適應(yīng)區(qū)域不設(shè)置寬度但設(shè)置 margin

.container {
    overflow: hidden;
    *zoom: 1;
}
.sidebar {
    float: right;
    width: 300px;
    background: #333;
}
.main {
    margin-right: 320px;
    background: #666;
}
.footer {
    margin-top: 20px;
    background: #ccc;
}

其中，sidebar 讓它浮動(dòng)，并設(shè)置了一個(gè)寬度；而 main 沒(méi)有設(shè)置寬度。

大家要注意 html 中必須使用 div 標(biāo)簽，不要妄圖使用什么 p 標(biāo)簽來(lái)達(dá)到目的。因?yàn)?div 有個(gè)默認(rèn)屬性，即如果不設(shè)置寬度，那它會(huì)自動(dòng)填滿它的父標(biāo)簽的寬度。這里的 main 就是例子。

當(dāng)然我們不能讓它填滿了，填滿了它就不能和 sidebar 保持同一行了。我們給它設(shè)置一個(gè) margin。由于 sidebar 在右邊，所以我們?cè)O(shè)置 main 的 margin-right 值，值比 sidebar 的寬度大一點(diǎn)點(diǎn)——以便區(qū)分它們的范圍，例子中是 320。

假設(shè) main 的默認(rèn)寬度是 100%，那么它設(shè)置了 margin 后，它的寬度就變成了 100% - 320，此時(shí) main 發(fā)現(xiàn)自己的寬度可以與 sidebar 擠在同一行了，于是它就上來(lái)了。
而寬度 100% 是相對(duì)于它的父標(biāo)簽來(lái)的，如果我們改變了它父標(biāo)簽的寬度，那 main 的寬度也就會(huì)變——比如我們把瀏覽器窗口縮小，那 container 的寬度就會(huì)變小，而 main 的寬度也就變小，但它的實(shí)際寬度 100% - 320 始終是不會(huì)變的。

這個(gè)方法看起來(lái)很完美，只要我們記得清除浮動(dòng)(這里我用了最簡(jiǎn)單的方法)，那 footer 也不會(huì)錯(cuò)位。而且無(wú)論 main 和 sidebar 誰(shuí)更長(zhǎng)，都不會(huì)對(duì)布局造成影響。

但實(shí)際上這個(gè)方法有個(gè)很老火的限制——html 中 sidebar 必須在 main 之前！
但我需要 sidebar 在 main 之后！因?yàn)槲业?main 里面才是網(wǎng)頁(yè)的主要內(nèi)容，我不想主要內(nèi)容反而排在次要內(nèi)容后面。
但如果 sidebar 在 main 之后，那上面的一切都會(huì)化為泡影。

3、固定區(qū)域使用定位，自適應(yīng)區(qū)域不設(shè)置寬度，但設(shè)置 margin

.container {
    position: relative;
}
.sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    background: #333;
}
.main {
    margin-right: 320px;
    background: #666;
}

咦，好像不對(duì)，footer 怎么還是在那兒呢？怎么沒(méi)有自動(dòng)往下走呢？footer 說(shuō)——我不給絕對(duì)主義者讓位！
其實(shí)這與 footer 無(wú)關(guān)，而是因?yàn)?container 對(duì) sidebar 的無(wú)視造成的——你再長(zhǎng)，我還是沒(méi)感覺(jué)。
看來(lái)這種定位方式只能滿足 sidebar 自己，但對(duì)它的兄弟們卻毫無(wú)益處。

4、左邊浮動(dòng)，右邊 overflow: hidden;

*{ margin:0; padding: 0; }
html,body{
   height: 100%;/*高度百分百顯示*/
}
#left {
    width: 300px;
    height: 100%;
    background-color: #ccc;
    float: left;
}
#right {
    height: 100%;
    overflow: hidden;
    background-color: #eee;
}

第二種方法，我利用的是創(chuàng)建一個(gè)新的 BFC（塊級(jí)格式化上下文）來(lái)防止文字環(huán)繞的原理來(lái)實(shí)現(xiàn)的。

BFC 就是一個(gè)相對(duì)獨(dú)立的布局環(huán)境，它內(nèi)部元素的布局不受外面布局的影響。
它可以通過(guò)以下任何一種方式來(lái)創(chuàng)建：?

float 的值不為 none?

position 的值不為 static 或者 relative?

display 的值為 table-cell , table-caption , inline-block , flex , 或者 inline-flex 中的其中一個(gè)?overflow 的值不為?visible

關(guān)于 BFC，在 w3c 里是這樣描述的：在 BFC 中，每個(gè)盒子的左外邊框緊挨著 包含塊 的 左邊框 （從右到左的格式化時(shí)，則為右邊框緊挨）。
即使在浮動(dòng)里也是這樣的（盡管一個(gè)包含塊的邊框會(huì)因?yàn)楦?dòng)而萎縮），除非這個(gè)包含塊的內(nèi)部創(chuàng)建了一個(gè)新的 BFC。
這樣，當(dāng)我們給右側(cè)的元素多帶帶創(chuàng)建一個(gè) BFC 時(shí)，它將不會(huì)緊貼在包含塊的左邊框，而是緊貼在左元素的右邊框。

問(wèn)：浮動(dòng)的原理和工作方式，會(huì)產(chǎn)生什么影響呢，要怎么處理 ？

工作方式：浮動(dòng)元素脫離文檔流，不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留。

影響

浮動(dòng)會(huì)導(dǎo)致父元素?zé)o法被撐開(kāi)，影響與父元素同級(jí)的元素。

與該浮動(dòng)元素同級(jí)的非浮動(dòng)元素，如果是塊級(jí)元素，會(huì)移動(dòng)到該元素下方，而塊級(jí)元素內(nèi)部的行內(nèi)元素會(huì)環(huán)繞浮動(dòng)元素；而如果是內(nèi)聯(lián)元素則會(huì)環(huán)繞該浮動(dòng)元素。

與該元素同級(jí)的浮動(dòng)元素，對(duì)于同一方向的浮動(dòng)元素(同級(jí))，兩個(gè)元素將會(huì)跟在碰到的浮動(dòng)元素后面；而對(duì)于不同方向的浮動(dòng)元素，在寬度足夠時(shí)，將分別浮動(dòng)向不同方向，在寬度不同是將導(dǎo)致一方換行(換行與 HTML 書(shū)寫(xiě)順序有關(guān)，后邊的將會(huì)浮動(dòng)到下一行)。

浮動(dòng)元素將被視作為塊元素。

而浮動(dòng)元素對(duì)于其父元素之外的元素，如果是非浮動(dòng)元素，則相當(dāng)于忽視該浮動(dòng)元素，如果是浮動(dòng)元素，則相當(dāng)于同級(jí)的浮動(dòng)元素。

而常用的清除浮動(dòng)的方法，則如使用空標(biāo)簽，overflow，偽元素等。

在使用基于浮動(dòng)設(shè)計(jì)的 CSS 框架時(shí)，自會(huì)提供清除的方法，個(gè)人并不習(xí)慣使用浮動(dòng)進(jìn)行布局。

對(duì) CSS Grid 布局的使用

5 分鐘學(xué)會(huì) CSS Grid 布局

rem、em、px、vh 與 vw 的區(qū)別 ？

一、 rem 的特點(diǎn)

rem 的大小是根據(jù) html 根目錄下的字體大小進(jìn)行計(jì)算的。

當(dāng)我們改變根目錄下的字體大小的時(shí)候，下面字體都改變。

rem 不僅可以設(shè)置字體的大小，也可以設(shè)置元素寬、高等屬性。

rem 是 CSS3 新增的一個(gè)相對(duì)單位（root em，根em），這個(gè)單位與 em 區(qū)別在于使用 rem 為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是 HTML 根元素。

這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。
目前，除了 IE8 及更早版本外，所有瀏覽器均已支持 rem。
對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫(xiě)一個(gè)絕對(duì)單位的聲明。這些瀏覽器會(huì)忽略用 rem 設(shè)定的字體大小。

二、px 特點(diǎn)

px 像素（Pixel）。相對(duì)長(zhǎng)度單位。像素 px 是相對(duì)于顯示器屏幕分辨率而言的。

三、em 特點(diǎn)?

em 的值并不是固定的；

em 會(huì)繼承父級(jí)元素的字體大小。

em 是相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。

任意瀏覽器的默認(rèn)字體高都是 16px。

所有未經(jīng)調(diào)整的瀏覽器一般都符合: 1em = 16px。那么 12px = 0.75em，10px = 0.625em。
為了簡(jiǎn)化 font-size 的換算，需要在 css 中的 body 選擇器中聲明 Fontsize = 62.5%，這就使 em 值變?yōu)?16px*62.5% = 10px, 這樣 12px = 1.2em, 10px = 1em, 也就是說(shuō)只需要將你的原來(lái)的 px 數(shù)值除以 10，然后換上 em 作為單位就行了。

四、vh 與 vw

視口

在桌面端，指的是瀏覽器的可視區(qū)域；

在移動(dòng)端，它涉及 3個(gè) 視口：Layout Viewport（布局視口），Visual Viewport（視覺(jué)視口），Ideal Viewport（理想視口）。

視口單位中的 “視口”，桌面端指的是瀏覽器的可視區(qū)域；移動(dòng)端指的就是 Viewport 中的 Layout Viewport。

vh / vw 與 %

單位 ： 解釋

vw ：1vw = 視口寬度的 1%

vh ：1vh = 視口高度的 1%

vmin ：選取 vw 和 vh 中最小的那個(gè)

vmax ：選取 vw 和 vh 中最大的那個(gè)

比如：瀏覽器視口尺寸為 370px，那么 1vw = 370px * 1% = 6.5px (瀏覽器會(huì)四舍五入向下取 7)

vh / vw 與 % 區(qū)別

單位 ：解釋

% ：元素的祖先元素

vh / vw ：視口的尺寸

不過(guò)由于 vw 和 vh 是 css3 才支持的長(zhǎng)度單位，所以在不支持 css3 的瀏覽器中是無(wú)效的。

什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng) ？

漸進(jìn)增強(qiáng) progressive enhancement：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。

優(yōu)雅降級(jí) graceful degradation：一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。

區(qū)別

優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶體驗(yàn)的供給；

漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要；

降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。

前端硬核面試專題的完整版在此：前端硬核面試專題，包含：HTML + CSS + JS + ES6 + Webpack + Vue + React + Node + HTTPS + 數(shù)據(jù)結(jié)構(gòu)與算法 + Git 。

如果覺(jué)得本文還不錯(cuò)，記得給個(gè) star ， 你的 star 是我持續(xù)更新的動(dòng)力！。