**3.1、談談你對CSS布局的理解**
**3.2、請列舉幾種可以清除浮動的方法（至少兩種）**
浮動會漂浮于普通流之上，像浮云一樣，但是只能左右浮動。正是這種特性，導致框內部由于不存在其他普通流元素了，表現出高度為0（高度塌陷）。
a. 添加額外標簽，例如`<div style="clear:both"></div>`
b. 使用br標簽和其自身的html屬性，例如`<br clear="all" />`
c. 父元素設置 overflow：hidden；在IE6中還需要觸發[hasLayout](http://yiminghe.iteye.com/blog/367384)，例如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](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context)。
創建了BFC的元素就是一個獨立的盒子，里面的子元素不會在布局上影響外面的元素，同時BFC仍然屬于文檔中的普通流。
IE6-7的顯示引擎使用的是一個稱為布局（layout）的內部概念。
參考《[那些年我們一起清除過的浮動](http://www.iyunlu.com/view/css-xhtml/55.html)》
**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種常用方法](http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502271431.html)》《[通過HTML和CSS隱藏和顯示元素的4種方法](http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502281436.html)》
**3.4、如何讓一段文本中的所有英文單詞的首字母大寫**
[text-transform](http://css.doyoe.com/properties/text/text-transform.htm)：
none| capitalize(將每個單詞的第一個字母轉換成大寫) | uppercase(將每個單詞轉換成大寫 ) | lowercase(將每個單詞轉換成小寫 )
**3.5、請簡述CSS樣式表繼承**
CSS樣式表繼承指的是，特定的CSS屬性向下傳遞到子孫元素。會被繼承下去的屬性如下：參考《[CSS樣式表繼承詳解](http://www.cnphp.info/css-style-inheritance.html)》
文本相關：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
參考《[選擇符列表](http://css.doyoe.com/selectors/index.htm)》
**3.7、CSS偽類與CSS偽對象的區別**
CSS 引入偽類和偽元素的概念是為了描述一些現有CSS無法描述的東西
根本區別在于：它們是否創造了新的元素（抽象）
偽類：一開始用來表示一些元素的動態狀態，隨后CSS2標準擴展了其概念范圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類
偽對象：代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻并不實際存在于文檔樹中
參考《[CSS偽類與CSS偽元素的區別及由來](http://swordair.com/origin-and-difference-between-css-pseudo-classes-and-pseudo-elements/)》
**3.8、請簡述CSS的權重規則**
一個行內樣式+1000，一個id+100，一個屬性選擇器/class類/偽類選擇器+10，一個元素名/偽對象選擇器+1。
關系選擇器將拆分為兩個選擇器再計算。參考《[CSS權重](http://www.w3cplus.com/css/css-specificity-things-you-should-know.html)》
**3.9、請寫出多種等高布局**
a. 假等高列：使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假像
b. 給容器div使用單獨的背景色（[固定布局](http://codepen.io/strick/pen/ZbZYoW)）（[流體布局](http://codepen.io/strick/pen/WQWOPK)）：用元素中的最大高度撐大其他的容器高度
c. 創建[帶邊框的兩列](http://codepen.io/strick/pen/bVJRQv)等高布局：用border-left來做，只能使用兩列。
d. 使用[正padding和負margin](http://codepen.io/strick/pen/qOwXEN)對沖實現多列布局方法：在所有列中使用正的上、下padding和負的上、下margin，并在所有列外面加上一個容器，設置overflow:hiden把溢出背景切掉
e. 使用[邊框和定位模擬](http://codepen.io/strick/pen/XmQabJ)列等高：但不能使用在多列
f. [模仿表格布局](http://codepen.io/strick/pen/ZbZJGg)等高列效果：兼容性不好，在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](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius)），陰影（[box-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow)），對文字加特效（[text-shadow](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow)），線性漸變（[gradient](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient)），變形（[transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)）
增加了更多的CSS選擇器? 多背景 rgba，在CSS3中唯一引入的偽元素是::selection，媒體查詢，多欄布局
參考《[CSS3中的動畫效果記錄](http://www.cnblogs.com/strick/p/3839873.html)》、《[CSS3中border-radius、box-shadow與gradient那點事兒](http://www.cnblogs.com/strick/p/4843595.html)》
**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的理解](http://ixdfan.github.io/css/2014/04/01/line-height.html)》、《[淺析line-height和vertical](http://www.html-js.com/article/2952)》，[查看在線源碼](http://codepen.io/strick/pen/RWzKrz)。
**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. 外部樣式表：通過`<link>`標簽引入一個外部css文件
b. 內部樣式表：將css代碼放在 `<style>` 標簽內部
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 偽元素上，用于來插入生成內容。
可以配合自定義字體顯示特殊符號。
