CSS（一）僞元素的巧用

做爲一門前端er,你確定熟知 a:hover     a:visited.....我還記得在小本本上記着訣竅：「love 與 hate 糾纏不休」,你們都懂的吧。。。。

       僞類和僞元素都是CSS1和CSS2中的概念，CSS1和CSS2中對僞類的僞元素的區別比較模糊，甚至常常有同行將:before、:after稱爲僞類。CSS3對這兩個概念作了相對較清晰地概念，而且在語法上也很明顯的講兩者區別開。

僞類————pseudo classes

CSS3對僞類的定義
       僞類存在的意義是爲了經過選擇器找到那些不存在與DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息；任何常規選擇器能夠在任何位置使用僞類。

CSS3對僞元素的定義
       僞元素在DOM樹中建立了一些抽象元素，這些抽象元素是不存在於文檔語言裏的（能夠理解爲html源碼）。好比：documen接口不提供訪問元素內容的第一個字或者第一行的機制，而僞元素可使開發者能夠提取到這些信息。而且，一些僞元素可使開發者獲取到不存在於源文檔中的內容(好比常見的::before,::after)還能夠爲僞元素定製樣式。。

       僞類用於將特殊的效果添加到某些選擇器。僞元素表明了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻並不實際存在於文檔樹中;
       CSS3中的僞元素使用兩個冒號例如::first-line（固然爲了向下兼容，用一個冒號也是能夠的，大多數瀏覽器都支持這兩種表示方式。CSS3中新增長的僞元素必須用::）,僞類使用一個冒號例如：hover。

巧用

       全部僞元素能實現的，真實子元素均可以作到。只不過有時候單純是爲了樣式和佈局就改變html結構，這樣的作法不乾淨，不值得提倡，因此僞元素有了用武之地。

就本文而言，咱們將把咱們探討的範圍限制在::before 和 ::after這兩個僞元素的巧用上。

1. 清除浮動

#你們最熟悉的巧用
       
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}

.clearfix { 
  *zoom:1;
}

2.爲元素添加額外的符號

div:before {
 content: open-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ddd;
 float: left;
 position: relative;
 top: 30px;
 border-radius: 25px;
 height: 25px;
 width: 25px;
}
div:after {
 content: close-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ddd;
 float: right;
 position: relative;
 bottom: 40px;
 border-radius: 25px;
 height: 25px;
 width: 25px;
}

3. 接下來重點講解下結合動畫用僞元素實現如下效果

#html代碼

    <div class="dynamic-border dynamic-border-1">
        <span></span>
        <img src="../../common/Images/girl.jpg" alt="">
    </div>

#css代碼
    *,
    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    img {
        display: block;
        }
    .dynamic-border {
        position: relative;
        width: 200px;
        height: 200px;
        background: gray;
        margin: 0 auto;
        cursor: pointer;
        }
            
    .dynamic-border:before,
    .dynamic-border:after,
    .dynamic-border span:first-child:before,
    .dynamic-border span:first-child:after { 
        content: "";
        position: absolute;
        background: red;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        }
    /*上邊*/
    .dynamic-border:before {
        width: 0;
        top: -2px;
        right: 0;
        height: 2px;
        }
    /* 右邊*/
    .dynamic-border:after {
        width: 2px;
        height: 0;
        right: -2px;
        bottom: 0;
        }
    /*下邊 */
    .dynamic-border span:first-child:before {
        width: 0;
        height: 2px;
        bottom: -2px;
        left: 0;
        }
    .dynamic-border span:first-child:after {
        width: 2px;
        height: 0;
        top: 0;
        left: -2px;
        }
    .dynamic-border:hover:before,
    .dynamic-border:hover span:first-child:before { 
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        }
            
    .dynamic-border:hover:before,
    .dynamic-border:hover span:first-child:before {
        width: calc(100% + 2px);   
        }
        
    .dynamic-border:hover:after,
    .dynamic-border:hover span:first-child:after {
        height: calc(100% + 2px);
        }

解析

Q:原理圖?

Q1:爲何要在htm標籤中添加額外的標籤<sapn>,而不用img::before?

img不支持元素::before和::after

Q2:爲何要爲全部元素設置box-sizing: border-box;?

爲使得calc(100%)計算值正好等於圖片的總寬高值，而不是內容的寬高值

Q3:爲何要設置transition-delay: .2s;

以原理圖中右下方.dynamic-border::after：爲例，因爲左下方span:after的動畫持續時間爲.2s，因此設置.dynamic-border::after：transition-delay: .2s使得動畫平穩過渡更好地銜接sapn:after;

Q1:cal(100% + 2px)?

2px爲紅色邊框寬度，注意+號先後必需要有空格