前端面試集錦——CSS篇

三、CSS篇

3.1、談談你對CSS佈局的理解

3.2、請列舉幾種可以清除浮動的方法（至少兩種）

浮動會漂浮於普通流之上，像浮雲一樣，但是隻能左右浮動。正是這種特性，導致框內部由於不存在其他普通流元素了，表現出高度為0（高度塌陷）。

a. 新增額外標籤，例如

b. 使用br標籤和其自身的html屬性，例如

c. 父元素設定 overflow：hidden；在IE6中還需要觸發hasLayout，例如zoom：1；

d. 父元素設定 overflow：auto 屬性；同樣IE6需要觸發hasLayout

e. 父元素也設定浮動

f. 父元素設定display:table

g. 使用:after 偽元素；由於IE6-7不支援:after，使用 zoom:1觸發 hasLayout。

在CSS2.1裡面有一個很重要的概念，那就是 Block formatting contexts （塊級格式化上下文），簡稱 BFC。

建立了BFC的元素就是一個獨立的盒子，裡面的子元素不會在佈局上影響外面的元素，同時BFC仍然屬於文件中的普通流。

IE6-7的顯示引擎使用的是一個稱為佈局（layout）的內部概念。

參考《那些年我們一起清除過的浮動》

3.3、請列舉幾種隱藏元素的方法

a. visibility: hidden；這個屬性只是簡單的隱藏某個元素，但是元素佔用的空間任然存在。

b. opacity: 0；一個CSS3屬性，設定0可以使一個元素完全透明，製作出和visibility一樣的效果。與visibility相比，它可以被transition和animate

c. position: absolute；使元素脫離文件流，處於普通文件之上，給它設定一個很大的left負值定位，使元素定位在可見區域之外。

d. display: none；元素會變得不可見，並且不會再佔用文件的空間。

e. transform: scale(0)；將一個元素設定為無限小，這個元素將不可見。這個元素原來所在的位置將被保留。

f. HTML5 hidden attribute；hidden屬性的效果和display:none;相同，這個屬性用於記錄一個元素的狀態

g. height: 0; overflow: hidden；將元素在垂直方向上收縮為0,使元素消失。只要元素沒有可見的邊框，該技術就可以正常工作。

h. filter: blur(0)；將一個元素的模糊度設定為0，從而使這個元素“消失”在頁面中。

參考《使用CSS隱藏HTML元素的4種常用方法》《通過HTML和CSS隱藏和顯示元素的4種方法》

3.4、如何讓一段文字中的所有英文單詞的首字母大寫

text-transform：

none| capitalize(將每個單詞的第一個字母轉換成大寫) | uppercase(將每個單詞轉換成大寫 ) | lowercase(將每個單詞轉換成小寫 )

3.5、請簡述CSS樣式表繼承

CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。會被繼承下去的屬性如下：參考《CSS樣式表繼承詳解》

文字相關：font-family，font-size， font-style，font-variant，font-weight， font，letter-spacing，line-height，color

列表相關：list-style-image，list-style-position，list-style-type， list-style

3.6、請簡述CSS的選擇器

元素選擇器：* 、E、 E#id、 E.class

關係選擇器：E、F、E>F、E+F、E~F

屬性選擇器：E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]

偽類選擇器：E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等

偽物件選擇器：E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection

參考《選擇符列表》

3.7、CSS偽類與CSS偽物件的區別

CSS 引入偽類和偽元素的概念是為了描述一些現有CSS無法描述的東西

根本區別在於：它們是否創造了新的元素（抽象）

偽類：一開始用來表示一些元素的動態狀態，隨後CSS2標準擴充套件了其概念範圍，使其成為了所有邏輯上存在但在文件樹中卻無須標識的“幽靈”分類

偽物件：代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻並不實際存在於文件樹中

參考《CSS偽類與CSS偽元素的區別及由來》

3.8、請簡述CSS的權重規則

一個行內樣式+1000，一個id+100，一個屬性選擇器/class類/偽類選擇器+10，一個元素名/偽物件選擇器+1。

關係選擇器將拆分為兩個選擇器再計算。參考《CSS權重》

3.9、請寫出多種等高佈局

a. 假等高列：使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假像

b. 給容器div使用單獨的背景色（固定佈局）（流體佈局）：用

c. 建立帶邊框的兩列等高佈局：用border-left來做，只能使用兩列。

d. 使用正padding和負margin對衝實現多列布局方法：在所有列中使用正的上、下padding和負的上、下margin，並在所有列外面加上一個容器，設定overflow:hiden把溢位背景切掉

e. 使用邊框和定位模擬列等高：但不能使用在多列

f. 模仿表格佈局等高列效果：相容性不好，在ie6-7無法正常執行

3.10、在CSS樣式中常使用px、em，各有什麼優劣，在表現上有什麼區別？

px是相對長度單位，相對於顯示器螢幕解析度而言的。

em是相對長度單位，相對於當前物件內文字的字型尺寸。

px定義的字型，無法用瀏覽器字型放大功能。

em的值並不是固定的，會繼承父級元素的字型大小，1 ÷ 父元素的font-size × 需要轉換的畫素值 = em值。

3.11、CSS中 link 和@import 的區別是什麼？

