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)在浮動元素下方，所以顯示出來，父容器就把所有子元素都包括進(jì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"屬性，
讓父元素?fù)碛凶约旱牟季帧E 6會讀取這條命令，其他瀏覽器則會直接忽略它。
4、什么情況下hidden不起作用
position設(shè)置成fixed，overflow的hidden不起作用。
5、css盒子模型，問的是border、padding、margin三個屬性
如何作用在一個塊級元素上？
一個盒子的寬度 = border + padding + width(content內(nèi)容的寬度)。
我想給一個給一個盒子加一個寬度，然后再加一個padding，
但是這個盒子原本的寬度不改變，也就是說，width的值沒有改變，
且不會因為加了padding而往外擴(kuò)增，該如何做？
有兩種方式：
① 當(dāng)一個塊元素沒有設(shè)置width時，這個盒子的寬度是默認(rèn)填充父元素的寬度，
這時隨便給這個塊元素加padding都是向內(nèi)擴(kuò)展的，不會向外擴(kuò)展。
② 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)擴(kuò)展。
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)了。
【 微信掃一掃 】
