標簽（空格分隔）： 面試準備

[TOC]

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

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

概念：在非IE瀏覽器（如Firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）布局的現象。這個現象叫浮動溢出(高度塌陷)，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
a. 在浮動元素后面添加一個空元素，例如<div style=”clear:both”></div>
b. 使用br標簽和其自身的html屬性，例如<br clear=”all” />
c. 父元素設置 overflow：hidden；或者overflow：auto；在IE6中還需要觸發(fā)hasLayout，例如zoom：1；
d. 父元素也設置浮動即可清除內部浮動，但是這樣會使其整體浮動，影響布局，不推薦使用。
e. 父元素設置display:table,盒模型屬性改變，有可能引發(fā)未知問題。
f. 使用:after 偽元素；由于IE6-7不支持:after，使用 zoom:1觸發(fā) hasLayout。

.clearfix:after{
  content: "\200B"; 
  display: block; 
  height: 0; 
  clear: both; 
  }
.clearfix {
  /* 觸發(fā) hasLayout */ 
  zoom: 1; 
  }
  //或
  /* For modern browsers */
.cf:before,.cf:after {
  content:"";
  display:table;
}
.cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }

g.固定高度時，可以手動設定父元素的高度。
在CSS2.1里面有一個很重要的概念，那就是 Block formatting contexts （塊級格式化上下文），簡稱 BFC。
創(chuàng)建了BFC的元素就是一個獨立的盒子，里面的子元素不會在布局上影響外面的元素，同時BFC仍然屬于文檔中的普通流。
IE6-7的顯示引擎使用的是一個稱為布局（layout）的內部概念。

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

a. visibility: hidden；這個屬性只是簡單的隱藏某個元素，但是元素占用的空間任然存在。
b. opacity: 0；一個CSS3屬性，設置0可以使一個元素完全透明，制作出和visibility一樣的效果。與visibility相比，它可以被transition和animate
c. position: absolute；使元素脫離文檔流，處于普通文檔之上，給它設置一個很大的left負值定位，使元素定位在可見區(qū)域之外。
d. display: none；元素會變得不可見，并且不會再占用文檔的空間。
e. transform: scale(0)；將一個元素設置為無限小，這個元素將不可見。這個元素原來所在的位置將被保留。
f. HTML5 hidden attribute；hidden屬性的效果和display:none;相同，這個屬性用于記錄一個元素的狀態(tài)
g. height: 0; overflow: hidden；將元素在垂直方向上收縮為0,使元素消失。只要元素沒有可見的邊框，該技術就可以正常工作。
h. filter: blur(0)；將一個元素的模糊度設置為0，從而使這個元素“消失”在頁面中。

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

以下是一個按特性分類的選擇符的列表：
H1{color:blue;}　 特性值為：1
PEM{color:purple;} 特性值為：2
.apple{red;}　 特性值為：10
P.bright{color:yellow;} 特性值為：11
P.brightEM.dark{color:brown;}　 特性值為：22
#id316{color:yellow}　 特性值為：100
從上表我們可以看出#id316具有更高的特殊性，因而它有更高的權重。當有多個規(guī)則都能應用于同一個元素時，權重越高的樣式將被優(yōu)先采用。而繼承屬性的特性值為0；也就是說，任何一條與css繼承值沖突的屬性值都會覆蓋繼承的屬性值?。?！

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偽對象的區(qū)別

CSS 引入偽類和偽元素的概念是為了描述一些現有CSS無法描述的東西
根本區(qū)別在于：它們是否創(chuàng)造了新的元素（抽象）
偽類：一開始用來表示一些元素的動態(tài)狀態(tài)，隨后CSS2標準擴展了其概念范圍，使其成為了所有邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類
偽對象：代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻并不實際存在于文檔樹中

3.8、請簡述CSS的權重規(guī)則

一個行內樣式+1000，一個id+100，一個屬性選擇器a[href][title] {color:red;}/class類/偽類選擇器:hover,:focus+10，一個元素名/偽元素選擇器:before,:after+1。
http://www.w3cplus.com/css/css-specificity-things-you-should-know.html

3.9、請寫出多種等高布局

a. 假等高列：使用背景圖片，在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假像
b. 給容器div使用單獨的背景色（固定布局）（流體布局）：用<div>元素中的最大高度撐大其他的<div>容器高度
c. 創(chuàng)建帶邊框的兩列等高布局：用border-left來做，只能使用兩列。
d. 使用正padding和負margin對沖實現多列布局方法：在所有列中使用正的上、下padding和負的上、下margin，并在所有列外面加上一個容器，設置overflow:hiden把溢出背景切掉
e. 使用邊框和定位模擬列等高：但不能使用在多列
f. 模仿表格布局等高列效果：兼容性不好，在ie6-7無法正常運行
http://www.w3cplus.com/css/creaet-equal-height-columns

3.10、在CSS樣式中常使用px、em，各有什么優(yōu)劣，在表現上有什么區(qū)別？

px是相對長度單位，相對于顯示器屏幕分辨率而言的。
em是相對長度單位，相對于當前對象內文本的字體尺寸。
px定義的字體，無法用瀏覽器字體放大功能。
em的值并不是固定的，會繼承父級元素的字體大小，1 ÷ 父元素的font-size × 需要轉換的像素值 = em值。
當前瀏覽器的默認的字體大小為1em,絕大多數時候為16px;

3.11、CSS中 link 和@import 的區(qū)別是什么？

區(qū)別1：link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬于CSS范疇，只能加載CSS。
區(qū)別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。
區(qū)別3：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區(qū)別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。

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

相同：
a. 改變行內元素的呈現方式，display被置為block
b. 讓元素脫離普通流，不占據空間
c. 默認會覆蓋到非定位元素上
區(qū)別：
absolute的”根元素“是可以設置的，而fixed的”根元素“固定為瀏覽器窗口。
當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。

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

absolute：生成絕對定位的元素，相對于 static 定位以外的第一個祖先元素進行定位
fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。 （IE6不支持）
relative：生成相對定位的元素，相對于其在普通流中的位置進行定位
static：默認值。沒有定位，元素出現在正常的流中

3.14、CSS3有哪些新特性？

http://www.cnblogs.com/strick/p/3839873.html
http://www.cnblogs.com/strick/p/4843595.html

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

因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。

3.16、解釋下 CSS sprites原理，優(yōu)缺點

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，
再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，
background-position可以用數字精確的定位出背景圖片的位置。
優(yōu)點：
a. 減少網頁的http請求
b. 減少圖片的字節(jié)
c. 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名
d. 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。
缺點：
a. 在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂
b. CSS Sprites在開發(fā)的時候，要通過photoshop或其他工具測量計算每一個背景單元的精確位置
c. 在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片

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

a. 浮動元素脫離文檔流，不占據空間（引起“高度塌陷”現象）
b. 浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

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(優(yōu)先級問題)，在IE6下無效

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

a. opacity作用于元素，以及元素內的所有內容的透明度，rgba()只作用于元素的顏色或其背景色。
b. 設置rgba透明的元素的子元素不會繼承透明效果！