本文主要是針對:before和:after的區(qū)別
什么是:before和:after？ 該如何使用他們？
:before是css中的一種偽元素，可用于在某個元素之前插入某些內(nèi)容。
:after是css中的一種偽元素，可用于在某個元素之后插入某些內(nèi)容。
代碼測試下效果：
1. <style>
2. p:before{
3. content: "H" /*:before和:after必帶技能，重要性為滿5顆星*/
4. }
5. p:after{
6. content: "d" /*:before和:after必帶技能，重要性為滿5顆星*/
7. }
8. </style>
9. <p>ello Worl</p>
以上的代碼將會在頁面中展現(xiàn)的是”Hello World”。我們通過瀏覽器的”審查元素”看到的內(nèi)容是：
1. <p>
2. ::before
3. "ello Worl"
4. ::after
5. </p>
p標(biāo)簽內(nèi)部的內(nèi)容的前面會被插入一個:before偽元素，該偽元素內(nèi)包含的內(nèi)容是”H”；而在p標(biāo)簽內(nèi)的內(nèi)容后面會被插入一個:after偽元素，該元素包含的內(nèi)容是”d”。作為一只合格的程序猴子，捍衛(wèi)”Hello World”的完整存在是必要的。
既然筆記主要針對是:before和:after，那么肯定不會只是僅僅有以上的簡單介紹就完事。下面我們看看平常該怎么使用他們。
1.結(jié)合border寫個對話框的樣式。
將上面這句話拆成2部分：結(jié)合border，寫個對話框的樣式。
既然是結(jié)合border，那么我們先轉(zhuǎn)個小話題，簡單由淺入深的介紹下怎么用border畫三角形樣式(這個三角形在寫對話框樣式的時候需要)：
1. <style>
2. .triangle{
3. width: 0;
4. height: 0;
5. border-left:50px solid red;
6. border-bottom:50px solid blue;
7. border-top:50px solid black;
8. border-right:50px solid purple
9. }
10. </style>
11. <div class="triangle"></div>
以上代碼將會在頁面上展示一個正方形，左邊是個紅色的三角形，右邊是紫色的三角形，上面是黑色的三角形，下面是藍(lán)色的三角形。那么有人就會問，我們要的不是三角形么？你畫個正方形逗我呢？
我們對上面的樣式做些修改：
CSS Code復(fù)制內(nèi)容到剪貼板
1. .triangle{
2. width: 0;
3. height: 0;
4. border:50px transparent solid; /*這里我們將元素的邊框?qū)挾仍O(shè)置為50px，transparent表示邊框顏色是透明的，solid表示邊框是實線的*/
5. border-top-color: black; /*這里我們僅將上邊框的顏色設(shè)置為黑色，眾所周知，css后面的樣式代碼會覆蓋之前的相同的樣式代碼，至于其他三邊的還是透明色*/
6. /*border-bottom-color: black; /*這里設(shè)置底部邊框色為黑色*/
7. border-left-color: black; /*這里設(shè)置左邊邊框色為黑色*/
8. border-right-color:black*/ /*這里設(shè)置右邊邊框色為黑色*/
9. }
然后這時我們就會看到一個在頂部的方向向下的三角形。解釋已詳細(xì)的寫在css樣式的注釋里。
接下來我們加上:before：
CSS Code復(fù)制內(nèi)容到剪貼板
1. <style>
2. .test-div{
3. position: relative; /*日常相對定位*/
4. width:150px;
5. height:36px;
6. border-radius:5px;
7. border:black 1px solid;
8. background: rgba(245,245,245,1)
9. }
10. .test-div:before{
11. content: ""; /*:before和:after必帶技能，重要性為滿5顆星*/
12. display: block;
13. position: absolute; /*日常絕對定位*/
14. top:8px;
15. width: 0;
16. height: 0;
17. border:6px transparent solid;
18. left:-12px;
19. border-right-color: rgba(245,245,245,1);
20. }
21. </style>
22. <div class="test-div"></div>
通過以上代碼，我們將會看見一個類似微信/QQ的對話框樣式,但是美中不足的是，在對話框的四周的邊框不是完整的，而是在對話框的突出三角形上是木有邊框的，如何完整表示呢？完整代碼：
1. <style>
2. .test-div{
3. position: relative; /*日常相對定位*/
4. width:150px;
5. height: 36px;
6. border:black 1px solid;
7. border-radius:5px;
8. background: rgba(245,245,245,1)
9. }
10. .test-div:before,.test-div:after{
11. content: ""; /*:before和:after必帶技能，重要性為滿5顆星*/
12. display: block;
13. position: absolute; /*日常絕對定位*/
14. top:8px;
15. width: 0;
16. height: 0;
17. border:6px transparent solid;
18. }
19. .test-div:before{
20. left:-11px;
21. border-right-color: rgba(245,245,245,1);
22. z-index:1
23. }
24. .test-div:after{
25. left:-12px;
26. border-right-color: rgba(0,0,0,1);
27. z-index: 0
28. }
29. </style>
30. <div class="test-div"></div>
好了，完整的一個對話框樣式呈現(xiàn)在眼前了，至于對話框的小三角形的方向，相信大家看了上上段對于border介紹的代碼也都知道該怎么做了吧，沒錯，就是改下position的位置，改下border顯示顏色的方位
2.作為內(nèi)容的半透明背景層。
比如我們的需求是做一個半透明的登錄框吧(這里也是在代碼中通過注釋來解釋)：
1. <style>
2. body{
3. background: url(img/1.jpg) no-repeat left top /*這里本獸加了個圖片背景，用以區(qū)分背景的半透明及內(nèi)容的完全不透明*/
4. }
5. .test-div{
6. position: relative; /*日常相對定位(重要，下面內(nèi)容也會介紹)*/
7. width:300px;
8. height: 120px;
9. padding: 20px 10px;
10. font-weight: bold;
11. }
12. .test-div:before{
13. position: absolute; /*日常絕對定位(重要，下面內(nèi)容也會略帶介紹)*/
14. content: ""; /*:before和:after必帶技能，重要性為滿5顆星*/
15. top:0;
16. left: 0;
17. width: 100%; /*和內(nèi)容一樣的寬度*/
18. height: 100%; /*和內(nèi)容一樣的高度*/
19. background: rgba(255,255,255,.5); /*給定背景白色，透明度50%*/
20. z-index:-1 /*日常元素堆疊順序(重要，下面內(nèi)容也會略帶介紹)*/
21. }
22. </style>
23. <!--布局簡單寫寫-->
24. <div class="test-div">
25. <table>
26. <tr>
27. <td>Name</td>
28. <td><input placeholder="your name" /></td>
29. </tr>
30. <tr>
31. <td>Password</td>
32. <td><input placeholder="your password" /></td>
33. </tr>
34. <tr>
35. <td></td>
36. <td><input type="button" value="login" /></td>
37. </tr>
38. </table>
39. </div>
上面的代碼拷貝過去，加上張圖片可測試效果。
當(dāng)然，:bofore和:after也還有其他更多的巧妙用法，這里也不一一列出來了，這里放上一個用這兩個偽元素加上css3動畫實現(xiàn)一些比較好看及實用的動態(tài)效果的鏈接：HoverEffectIdeas
說完了:before和:after，再來寫一些其他的css樣式及布局注意點(可能大家不怎么注意，從而導(dǎo)致一些布局和樣式出問題)。
position 定位的問題
position屬性規(guī)定了元素的定位類型，默認(rèn)為static。
該屬性還可以有下值：
absolute：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進(jìn)行定位。
fixed：生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。
relative：生成相對定位的元素，相對于其正常位置進(jìn)行定位。
inherit：規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
代碼：
1. <!--position:absolute-->
2. <style>
3. body{
4. height: 2000px /*這里將body的高度設(shè)置為2000px是為了區(qū)分absolute和fixed的差別*/
5. }
6. .test-div{
7. position:absolute;
8. left:50px;
9. top:50px
10. }
11. </style>
12. <div class="test-div">Hello World</div>
13. <!--position:fixed-->
14. <style>
15. body{
16. height: 2000px /*這里將body的高度設(shè)置為2000px是為了區(qū)分absolute和fixed的差別*/
17. }
18. .test-div{
19. position:fixed;
20. left:50px;
21. top:50px
22. }
23. </style>
24. <div class="test-div">Hello World</div>
25. <!--position:relative + position:absolute-->
26. <style>
27. .out-div{
28. width: 300px;
29. height: 300px;
30. background: purple; /*這里定義個背景，讓我們知道這個div在哪*/
31. margin:50px 0px 0px 50px;
32. position: relative
33. }
34. .in-div{
35. position:absolute;
36. left:50px;
37. top:50px
38. }
39. </style>
40. <div class="out-div">
41. <div class="in-div">Hello World</div>
42. </div>
43.
z-index 元素堆疊排序
z-index用于設(shè)置或檢索對象的堆疊順序，對應(yīng)的腳本特性為zIndex。
z-index的數(shù)值越大，該元素的堆疊層級越高。
代碼：
1. <style>
2. .first-div{
3. width: 300px;
4. height: 300px;
5. background: purple; /*這里定義個背景，讓我們知道這個div在哪*/
6. position: absolute;
7. left:50px;
8. top:50px;
9. z-index: 1
10. }
11. .second-div{
12. position:absolute;
13. left:80px;
14. top:80px;
15. width:50px;
16. height: 50px;
17. background: white;
18. z-index: 2
19. }
20. </style>
21. <div class="first-div"></div>
22. <div class="second-div"></div>
這里我們將第一個div和第二個div位置放到一起，方便看z-index的效果。以上代碼的樣式是紫色的正方形里面有個白色的小正方形。因為小正方形的z-index大于大正方形的z-index，所以能顯示出，當(dāng)我們把.first-div的z-index設(shè)置為3，這時候就看不到白色的小正方形了，它被紫色的大正方形擋掉了…
zoom 元素縮放比例
zoom適用于所有元素，用于設(shè)置或檢索對象的縮放比例，對應(yīng)的腳本特性為zoom，原比例的值是1。
代碼：
1. <style>
2. .first-div{
3. width: 100px;
4. height: 100px;
5. background: purple;
6. zoom:1.5;
7. float: left
8. }
9. .second-div{
10. width: 100px;
11. height: 100px;
12. background: black;
13. zoom:1;
14. float:left
15. }
16. .third-div{
17. width: 100px;
18. height: 100px;
19. background: red;
20. zoom:.5;
21. float:left
22. }
23. </style>
24. <div class="first-div"></div>
25. <div class="second-div"></div>
26. <div class="third-div"></div>
以上代碼將會展示的依次是紫色-黑色-紅色的div，大小分別是100px的1.5倍，1倍，0.5倍。
em 和 rem 是什么
1em等于當(dāng)前的字體尺寸，數(shù)值的改變意味著字體大小的調(diào)整。em 有繼承這個特性，也就是說，外部父元素定義了字體的em大小，內(nèi)部子元素會繼承這一屬性的樣式。
rem = root em 。顧名思義，root即根部的，頂部的。也就是根部的em，這個根部指的是HTML根元素。所以rem的大小是針對HTML根元素的大小做字體的相對大小的調(diào)整。
代碼：
1. <style>
2. body{
3. font-size: 12px;
4. }
5. /*html{
6. font-size: 12px;
7. }*/
8. .first-div{
9. width: 200px;
10. height: 100px;
11. font-size: 1em;
12. float: left
13. }
14. .second-div{
15. width: 200px;
16. height: 100px;
17. font-size: 2em;
18. float:left
19. }
20. .third-div{
21. width: 200px;
22. height: 100px;
23. font-size: 1rem;
24. float:left
25. }
26. .fourth-div{
27. width: 200px;
28. height: 100px;
29. font-size: 2rem;
30. float:left
31. }
32. </style>
33. <div class="first-div">Hello World</div>
34. <div class="second-div">Hello World</div>
35. <div class="third-div">Hello World</div>
36. <div class="fourth-div">Hello World</div>
以上代碼分別展示了不同大小的字體，em和rem的區(qū)別可以通過僅僅注釋body字體樣式和html字體樣式來看看他們之間的差別。
【 微信掃一掃 】
