1、CSS 偽元素用于向某些選擇器設(shè)置特殊效果（用來當(dāng)作一個東西的，
跟一個元素差不多，但不是元素）。

① :frist-line偽元素：用于向文本首行設(shè)置特殊樣式，但是只能用于塊級元素。

以下屬性可應(yīng)用于 " frist-line " 偽元素：
        font、color、background、word-spacing、
letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear 。

② :first-letter偽元素：用于向文本首字母設(shè)置特殊樣式，只能用于塊級元素。

以下屬性可應(yīng)用于 " first-letter " 偽元素：
        font、color、background、margin、padding、border、
text-decoration、vertical-align(僅當(dāng)float為none時)、text-transform、line-height、float、clear 。

③ 偽元素和css類可以配合使用：p.article: first-letter { }，可以使所有 class
為 article 的段落的首字母樣式改變 。

④ 多重偽元素：可以結(jié)合多個偽元素來使用。p: first-letter { }，p: first-line { }：
段落的第一個字母根據(jù)p: first-letter具體樣式顯示，第一行其余文本根據(jù)p: first-line具體樣式顯示，
段落中其余文本以具體段落設(shè)置的其他樣式顯示。

⑤ :before偽元素：可以在元素內(nèi)容前面插入新內(nèi)容 。

⑥ :after偽元素：可以在元素的內(nèi)容之后插入新內(nèi)容 。

⑦ 許多人喜歡給 blockquote 引用段添加巨大的引號作為背景，這種時候我們就可以用 :before
來代替 background 了，既可以給背景留下空間，還可以直接使用文字而非圖片：

    blockquote::before { 
        content: open-quote; 
        position: absolute; 
        z-index: -1; 
        color: #DDD; 
        font-size: 120px; 
        font-family: serif; 
        font-weight: bolder; 
    }

⑧ 清除浮動：

.clear-fix { *overflow: hidden; *zoom: 1; } 
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

2、CSS 偽類用于向某些選擇器添加特殊的效果（用來選擇的）

① :active：向被激活的元素添加樣式

② :focus：向擁有鍵盤輸入焦點的元素添加樣式

③ :hover：當(dāng)鼠標(biāo)懸浮在元素上方時，向元素添加樣式

④ :link：向未被訪問的鏈接添加樣式

⑤ :visiter：向已被訪問的鏈接添加樣式

⑥ :first-child：向元素的第一個子元素添加樣式

⑦ :lang：向帶有指定lang屬性的元素添加樣式，使你有能力為不同的語言定義特殊的規(guī)則：

q:lang(no) 
   { 
   quotes: "~" "~" 
   } 
 

<p>文字<q lang="no">段落中的引用的文字</q>
文字</p>

3、解決塌陷，清除浮動

① 添加空元素

        經(jīng)典的解決方法，
就是在浮動元素下方添加一個非浮動元素。
代碼這樣寫：

<div> 
<div style="float:left;width:45%;"></div> 
<div style="float:right;width:45%;"></div> 
<div style="clear:both;"></div> 
</div>

        原理是父容器現(xiàn)在必須考慮非浮動
子元素的位置，而后者肯定出現(xiàn)在浮動元素下方，所以顯示出來，父容器就把所有子元素都包括進去了。這種方法比較簡單，
但是要在頁面中增加冗余標(biāo)簽，違背了語義網(wǎng)的原則。

② 浮動的父容器

     另一種思路是，索性將父容器也改成浮動定位，這樣它就可以帶著子元素一起浮動了。

<div style="float:left;"> 
<div style="float:left;width:45%;"></div> 
<div style="float:right;width:45%;"></div> 
</div>

     這種方法不用修改HTML代碼，但是缺點在于父容器變成浮動以后，
會影響到后面元素的定位，而且有時候，父容器是定位死的，無法變成浮動。
③ 浮動元素的自動clearing讓父容器變得可以自動"清理"（clearing）子元素的浮動，
從而能夠識別出浮動子元素的位置，不會出現(xiàn)顯示上的差錯。
要做到這點，只要為父容器加上一條"overflow: hidden"的CSS語句就行了。代碼這樣寫：

