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

① :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時(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 引用段添加巨大的引號作為背景，這種時(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)去了。這種方法比較簡單，但是要在頁面中增加冗余標(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)以后，會影響到后面元素的定位，而且有時(shí)候，父容器是定位死的，無法變成浮動(dòng)。
③ 浮動(dòng)元素的自動(dòng)clearing
讓父容器變得可以自動(dòng)"清理"（clearing）子元素的浮動(dòng)，從而能夠識別出浮動(dòng)子元素的位置，不會出現(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è)是一旦子元素的大小超過父容器的大小，就會出顯示問題。

④ 通過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會讀取這條命令，其他瀏覽器則會直接忽略它。

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

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

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

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

??????? 我想給一個(gè)給一個(gè)盒子加一個(gè)寬度，然后再加一個(gè)padding，但是這個(gè)盒子原本的寬度不改變，也就是說，width的值沒有改變，且不會因?yàn)榧恿藀adding而往外擴(kuò)增，該如何做？
有兩種方式：

① 當(dāng)一個(gè)塊元素沒有設(shè)置width時(shí)，這個(gè)盒子的寬度是默認(rèn)填充父元素的寬度，這時(shí)隨便給這個(gè)塊元素加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強(qiáng)行給限制住，然后寬度也就會變成向內(nèi)擴(kuò)展。

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

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

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

rem的補(bǔ)充：

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

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

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

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

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

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

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

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

（1）visibility

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

（2）display

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

（3）對比：

相同點(diǎn)：都有相同的功能就是隱藏。

不同點(diǎn)：當(dāng)我們定義了display后，在渲染樹中不會引擎是不會去構(gòu)建這個(gè)框的。而visibility當(dāng)我們使它隱藏的時(shí)候，他在渲染樹中會構(gòu)建，只是不去渲染。這也就是W3c上面所說的不可見會占空間的原因。他們兩者在優(yōu)化中visibility會顯得更好，因?yàn)槲覀儾粫驗(yàn)樗ジ淖兞宋臋n中已經(jīng)定義好的顯示層次結(jié)構(gòu)了。

[轉(zhuǎn)載自http://www.cnblogs.com/xsilence/p/6050412.html]

轉(zhuǎn)載于:https://www.cnblogs.com/gw1016/p/6050459.html

總結(jié)

以上是生活随笔為你收集整理的CSS的一些零碎总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。