成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS（一）偽元素的巧用

entner / 1921人閱讀

摘要：并且，一些偽元素可以使開發(fā)者獲取到不存在于源文檔中的內(nèi)容比如常見的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類使用一個冒號例如。就本文而言，我們將把我們探討的范圍限制在和這兩個偽元素的巧用上。

作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：“l(fā)ove 與 hate 糾纏不休”,大家都懂的吧。。。。

? ?????偽類和偽元素都是CSS1和CSS2中的概念，CSS1和CSS2中對偽類的偽元素的區(qū)別比較模糊，甚至經(jīng)常有同行將:before、:after稱為偽類。CSS3對這兩個概念做了相對較清晰地概念，并且在語法上也很明顯的講二者區(qū)別開。

偽類————pseudo classes 
CSS3對偽類的定義
? ?????偽類存在的意義是為了通過選擇器找到那些不存在與DOM樹中的信息以及不能被常規(guī)CSS選擇器獲取到的信息；任何常規(guī)選擇器可以在任何位置使用偽類。


CSS3對偽元素的定義
? ?????偽元素在DOM樹中創(chuàng)建了一些抽象元素，這些抽象元素是不存在于文檔語言里的（可以理解為html源碼）。比如：documen接口不提供訪問元素內(nèi)容的第一個字或者第一行的機(jī)制，而偽元素可以使開發(fā)者可以提取到這些信息。并且，一些偽元素可以使開發(fā)者獲取到不存在于源文檔中的內(nèi)容(比如常見的::before,::after)還可以為偽元素定制樣式。。

? ?????偽類用于將特殊的效果添加到某些選擇器。偽元素代表了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻并不實(shí)際存在于文檔樹中;
? ?????CSS3中的偽元素使用兩個冒號例如::first-line（當(dāng)然為了向下兼容，用一個冒號也是可以的，大多數(shù)瀏覽器都支持這兩種表示方式。CSS3中新增加的偽元素必須用::）,偽類使用一個冒號例如：hover。

巧用 
? ?????所有偽元素能實(shí)現(xiàn)的，真實(shí)子元素都可以做到。只不過有時候單純是為了樣式和布局就改變html結(jié)構(gòu)，這樣的做法不干凈，不值得提倡，所以偽元素有了用武之地。

就本文而言，我們將把我們探討的范圍限制在::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: #ffffd;
 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: #ffffd;
 float: right;
 position: relative;
 bottom: 40px;
 border-radius: 25px;
 height: 25px;
 width: 25px;
}

3. 接下來重點(diǎn)講解下結(jié)合動畫用偽元素實(shí)現(xiàn)以下效果

#html代碼

    

        
        
    


#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標(biāo)簽中添加額外的標(biāo)簽,而不用img::before?

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

Q2:為什么要為所有元素設(shè)置box-sizing: border-box;?

為使得calc(100%)計算值正好等于圖片的總寬高值，而不是內(nèi)容的寬高值

Q3:為什么要設(shè)置transition-delay: .2s;

以原理圖中右下方.dynamic-border::after：為例，由于左下方span:after的動畫持續(xù)時間為.2s，所以設(shè)置.dynamic-border::after：transition-delay: .2s使得動畫平穩(wěn)過渡更好地銜接sapn:after;

Q1:cal(100% + 2px)?

2px為紅色邊框?qū)挾?，注?號前后必須要有空格

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116616.html

相關(guān)文章

  • Proxy 的巧用

    摘要：為了保證的可讀性，本文采用意譯而非直譯。對象的所有用法，都是上面的這種形式。其中用來生成實(shí)例，是表示所要攔截的對象，是用來定制攔截行為的對象。雖然不同的創(chuàng)建模式支持類似的功能，但無法用隱式初始值包裝對象。 為了保證的可讀性，本文采用意譯而非直譯。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ Proxy 介紹 使用Proxy，你可以將一只貓偽裝成一只老虎。下面大...

    feng409 評論0 收藏0

  • Proxy 的巧用

    摘要：為了保證的可讀性，本文采用意譯而非直譯。對象的所有用法，都是上面的這種形式。其中用來生成實(shí)例，是表示所要攔截的對象，是用來定制攔截行為的對象。雖然不同的創(chuàng)建模式支持類似的功能，但無法用隱式初始值包裝對象。 為了保證的可讀性，本文采用意譯而非直譯。 想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！ Proxy 介紹 使用Proxy，你可以將一只貓偽裝成一只老虎。下面大...

    FreeZinG 評論0 收藏0

  • 異或運(yùn)算的巧用 → 不用額外的變量，如何交換兩個變量的值？

    摘要：開心一刻兩頭奶牛在一起吃草，其中一頭奶牛甲越吃越慢，一副若有所思的模樣，另一頭奶牛奶牛乙發(fā)覺了，開始了對話奶牛乙擱那合計啥呢奶牛甲你幫我合計合計奶牛乙咋地了奶牛甲我吃的是草，擠出來的是奶，也就是說我把沒用的變成有用的了奶牛乙是這個事奶牛甲人開心一刻　　兩頭奶牛在一起吃草，其中一頭（奶牛甲）越吃越慢，一副若有所思的模樣，另一頭奶牛（奶牛乙）發(fā)覺了，開始了對話　　奶牛乙：擱那合計啥呢？　　奶牛甲...

    不知名網(wǎng)友 評論0 收藏0

  • CSS3-transition常用屬性及示例

    摘要：主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進(jìn)展情況，解釋下注意值可以中定義自己的值，如過渡效果開始前的延遲時間，單位秒或者毫秒與的巧用示例元素上浮示例元素上浮后續(xù)還會繼續(xù)補(bǔ)充，真心強(qiáng)大transition參數(shù) 語法 transition: property duration timing-function delay transition屬性是個復(fù)合屬性，她包括以下幾個子屬性： ...

    derek_334892 評論0 收藏0

  • 巧用margin/padding的百分比值實(shí)現(xiàn)高度自適應(yīng)（多用于占位，避免閃爍）

    摘要：那想要優(yōu)化這一點(diǎn)，唯一的方法就是利用內(nèi)容高度來撐開而非，這個方案跟消除浮動所用的方案非常相似給容器添加一個子元素偽元素，并把子元素偽元素的設(shè)為，使其實(shí)際高度相當(dāng)于容器的寬度，如此一來，便能把容器的高度撐至與寬度一致了。 一個基礎(chǔ)卻又容易混淆的css知識點(diǎn) 本文依賴于一個基礎(chǔ)卻又容易混淆的css知識點(diǎn)：當(dāng)margin/padding取形式為百分比的值時，無論是left/right，還是t...

    wenzi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<