僞元素能作什麼?咱們要他有何用?它能爲咱們解決什麼問題?和其餘的方法相比她有什麼有點?咱們爲何要使用它?css
僞元素和僞類同樣,添加到選擇器,可是不是描述狀態,他容許咱們爲元素某些部分設置樣式;利用僞元素,咱們能夠簡化頁面的html標籤,同時用起來也很方便,善於使用僞元素可讓你的頁面更加地簡潔優雅。之因此叫僞元素,是由於他修飾不在文檔樹中的部分;不是真實存在的;html
僞元素實用小技巧
git
何謂清除浮動—?一個父元素的全部子元素若是都是浮動的,那麼這個父元素是沒有高度的;父元素並無脫離正常的文檔流,仍然佔據正常文檔流的空間;github
- 若是這個父元素的相鄰元素是行內元素,那麼這個行內元素將會在這個父元素的區域內見縫插針,找到一塊放得下它的地方
- 若是相鄰的元素是一個塊級元素,那麼設置這個塊級元素的margin-top將會以這個父元素的起始位置做爲起點。
問題:如何解決高度塌陷?瀏覽器
方法:把父容器的高度撐起來,考慮到浮動了的元素並無脫離正常文檔流,而其它元素會圍繞着它環繞,因此清除浮動簡單有效的辦法就是讓環繞的元素不可環繞,把它變成一把尺子,放在最後面,把全部浮動的元素頂起來,而這把尺子就是一個設置了clear的塊級元素。由於塊級元素會換行,而且設置它兩邊不能跟着浮動的元素,因此它就跑到浮動元素的下面去,就像一把尺子把浮動元素的內容給頂起來了。而這個能夠用一個after實現,由於after就是最後一個子元素:佈局
.clearfix:after{ content: ""; display: block; clear:both; }
<img src='img/or.png'/>學習
在開發中若是咱們遇到相似這樣的需求咱們?咱們應該如何只用一個簡單的css元素去實現他?spa
方案:一個p標籤,左右兩條線用before和after畫出來:code
<img src='img/or1.png'/>orm
動態的計算商品的數量,咱們常常會借用js來實現;我想告訴css也能實現這個效果,他比js用起來簡單多了
1.counter-reset: 屬性建立或者重置一個或多個計數器;
2.counter-increment: 屬性遞增一個或多個計數器值;
3.content: 與:before 及:after 僞元素配合使用,來插入生成內容。
沒有用到一行js代碼,你能夠試一試;這個主要是結合:checked和counter,用before/after純CSS實現的,這種純粹是炫技;
有沒有辦法只讓容器的形狀傾斜而保持其內容不變呢?或許你會想到嵌套兩層元素,外層skew(),對內容在應用一次反相skew變形,從而抵消變形的效果。可是意味着咱們不得不使用一層額外的HTML元素包裹內容.有些累贅
解決方案:僞元素,把樣式應用到僞元素上,對僞元素進行變形,再把僞元素定位+層級放到到住宿元素下面
光說不練,假把式試一試
在網頁中咱們常常見到梯形形狀的標籤頁,常見的技巧都是比較雜亂,或者說難以維護的,那他們是如何實現的呢?
解決方案: 三維世界中旋轉一個矩形,因爲透視關係,咱們在二維圖像上看到一個梯形,再結合平行四邊實現的方法便能實現
perspective: 觀察者與z=0平面的距離;
對元素使用了3D變形以後,其內部的變形效應是"不可逆轉的",和2D變形不一樣(2D變形內部的逆向變形能夠抵消外部的變形效應);
爲了讓他的尺寸更好掌握,咱們能夠爲他指定transform-origin:bottom;也可用scale()對他在進行美觀操做;
如何實現下列這種多列均勻佈局:
經過給僞元素 :after 設置 inline-block 設置寬度 100% ,配合容器的 text-align: justify 就能夠輕鬆實現多列均勻佈局了。
那麼爲何使用了 :after 僞元素以後就能夠實現對齊了呢?
緣由在於 justify 只有在存在第二行的狀況下,第一行才兩端對齊,因此在這裏,咱們須要製造一個假的第二行,而 :after 僞元素正好再適合不過。
須要注意的是img/input等單標籤是沒有before/after僞元素的,由於它們自己是不能夠有子元素,若是你給img添加一個before,那麼會被瀏覽器忽略。
僞元素能實現的功能不少!歡迎你們在評論底下一一補充
歡迎學習交流sunseekers