a. link屬於HTML標籤，而@import是CSS提供的，且只能載入 CSS

b. 頁面被載入時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入

c. import只在IE5以上才能識別，而link是HTML標籤，無相容問題

d. link方式的樣式的權重 高於@import的權重

e. 當使用 Javascript 控制 DOM 去改變樣式的時候，只能使用 link 方式，因為 @import 眼裡只有 CSS ，不是 DOM 可以控制

3.12、position的absolute與fixed共同點與不同點

相同：

a. 改變行內元素的呈現方式，display被置為block

b. 讓元素脫離普通流，不佔據空間

c. 預設會覆蓋到非定位元素上

區別：

absolute的”根元素“是可以設定的，而fixed的”根元素“固定為瀏覽器視窗。

當你滾動網頁，fixed元素與瀏覽器視窗之間的距離是不變的。

3.13、position的值， relative和absolute分別是相對於誰進行定位的？

absolute：生成絕對定位的元素，相對於 static 定位以外的第一個祖先元素進行定位

fixed：生成絕對定位的元素，相對於瀏覽器視窗進行定位。 （IE6不支援）

relative：生成相對定位的元素，相對於其在普通流中的位置進行定位

static：預設值。沒有定位，元素出現在正常的流中

3.14、CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），對文字加特效（text-shadow），線性漸變（gradient），變形（transform）

增加了更多的CSS選擇器 多背景 rgba，在CSS3中唯一引入的偽元素是::selection，媒體查詢，多欄佈局

參考《CSS3中的動畫效果記錄》、《CSS3中border-radius、box-shadow與gradient那點事兒》

3.15、為什麼要初始化CSS樣式？

因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

3.16、解釋下 CSS sprites原理，優缺點

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，

再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，

background-position可以用數字精確的定位出背景圖片的位置。

優點：

a. 減少網頁的http請求

b. 減少圖片的位元組

c. 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名

d. 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。

缺點：

a. 在寬屏，高解析度的螢幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂

b. CSS Sprites在開發的時候，要通過photoshop或其他工具測量計算每一個背景單元的精確位置

c. 在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合併的圖片

3.17、解釋下浮動和它的工作原理？

a. 浮動元素脫離文件流，不佔據空間（引起“高度塌陷”現象）

b. 浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

3.18、浮動元素引起的問題

a. 父元素的高度無法被撐開，影響與父元素同級的元素

b. 與浮動元素同級的非浮動元素會跟隨其後

c. 若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

3.19、什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

如果使用import方法對CSS進行匯入，會導致某些頁面在Windows下的IE出現一些奇怪的現象：

以無樣式顯示頁面內容的瞬間閃爍，這種現象稱之為文件樣式短暫失效(Flash of Unstyled Content)，簡稱為FOUC。

原理：當樣式表晚於結構性html載入，當載入到此樣式表時，頁面將停止之前的渲染。此樣式表被下載和解析後，將重新渲染頁面，也就出現了短暫的花屏現象。

解決方法：使用LINK標籤將樣式表放在文件HEAD中。

3.20、line-height三種賦值方式有何區別？（帶單位、純數字、百分比）

帶單位：px不用計算，em則會使元素以其父元素font-size值為參考來計算自己的行高

純數字：把比例傳遞給後代，例如父級行高為1.5，子元素字型為18px，則子元素行高為1.5*18=27px

百分比：將計算後的值傳遞給後代

參考《line-height的理解》、《淺析line-height和vertical》，檢視線上原始碼。

3.21、:link、:visited、:hover、:active的執行順序是怎麼樣的？

L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜歡和討厭兩個詞來概括

3.22、經常遇到的瀏覽器相容性有哪些？如何解決？

a. 瀏覽器預設的margin和padding不同

b. IE6雙邊距bug

c. 在ie6，ie7中元素高度超出自己設定高度。原因是IE8以前的瀏覽器中會給元素設定預設的行高的高度導致的

d. min-height在IE6下不起作用

e. 透明性IE用filter:Alpha(Opacity=60)，而其他主流瀏覽器用 opacity:0.6

f. input邊框問題，去掉input邊框一般用border:none;就可以，但由於IE6在解析input樣式時的BUG(優先順序問題)，在IE6下無效

3.23、有哪項方式可以對一個DOM設定它的CSS樣式？

a. 外部樣式表：通過標籤引入一個外部css檔案

b. 內部樣式表：將css程式碼放在 標籤內部

c. 內聯樣式：將css樣式直接定義在 HTML 元素內部

3.24、什麼是外邊距重疊？重疊的結果是什麼？

外邊距重疊就是margin-collapse。

在CSS當中，相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。

摺疊結果遵循下列計算規則：

a. 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。

b. 兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值。

c. 兩個外邊距一正一負時，摺疊結果是兩者的相加的和。

3.25、rgba()和opacity的透明效果有什麼不同？

a. opacity作用於元素，以及元素內的所有內容的透明度，rgba()只作用於元素的顏色或其背景色。

b. 設定rgba透明的元素的子元素不會繼承透明效果！

3.26、css屬性content有什麼作用？有什麼應用？

css的content屬性專門應用在 before/after 偽元素上，用於來插入生成內容。

可以配合自定義字型顯示特殊符號。

原文連結：http://www.gbtags.com/gb/share/10029.htm