1、CSS 偽元素用于向某些選擇器設(shè)置特殊效果（用來當(dāng)作一個(gè)東西的，
跟一個(gè)元素差不多，但不是元素）。
① :frist-line偽元素：用于向文本首行設(shè)置特殊樣式，但是只能用于塊級(jí)元素。
以下屬性可應(yīng)用于 " frist-line " 偽元素：
font、color、background、word-spacing、
letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear 。
② :first-letter偽元素：用于向文本首字母設(shè)置特殊樣式，只能用于塊級(jí)元素。
以下屬性可應(yīng)用于 " first-letter " 偽元素：
font、color、background、margin、padding、border、
text-decoration、vertical-align(僅當(dāng)float為none時(shí))、text-transform、line-height、float、clear 。
③ 偽元素和css類可以配合使用：p.article: first-letter { }，可以使所有 class
為 article 的段落的首字母樣式改變 。
④ 多重偽元素：可以結(jié)合多個(gè)偽元素來使用。p: first-letter { }，p: first-line { }：
段落的第一個(gè)字母根據(jù)p: first-letter具體樣式顯示，第一行其余文本根據(jù)p: first-line具體樣式顯示，
段落中其余文本以具體段落設(shè)置的其他樣式顯示。
⑤ :before偽元素：可以在元素內(nèi)容前面插入新內(nèi)容 。
⑥ :after偽元素：可以在元素的內(nèi)容之后插入新內(nèi)容 。
⑦ 許多人喜歡給 blockquote 引用段添加巨大的引號(hào)作為背景，這種時(shí)候我們就可以用 :before
來代替 background 了，既可以給背景留下空間，還可以直接使用文字而非圖片：
blockquote::before {
content: open-quote;
position: absolute;
z-index: -1;
color: #DDD;
font-size: 120px;
font-family: serif;
font-weight: bolder;
}⑧ 清除浮動(dòng)：
.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }
2、CSS 偽類用于向某些選擇器添加特殊的效果（用來選擇的）
① :active：向被激活的元素添加樣式
② :focus：向擁有鍵盤輸入焦點(diǎn)的元素添加樣式
③ :hover：當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式
④ :link：向未被訪問的鏈接添加樣式
⑤ :visiter：向已被訪問的鏈接添加樣式
⑥ :first-child：向元素的第一個(gè)子元素添加樣式
⑦ :lang：向帶有指定lang屬性的元素添加樣式，使你有能力為不同的語言定義特殊的規(guī)則：
q:lang(no)
{
quotes: "~" "~"
}
<p>文字<q lang="no">段落中的引用的文字</q>
文字</p>
3、解決塌陷，清除浮動(dòng)
① 添加空元素
經(jīng)典的解決方法，
就是在浮動(dòng)元素下方添加一個(gè)非浮動(dòng)元素。
代碼這樣寫：
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div> 原理是父容器現(xiàn)在必須考慮非浮動(dòng)
子元素的位置，而后者肯定出現(xiàn)在浮動(dòng)元素下方，所以顯示出來，父容器就把所有子元素都包括進(jìn)去了。這種方法比較簡(jiǎn)單，
但是要在頁面中增加冗余標(biāo)簽，違背了語義網(wǎng)的原則。
② 浮動(dòng)的父容器
另一種思路是，索性將父容器也改成浮動(dòng)定位，這樣它就可以帶著子元素一起浮動(dòng)了。
<div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div> 這種方法不用修改HTML代碼，但是缺點(diǎn)在于父容器變成浮動(dòng)以后，
會(huì)影響到后面元素的定位，而且有時(shí)候，父容器是定位死的，無法變成浮動(dòng)。
③ 浮動(dòng)元素的自動(dòng)clearing讓父容器變得可以自動(dòng)"清理"（clearing）子元素的浮動(dòng)，
從而能夠識(shí)別出浮動(dòng)子元素的位置，不會(huì)出現(xiàn)顯示上的差錯(cuò)。
要做到這點(diǎn)，只要為父容器加上一條"overflow: hidden"的CSS語句就行了。代碼這樣寫：
<div style="overflow: hidden;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div> 這種方法的缺點(diǎn)主要有二個(gè)，一個(gè)是IE 6不支持，另一個(gè)是一旦子元素的
大小超過父容器的大小，就會(huì)出顯示問題。
④ 通過CSS語句添加子元素呢，這樣就不用修改HTML代碼
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
} "clearfix"是父容器的class名稱，"content:"020";
"是在父容器的結(jié)尾處放一個(gè)空白字符，"height: 0;"是讓這個(gè)這個(gè)空白字符不顯示出來，
"display: block; clear: both;"是確保這個(gè)空白字符是非浮動(dòng)的獨(dú)立區(qū)塊。
添加一條IE 6的獨(dú)有命令"zoom:1;"就行了，這條命令的作用是激活父元素的"hasLayout"屬性，
讓父元素?fù)碛凶约旱牟季帧E 6會(huì)讀取這條命令，其他瀏覽器則會(huì)直接忽略它。
4、什么情況下hidden不起作用
position設(shè)置成fixed，overflow的hidden不起作用。
5、css盒子模型，問的是border、padding、margin三個(gè)屬性
如何作用在一個(gè)塊級(jí)元素上？
一個(gè)盒子的寬度 = border + padding + width(content內(nèi)容的寬度)。
我想給一個(gè)給一個(gè)盒子加一個(gè)寬度，然后再加一個(gè)padding，
但是這個(gè)盒子原本的寬度不改變，也就是說，width的值沒有改變，
且不會(huì)因?yàn)榧恿藀adding而往外擴(kuò)增，該如何做？
有兩種方式：
① 當(dāng)一個(gè)塊元素沒有設(shè)置width時(shí)，這個(gè)盒子的寬度是默認(rèn)填充父元素的寬度，
這時(shí)隨便給這個(gè)塊元素加padding都是向內(nèi)擴(kuò)展的，不會(huì)向外擴(kuò)展。
② border-sizing: content-box / border-box / inherit ;
content-box：寬度和高度分別應(yīng)用到元素的內(nèi)容框，在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
border-box：為元素設(shè)定的寬度和高度決定了元素的邊框盒，就是說,用border的
寬度來指代width，把加上border、padding之后的寬度，用width強(qiáng)行給限制住，
然后寬度也就會(huì)變成向內(nèi)擴(kuò)展。
inherit：規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。
6、關(guān)于字體的，說一下rem這個(gè)單位（移動(dòng)端），（產(chǎn)生和設(shè)置）
em是相對(duì)于父元素的font-size，rem是相對(duì)于根元素的font-size。
rem的補(bǔ)充：
① 對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡(jiǎn)單，就是多寫一個(gè)絕對(duì)單位的聲明。
這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小；
② IE9/IE10在用于偽元素時(shí)或者使用字體簡(jiǎn)寫聲明時(shí)不支持rem；
③ IOS Safari5.0-5.1雖然支持rem，但是在使用媒體查詢時(shí)不支持rem。
7、如何在css代碼里提升代碼的優(yōu)先級(jí)？
a { color:red;} 用什么方法覆蓋掉？ 解決：
① body a { color:red;}
優(yōu)先級(jí)計(jì)算公式：標(biāo)簽=1，id=100，class=10，加起來就是他的優(yōu)先級(jí)。
② 在color后面加一個(gè)!important，強(qiáng)行將優(yōu)先級(jí)提升到最大。
③ !important提升指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)。
8、有兩個(gè)CSS語句能起到隱藏節(jié)點(diǎn)的作用visibility和display
（1）visibility
規(guī)定了元素是否可見，
即使不可見也會(huì)占用上面的空間，在這里就是在指它與display的不一樣了。
（2）display
這個(gè)屬性用于定義建立布局時(shí)元素生成的顯示框類型。對(duì)于 HTML 等文檔類型，
如果使用 display 不謹(jǐn)慎會(huì)很危險(xiǎn)，因?yàn)榭赡苓`反 HTML 中已經(jīng)定義的顯示層次結(jié)構(gòu)。對(duì)于 XML，
由于 XML 沒有內(nèi)置的這種層次結(jié)構(gòu)，所有 display 是絕對(duì)必要的。
（3）對(duì)比：
相同點(diǎn)：都有相同的功能就是隱藏。
不同點(diǎn)：當(dāng)我們定義了display后，在渲染樹中不會(huì)引擎是不會(huì)去構(gòu)建這個(gè)框的。
而visibility當(dāng)我們使它隱藏的時(shí)候，他在渲染樹中會(huì)構(gòu)建，只是不去渲染。
這也就是W3c上面所說的不可見會(huì)占空間的原因。他們兩者在優(yōu)化中visibility會(huì)顯得更好，
因?yàn)槲覀儾粫?huì)因?yàn)樗ジ淖兞宋臋n中已經(jīng)定義好的顯示層次結(jié)構(gòu)了。
【 微信掃一掃 】
