資訊專欄INFORMATION COLUMN
摘要：偽元素偽元素能做什么我們要他有何用它能為我們解決什么問題和其他的方法相比她有什么有點我們?yōu)槭裁匆褂盟鼈卧睾蛡晤愐粯樱砑拥竭x擇器，但是不是描述狀態(tài)，他允許我們?yōu)樵啬承┎糠衷O(shè)置樣式利用偽元素，我們可以簡化頁面的標簽，同時用起來也很方便，
偽元素
偽元素能做什么？我們要他有何用？它能為我們解決什么問題？和其他的方法相比她有什么有點？我們?yōu)槭裁匆褂盟?/b>
偽元素和偽類一樣，添加到選擇器，但是不是描述狀態(tài)，他允許我們?yōu)樵啬承┎糠衷O(shè)置樣式；利用偽元素，我們可以簡化頁面的html標簽，同時用起來也很方便，善于使用偽元素可以讓你的頁面更加地簡潔優(yōu)雅。之所以叫偽元素，是因為他修飾不在文檔樹中的部分；不是真實存在的；
偽元素實用小技巧
何謂清除浮動—？一個父元素的所有子元素如果都是浮動的，那么這個父元素是沒有高度的;父元素并沒有脫離正常的文檔流，仍然占據(jù)正常文檔流的空間;
如果這個父元素的相鄰元素是行內(nèi)元素，那么這個行內(nèi)元素將會在這個父元素的區(qū)域內(nèi)見縫插針，找到一塊放得下它的地方
如果相鄰的元素是一個塊級元素，那么設(shè)置這個塊級元素的margin-top將會以這個父元素的起始位置作為起點。
問題：如何解決高度塌陷？
方法：把父容器的高度撐起來，考慮到浮動了的元素并沒有脫離正常文檔流，而其它元素會圍繞著它環(huán)繞，所以清除浮動簡單有效的辦法就是讓環(huán)繞的元素不可環(huán)繞，把它變成一把尺子，放在最后面，把所有浮動的元素頂起來，而這把尺子就是一個設(shè)置了clear的塊級元素。因為塊級元素會換行，并且設(shè)置它兩邊不能跟著浮動的元素，所以它就跑到浮動元素的下面去，就像一把尺子把浮動元素的內(nèi)容給頂起來了。而這個可以用一個after實現(xiàn)，因為after就是最后一個子元素：
.clearfix:after{
content: "";
display: block;
clear:both;
}
2.畫分割線
在開發(fā)中如果我們遇到類似這樣的需求我們？我們應(yīng)該如何只用一個簡單的css元素去實現(xiàn)他？
方案：一個p標簽,左右兩條線用before和after畫出來：
3.計數(shù)器動態(tài)的計算商品的數(shù)量，我們經(jīng)常會借用js來實現(xiàn)；我想告訴css也能實現(xiàn)這個效果，他比js用起來簡單多了
1.counter-reset: 屬性創(chuàng)建或者重置一個或多個計數(shù)器；
2.counter-increment: 屬性遞增一個或多個計數(shù)器值；
3.content: 與:before 及:after 偽元素配合使用，來插入生成內(nèi)容。
沒有用到一行js代碼，你可以試一試;這個主要是結(jié)合:checked和counter，用before/after純CSS實現(xiàn)的，這種純粹是炫技；
4.平行四邊形有沒有辦法只讓容器的形狀傾斜而保持其內(nèi)容不變呢？或許你會想到嵌套兩層元素，外層skew（）,對內(nèi)容在應(yīng)用一次反相skew變形，從而抵消變形的效果。但是意味著我們不得不使用一層額外的HTML元素包裹內(nèi)容.有些累贅
解決方案：偽元素，把樣式應(yīng)用到偽元素上，對偽元素進行變形，再把偽元素定位+層級放到到住宿元素下面
光說不練，假把式試一試
梯形標簽頁
在網(wǎng)頁中我們經(jīng)常見到梯形形狀的標簽頁，常見的技巧都是比較雜亂，或者說難以維護的，那他們是如何實現(xiàn)的呢？
解決方案： 三維世界中旋轉(zhuǎn)一個矩形，由于透視關(guān)系，我們在二維圖像上看到一個梯形，再結(jié)合平行四邊實現(xiàn)的方法便能實現(xiàn)
perspective: 觀察者與z=0平面的距離;
對元素使用了3D變形之后，其內(nèi)部的變形效應(yīng)是"不可逆轉(zhuǎn)的"，和2D變形不同（2D變形內(nèi)部的逆向變形可以抵消外部的變形效應(yīng)）；
為了讓他的尺寸更好掌握，我們可以為他指定transform-origin：bottom;也可用scale()對他在進行美觀操作；
試一試
6 多列均勻布局如何實現(xiàn)下列這種多列均勻布局：
通過給偽元素 :after 設(shè)置 inline-block 設(shè)置寬度 100% ，配合容器的 text-align: justify 就可以輕松實現(xiàn)多列均勻布局了。
那么為什么使用了 :after 偽元素之后就可以實現(xiàn)對齊了呢？
原因在于 justify 只有在存在第二行的情況下，第一行才兩端對齊，所以在這里，我們需要制造一個假的第二行，而 :after 偽元素正好再適合不過。
需要注意的是img/input等單標簽是沒有before/after偽元素的，因為它們本身是不可以有子元素，如果你給img添加一個before，那么會被瀏覽器忽略。
偽元素能實現(xiàn)的功能很多！歡迎大家在評論底下一一補充
歡迎學(xué)習(xí)交流sunseekers
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89546.html
摘要：偽元素偽元素能做什么我們要他有何用它能為我們解決什么問題和其他的方法相比她有什么有點我們?yōu)槭裁匆褂盟鼈卧睾蛡晤愐粯樱砑拥竭x擇器，但是不是描述狀態(tài)，他允許我們?yōu)樵啬承┎糠衷O(shè)置樣式利用偽元素，我們可以簡化頁面的標簽，同時用起來也很方便， 偽元素 偽元素能做什么？我們要他有何用？它能為我們解決什么問題？和其他的方法相比她有什么有點？我們?yōu)槭裁匆褂盟?偽元素和偽類一樣，添加到選擇器...
摘要：偽元素偽元素能做什么我們要他有何用它能為我們解決什么問題和其他的方法相比她有什么有點我們?yōu)槭裁匆褂盟鼈卧睾蛡晤愐粯樱砑拥竭x擇器，但是不是描述狀態(tài)，他允許我們?yōu)樵啬承┎糠衷O(shè)置樣式利用偽元素，我們可以簡化頁面的標簽，同時用起來也很方便， 偽元素 偽元素能做什么？我們要他有何用？它能為我們解決什么問題？和其他的方法相比她有什么有點？我們?yōu)槭裁匆褂盟?偽元素和偽類一樣，添加到選擇器...
摘要：本文首發(fā)于我的博客在前面兩篇文章你不知道的一和你不知道的二中大致介紹了一些方面比較隱晦的但又很實用的技巧。系列文章你不知道的一你不知道的二本文首發(fā)于我的博客 本文首發(fā)于我的博客 在前面兩篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介紹了一些CSS方面比較隱晦的但又很實用的技巧。相信這些技巧會為大家在項目實踐中帶來一定的幫助，本文作為《你不知道的CSS》系列的第三篇...
摘要：本周于上海閉幕，掘金和知乎上都有對應(yīng)的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實踐 本文的所列是實踐當(dāng)中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團隊發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
摘要：本周于上海閉幕，掘金和知乎上都有對應(yīng)的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實踐 本文的所列是實踐當(dāng)中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團隊發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...
閱讀 1038·2021-11-15 18:11
閱讀 3161·2021-09-22 15:33
閱讀 3458·2021-09-01 11:42
閱讀 2653·2021-08-24 10:03
閱讀 3614·2021-07-29 13:50
閱讀 2925·2019-08-30 14:08
閱讀 1273·2019-08-28 17:56
閱讀 2258·2019-08-26 13:57