<div style="overflow: hidden;"> 
<div style="float:left;width:45%;"></div> 
<div style="float:right;width:45%;"></div> 
</div>

   這種方法的缺點主要有二個，一個是IE 6不支持，另一個是一旦子元素的
大小超過父容器的大小，就會出顯示問題。

④ 通過CSS語句添加子元素呢，這樣就不用修改HTML代碼

.clearfix:after { 
content: "\0020"; 
display: block; 
height: 0; 
clear: both; 
} 
.clearfix { 
zoom: 1; 
}

   "clearfix"是父容器的class名稱，"content:"020";
"是在父容器的結(jié)尾處放一個空白字符，"height: 0;"是讓這個這個空白字符不顯示出來，
"display: block; clear: both;"是確保這個空白字符是非浮動的獨立區(qū)塊。
添加一條IE 6的獨有命令"zoom:1;"就行了，這條命令的作用是激活父元素的"hasLayout"屬性，
讓父元素擁有自己的布局。IE 6會讀取這條命令，其他瀏覽器則會直接忽略它。

4、什么情況下hidden不起作用

   position設(shè)置成fixed，overflow的hidden不起作用。

5、css盒子模型，問的是border、padding、margin三個屬性
如何作用在一個塊級元素上？

   一個盒子的寬度 = border + padding + width(content內(nèi)容的寬度)。

   我想給一個給一個盒子加一個寬度，然后再加一個padding，
但是這個盒子原本的寬度不改變，也就是說，width的值沒有改變，
且不會因為加了padding而往外擴增，該如何做？
有兩種方式：

① 當(dāng)一個塊元素沒有設(shè)置width時，這個盒子的寬度是默認(rèn)填充父元素的寬度，
這時隨便給這個塊元素加padding都是向內(nèi)擴展的，不會向外擴展。

② border-sizing: content-box / border-box / inherit ;

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

border-box：為元素設(shè)定的寬度和高度決定了元素的邊框盒，就是說,用border的
寬度來指代width，把加上border、padding之后的寬度，用width強行給限制住，
然后寬度也就會變成向內(nèi)擴展。

inherit：規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。

6、關(guān)于字體的，說一下rem這個單位（移動端），（產(chǎn)生和設(shè)置）

em是相對于父元素的font-size，rem是相對于根元素的font-size。

rem的補充：

① 對于不支持它的瀏覽器，應(yīng)對方法也很簡單，就是多寫一個絕對單位的聲明。
這些瀏覽器會忽略用rem設(shè)定的字體大小；

② IE9/IE10在用于偽元素時或者使用字體簡寫聲明時不支持rem；

③ IOS Safari5.0-5.1雖然支持rem，但是在使用媒體查詢時不支持rem。

7、如何在css代碼里提升代碼的優(yōu)先級？
a { color:red;} 用什么方法覆蓋掉？ 解決：

① body a { color:red;}
優(yōu)先級計算公式：標(biāo)簽=1，id=100，class=10，加起來就是他的優(yōu)先級。

② 在color后面加一個!important，強行將優(yōu)先級提升到最大。

③ !important提升指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。

8、有兩個CSS語句能起到隱藏節(jié)點的作用visibility和display

（1）visibility

   規(guī)定了元素是否可見，
即使不可見也會占用上面的空間，在這里就是在指它與display的不一樣了。

（2）display

   這個屬性用于定義建立布局時元素生成的顯示框類型。對于 HTML 等文檔類型，
如果使用 display 不謹(jǐn)慎會很危險，因為可能違反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。對于 XML，
由于 XML 沒有內(nèi)置的這種層次結(jié)構(gòu)，所有 display 是絕對必要的。

（3）對比：

相同點：都有相同的功能就是隱藏。

不同點：當(dāng)我們定義了display后，在渲染樹中不會引擎是不會去構(gòu)建這個框的。
而visibility當(dāng)我們使它隱藏的時候，他在渲染樹中會構(gòu)建，只是不去渲染。
這也就是W3c上面所說的不可見會占空間的原因。他們兩者在優(yōu)化中visibility會顯得更好，
因為我們不會因為它而去改變了文檔中已經(jīng)定義好的顯示層次結(jié)構(gòu)了。