1、CSS 偽元素用于向某些選擇器設置特殊效果（用來當作一個東西的，
跟一個元素差不多，但不是元素）。
① :frist-line偽元素：用于向文本首行設置特殊樣式，但是只能用于塊級元素。
以下屬性可應用于 " frist-line " 偽元素：
font、color、background、word-spacing、
letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear 。
② :first-letter偽元素：用于向文本首字母設置特殊樣式，只能用于塊級元素。
以下屬性可應用于 " first-letter " 偽元素：
font、color、background、margin、padding、border、
text-decoration、vertical-align(僅當float為none時)、text-transform、line-height、float、clear 。
③ 偽元素和css類可以配合使用：p.article: first-letter { }，可以使所有 class
為 article 的段落的首字母樣式改變 。
④ 多重偽元素：可以結合多個偽元素來使用。p: first-letter { }，p: first-line { }：
段落的第一個字母根據p: first-letter具體樣式顯示，第一行其余文本根據p: first-line具體樣式顯示，
段落中其余文本以具體段落設置的其他樣式顯示。
⑤ :before偽元素：可以在元素內容前面插入新內容 。
⑥ :after偽元素：可以在元素的內容之后插入新內容 。
⑦ 許多人喜歡給 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：當鼠標懸浮在元素上方時，向元素添加樣式
④ :link：向未被訪問的鏈接添加樣式
⑤ :visiter：向已被訪問的鏈接添加樣式
⑥ :first-child：向元素的第一個子元素添加樣式
⑦ :lang：向帶有指定lang屬性的元素添加樣式，使你有能力為不同的語言定義特殊的規則：
q:lang(no)
{
quotes: "~" "~"
}
<p>文字<q lang="no">段落中的引用的文字</q>
文字</p>
3、解決塌陷，清除浮動
① 添加空元素
經典的解決方法，
就是在浮動元素下方添加一個非浮動元素。
代碼這樣寫：
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div> 原理是父容器現在必須考慮非浮動
子元素的位置，而后者肯定出現在浮動元素下方，所以顯示出來，父容器就把所有子元素都包括進去了。這種方法比較簡單，
但是要在頁面中增加冗余標簽，違背了語義網的原則。
② 浮動的父容器
另一種思路是，索性將父容器也改成浮動定位，這樣它就可以帶著子元素一起浮動了。
<div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div> 這種方法不用修改HTML代碼，但是缺點在于父容器變成浮動以后，
會影響到后面元素的定位，而且有時候，父容器是定位死的，無法變成浮動。
③ 浮動元素的自動clearing讓父容器變得可以自動"清理"（clearing）子元素的浮動，
從而能夠識別出浮動子元素的位置，不會出現顯示上的差錯。
要做到這點，只要為父容器加上一條"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";
"是在父容器的結尾處放一個空白字符，"height: 0;"是讓這個這個空白字符不顯示出來，
"display: block; clear: both;"是確保這個空白字符是非浮動的獨立區塊。
添加一條IE 6的獨有命令"zoom:1;"就行了，這條命令的作用是激活父元素的"hasLayout"屬性，
讓父元素擁有自己的布局。IE 6會讀取這條命令，其他瀏覽器則會直接忽略它。
4、什么情況下hidden不起作用
position設置成fixed，overflow的hidden不起作用。
5、css盒子模型，問的是border、padding、margin三個屬性
如何作用在一個塊級元素上？
一個盒子的寬度 = border + padding + width(content內容的寬度)。
我想給一個給一個盒子加一個寬度，然后再加一個padding，
但是這個盒子原本的寬度不改變，也就是說，width的值沒有改變，
且不會因為加了padding而往外擴增，該如何做？
有兩種方式：
① 當一個塊元素沒有設置width時，這個盒子的寬度是默認填充父元素的寬度，
這時隨便給這個塊元素加padding都是向內擴展的，不會向外擴展。
② border-sizing: content-box / border-box / inherit ;
content-box：寬度和高度分別應用到元素的內容框，在寬度和高度之外繪制元素的內邊距和邊框。
border-box：為元素設定的寬度和高度決定了元素的邊框盒，就是說,用border的
寬度來指代width，把加上border、padding之后的寬度，用width強行給限制住，
然后寬度也就會變成向內擴展。
inherit：規定應從父元素繼承 box-sizing 屬性的值。
6、關于字體的，說一下rem這個單位（移動端），（產生和設置）
em是相對于父元素的font-size，rem是相對于根元素的font-size。
rem的補充：
① 對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。
這些瀏覽器會忽略用rem設定的字體大??；
② IE9/IE10在用于偽元素時或者使用字體簡寫聲明時不支持rem；
③ IOS Safari5.0-5.1雖然支持rem，但是在使用媒體查詢時不支持rem。
7、如何在css代碼里提升代碼的優先級？
a { color:red;} 用什么方法覆蓋掉？ 解決：
① body a { color:red;}
優先級計算公式：標簽=1，id=100，class=10，加起來就是他的優先級。
② 在color后面加一個!important，強行將優先級提升到最大。
③ !important提升指定樣式規則的應用優先權。
8、有兩個CSS語句能起到隱藏節點的作用visibility和display
（1）visibility
規定了元素是否可見，
即使不可見也會占用上面的空間，在這里就是在指它與display的不一樣了。
（2）display
這個屬性用于定義建立布局時元素生成的顯示框類型。對于 HTML 等文檔類型，
如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示層次結構。對于 XML，
由于 XML 沒有內置的這種層次結構，所有 display 是絕對必要的。
（3）對比：
相同點：都有相同的功能就是隱藏。
不同點：當我們定義了display后，在渲染樹中不會引擎是不會去構建這個框的。
而visibility當我們使它隱藏的時候，他在渲染樹中會構建，只是不去渲染。
這也就是W3c上面所說的不可見會占空間的原因。他們兩者在優化中visibility會顯得更好，
因為我們不會因為它而去改變了文檔中已經定義好的顯示層次結構了。
【 微信掃一掃 】
