1、談談你對CSS布局的理解
常見的布局方式：固定布局、流式布局、彈性布局、浮動布局、定位布局、margin和padding
2、請列舉幾個清除浮動的方法
（1）使用clear屬性
<div style="clear:both"></div>
（2）使用br標簽和其自身的HTML屬性
<br clear="all" />
（3）通過設置父元素的樣式，實現清除浮動，例如：
- 父元素設置 overflow:hidden
- 父元素設置 overflow:auto
- 父元素設置 display:table
- 父元素也設置浮動樣式
（4）使用 :after 偽元素
3、請列舉幾種隱藏元素的方法
visibility:hidden，這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在；
opacity:0，是CSS3的屬性，設置元素為完全透明，和 visibility 的效果類似，但是該屬性修飾的元素可以使用 transition 和 animate 設置動畫效果；
display:none，設置元素為不可見，不會占用文檔的空間；
hidden屬性，該屬性是HTML5中新增的屬性，效果和 display 相同；
4、如何讓一段文本中的所有英文單詞的首字母大寫
text-transform: none | capitalize（將每個單詞的第一個字母轉為大寫） | uppercase（將每個單詞都轉為大寫）| lowercase（將每個單詞都轉為小寫）
5、請簡述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；
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
7、CSS偽類與CSS偽對象的區別
CSS引入偽類和偽元素的概念是為了描述一些現有CSS無法描述的東西，根本區別在於：它們是否創造了新的抽象元素；
偽類：描述了所有邏輯上存在但在文檔樹中無須標識的分類；
偽對象：代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻並不實際存在於文檔樹中；
8、請簡述CSS的權重規則
行內樣式 > ID > 屬性選擇器/class類/偽類選擇器 > 元素名/偽對象選擇器；
關系選擇器將拆分為兩個選擇器再計算權重。
9、請寫出多種等高布局
- 假等高布局：使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假象
- 給容器div使用單獨的背景色（固定布局、流體布局）：用元素中的最大高度撐大其他的容器高度
- 創建帶邊框的兩列等高布局：用border-left來做，只能使用兩列
- 使用正padding和負margin對沖實現多列布局方法：在所有列中使用正的上下padding和負的上下margin，並在所有列外面加上一個容器，設置overflow:hidden把溢出背景切掉
- 使用邊框和定位模擬列等高：但不能使用在多列
- 模擬表格布局等高效果：兼容性不好，在IE6/7無法正常運行
10、在CSS樣式中使用px、em，各有什么優勢，在表現上有什么區別？
px是相對長度單位，相對於顯示器屏幕分辨率而言的；
em是相對長度單位，相對於當前對象內文本的字體尺寸；
px定義的字體，無法用瀏覽器字體放大功能；em的值並不是固定，會繼承父級元素的字體大小，
1 ÷ 父元素的font-size × 需要轉換的像素值 = em值
11、CSS中link和@import 的區別是什么？
- link屬於HTML標簽，而 @import 是CSS提供的，只能加載CSS；
- 頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載；
- @import只能在IE5以上才能識別，而link是HTML標簽，無兼容問題；
- link方式的樣式權重高於@import的權重；
- 當使用javascript控制DOM去改變樣式的時候，只能使用link方式，因為@import只有CSS才能識別，DOM無法控制；
12、position的absolute與fixed共同點與不同點？
相同：
-
改變行內元素的呈現方式，display被置為block
-
讓元素脫離普通流，不占據空間
-
默認會覆蓋到非定位元素上
區別：
-
absolute的”根元素“是可以設置的，而fixed的”根元素“固定為瀏覽器窗口。
-
當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。
13、position的值，relative 和 absolute 分別是相對於誰進行定位的？
absolute：生成絕對定位的元素，相對於 static 定位以外的第一個祖先元素進行定位
fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。 （IE6不支持）
relative：生成相對定位的元素，相對於其在普通流中的位置進行定位
static：默認值。沒有定位，元素出現在正常的流中
14、CSS3有哪些新特性？
新增特性有：圓角（border-radius）、陰影（box-shadow）、對文字加特效（text-shadow）、線性漸變（gradient）、變形（transform）；
增加了更多的CSS選擇器，媒體查詢，多欄布局，多背景rgba，引入偽元素::selection。
15、為什么要初始化CSS樣式
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒有初始化CSS，往往會出現瀏覽器之間的頁面顯示差異；
CSS樣式初始化之后會對SEO有一定的影響。
16、解釋下 CSS sprites 原理，及優缺點？
CSS sprites 其實就是把網頁中的一些背景圖片整合到一張圖片文件中，在利用CSS的 background-image，background-repeat，background-position的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。
優點：
- 減少網頁的http請求
- 減少圖片的字節
- 解決網頁設計師在圖片命名上的困擾，只需要對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名
- 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變了
缺點：
- 在寬屏，高分辨率的屏幕下的自適應頁面，如果背景圖不夠寬，很容易出現背景斷裂
- CSS sprites 在開發的時候，需要通過Photoshop或其他工具測量計算每一個背景單元的精確位置
- 在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要修改這張合並的圖片
17、解釋一下浮動及其工作原理？
浮動元素脫離文檔流，不占據空間（引起“高度塌陷”現象）；
浮動元素碰到包含它的邊框或者浮動元素的邊框停留。
18、浮動元素引起的問題
-
父元素的高度無法被撐開，影響與父元素同級的元素
-
與浮動元素同級的非浮動元素會跟隨其后
-
若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
19、什么是FOUC（無樣式內容閃爍）？你如何來避免FOUC？
如果使用@import方式對CSS進行導入，會導致某些頁面在windows下的IE出現一些奇怪的現象：
以無樣式顯示頁面內容的瞬間閃爍，這種現象被稱為文檔樣式短暫失效，簡稱FOUC
原理：當樣式表晚於結構性html加載，當加載到此樣式表時，頁面將停止之前的渲染。此樣式表被下載和解析后，將重新渲染頁面，也就出現了短暫的花屏現象。
解決方法：使用LINK標簽將樣式表放在文檔HEAD中。
20、line-height 三種賦值方式有何區別？（帶單位、純數字、百分比）
帶單位：px不用計算，em則會使元素以其父元素font-size值為參考來計算自己的行高；
純數字：把比例傳遞給后代，例如父級行高為1.5，子元素字體為18px，則子元素行高為1.5*18=27px；
百分比：將計算后的值傳遞給后代；
21、:link、:visited、:hover、:active 的執行順序是怎么樣的？
:link > :visited > :hover > :active
22、經常遇到的瀏覽器兼容性有哪些？如何解決？
- 瀏覽器默認的 margin 和 padding 不同
- IE6雙邊距bug
- 在IE6、IE7中元素高度超出自己設置高度，原因是IE8以前的瀏覽器中會給元素設置默認的行高的高度導致的
- min-height 在IE6下不起作用
- 透明性IE用filter.Alpha(opcity=60)，而其他主瀏覽器用opacity:0.6
- input邊框問題，去掉input邊框一般用 border:none 就可以了，由於IE6在解析input樣式時的bug（優先級問題），在IE6下無效
23、有哪些方式可以對一個DOM設置它的CSS樣式？
- 外部樣式表，使用
<link>標簽引入一個外部CSS樣式 - 內部樣式表，將CSS代碼放在
<style>標簽內部 - 內聯樣式，將CSS樣式直接定義在HTML元素內部
24、什么是外邊距重疊？重疊的結果是什么？
外邊距重疊就是margin-collapse；
在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合並外邊距的方式稱為折疊，並且因而所結合成的外邊距稱為折疊外邊距；
折疊結果計算規則：
- 兩個相鄰的外邊距都是正數時，折疊結果是他們兩者之間較大的值；
- 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值；
- 兩個外邊距一正一負時，折疊結果是兩者的相加的和
25、rgba() 和 opacity 的透明效果有什么不同？
- opacity 作用於元素，以及元素內的所有內容的透明度，rgba()只作用於元素的顏色或其背景色
- 設置rgba透明的元素的子元素不會繼承透明效果
26、CSS屬性content有什么作用？有什么應用？
css的content屬性專門應用在 after/before 偽元素上，用於插入生成內容，可以配合自定義字體顯示特殊符號。