我不知道你知不知道我知道的僞元素小技巧

僞元素

僞元素能作什麼?咱們要他有何用?它能爲咱們解決什麼問題?和其餘的方法相比她有什麼有點?咱們爲何要使用它?css

僞元素和僞類同樣,添加到選擇器,可是不是描述狀態,他容許咱們爲元素某些部分設置樣式;利用僞元素,咱們能夠簡化頁面的html標籤,同時用起來也很方便,善於使用僞元素可讓你的頁面更加地簡潔優雅。之因此叫僞元素,是由於他修飾不在文檔樹中的部分;不是真實存在的;html

<img src='img/after.png'/>

僞元素實用小技巧
<img src='img/before.png'/>git

1.清除浮動

何謂清除浮動—?一個父元素的全部子元素若是都是浮動的,那麼這個父元素是沒有高度的;父元素並無脫離正常的文檔流,仍然佔據正常文檔流的空間;github

  1. 若是這個父元素的相鄰元素是行內元素,那麼這個行內元素將會在這個父元素的區域內見縫插針,找到一塊放得下它的地方
  2. 若是相鄰的元素是一個塊級元素,那麼設置這個塊級元素的margin-top將會以這個父元素的起始位置做爲起點。

問題:如何解決高度塌陷?瀏覽器

方法:把父容器的高度撐起來,考慮到浮動了的元素並無脫離正常文檔流,而其它元素會圍繞着它環繞,因此清除浮動簡單有效的辦法就是讓環繞的元素不可環繞,把它變成一把尺子,放在最後面,把全部浮動的元素頂起來,而這把尺子就是一個設置了clear的塊級元素。由於塊級元素會換行,而且設置它兩邊不能跟着浮動的元素,因此它就跑到浮動元素的下面去,就像一把尺子把浮動元素的內容給頂起來了。而這個能夠用一個after實現,由於after就是最後一個子元素:佈局

.clearfix:after{
    content: "";
    display: block;
    clear:both;
}

2.畫分割線

<img src='img/or.png'/>學習

在開發中若是咱們遇到相似這樣的需求咱們?咱們應該如何只用一個簡單的css元素去實現他?spa

方案:一個p標籤,左右兩條線用before和after畫出來:code

<img src='img/or1.png'/>orm

3.計數器

動態的計算商品的數量,咱們常常會借用js來實現;我想告訴css也能實現這個效果,他比js用起來簡單多了

&lt;img src='img/content.png'/&gt;

1.counter-reset: 屬性建立或者重置一個或多個計數器;

2.counter-increment: 屬性遞增一個或多個計數器值;

3.content: 與:before 及:after 僞元素配合使用,來插入生成內容。

&lt;img src='img/counter.png'/&gt;

沒有用到一行js代碼,你能夠試一試;這個主要是結合:checked和counter,用before/after純CSS實現的,這種純粹是炫技;

4.平行四邊形

有沒有辦法只讓容器的形狀傾斜而保持其內容不變呢?或許你會想到嵌套兩層元素,外層skew(),對內容在應用一次反相skew變形,從而抵消變形的效果。可是意味着咱們不得不使用一層額外的HTML元素包裹內容.有些累贅

解決方案:僞元素,把樣式應用到僞元素上,對僞元素進行變形,再把僞元素定位+層級放到到住宿元素下面

光說不練,假把式試一試

  1. 梯形標籤頁

在網頁中咱們常常見到梯形形狀的標籤頁,常見的技巧都是比較雜亂,或者說難以維護的,那他們是如何實現的呢?

解決方案: 三維世界中旋轉一個矩形,因爲透視關係,咱們在二維圖像上看到一個梯形,再結合平行四邊實現的方法便能實現

perspective: 觀察者與z=0平面的距離;

對元素使用了3D變形以後,其內部的變形效應是"不可逆轉的",和2D變形不一樣(2D變形內部的逆向變形能夠抵消外部的變形效應);

爲了讓他的尺寸更好掌握,咱們能夠爲他指定transform-origin:bottom;也可用scale()對他在進行美觀操做;

![](https://user-gold-cdn.xitu.io/2017/10/23/e9b1f3b61eae6f84430713c7ad097e58)

圖片描述

試一試

6 多列均勻佈局

如何實現下列這種多列均勻佈局:
&lt;img src='img/center.png'/&gt;

經過給僞元素 :after 設置 inline-block 設置寬度 100% ,配合容器的 text-align: justify 就能夠輕鬆實現多列均勻佈局了。

那麼爲何使用了 :after 僞元素以後就能夠實現對齊了呢?

緣由在於 justify 只有在存在第二行的狀況下,第一行才兩端對齊,因此在這裏,咱們須要製造一個假的第二行,而 :after 僞元素正好再適合不過。
&lt;img src='img/conter1.png'/&gt;

須要注意的是img/input等單標籤是沒有before/after僞元素的,由於它們自己是不能夠有子元素,若是你給img添加一個before,那麼會被瀏覽器忽略。

僞元素能實現的功能不少!歡迎你們在評論底下一一補充

歡迎學習交流sunseekers

相關文章
相關標籤/搜索