真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

CSS中的偽類after是怎樣的

這篇文章將為大家詳細(xì)講解有關(guān)CSS中的偽類after是怎樣的，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比汨羅網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式汨羅網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋汨羅地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。


1. 引子

前段時(shí)間學(xué)習(xí) web 布局的時(shí)候，因?yàn)橐酶?dòng) float 屬性，所以就順理成章地碰到了清除浮動(dòng) clear 屬性。教學(xué)的案例中是用新建一個(gè)空的 div 標(biāo)簽的方式來(lái)清除浮動(dòng)的，主要代碼如下：

CSS 

  1.    
    
        
        
           .mainBox    {        width:960px;        margin:0 auto;        background-color:#CFF;        overflow:visible;    }    .leftBox    {        width:740px;        height:300px;        background-color:#C9F;        float:left;    }    .rightBox    {        width:210px;        height:300px;        background-color:#FCF;        float:rightright;    }    .clear   {        clear:both;        height:0;/*解決IE6下有高度的問題*/       overflow:hidden;    }

看到之后，想到以前見到過有用 css 偽類 after 來(lái)進(jìn)行清除浮動(dòng)的方式。記不太清了，于是寫成了如下的情況：

CSS 

  1.    
       
       
   
  
.mainBox{   
    width:960px;   
    background-color:#CFF;   
    margin:0 auto;   
    }   
.leftBox{   
    width:740px;   
    height:300px;   
    background-color:#C9F;   
    float:left;   
}   
.rightBox{   
    width:210px;   
    height:300px;   
    background-color:#FCF;   
    float:rightright;   
}   
.rightBox:after{   
    clear:both;   
    content:".";   
    visibility:hidden;   
    display:block;   
    height:0;   
    overflow:hidden;   
}

悲劇發(fā)生了，mainBox 中的 #CFF 顏色并沒有出現(xiàn)在 leftBox 和 rightBox 中間，說明上述的寫法有地方不對(duì)了。詢問了偉大的谷歌之后才發(fā)現(xiàn)，css 的 after 偽類應(yīng)該寫在 mainBox 之后，即：

CSS 

  1. .mainBox:after{   
    clear:both;   
    content:".";   
    visibility:hidden;   
    display:block;   
    height:0;   
    overflow:hidden;   
}

    P.S.
    1. 現(xiàn)在回過頭來(lái)看上述方法，其實(shí)上述方法所謂的清除浮動(dòng)，都是將沒有設(shè)置高度的.mainBox的高度撐起來(lái)，從而使得.mainBox的弟元素能直接跟在.mainBox后面。而不會(huì)因?yàn)?mainBox高度塌陷而被隱藏在.mainBox內(nèi)部浮動(dòng)的子元素下。防止高度塌陷還可以使用創(chuàng)建一個(gè) BFC 的方法（如overflow:hidden）來(lái)進(jìn)行。
    2. 如果.mainBox設(shè)置了高度，且大于或等于其浮動(dòng)的子元素，那么不用這樣的清除浮動(dòng)的方式，.mainBox的弟元素也不會(huì)受到.mainBox內(nèi)部浮動(dòng)子元素的影響。
    3. 若果不考慮.mainBox的高度塌陷問題，直接在其弟元素處設(shè)置clear屬性即可。

2. 關(guān)于 after 的思考

w3school 中關(guān)于 after 偽類的介紹如下：

    定義和用法
    :after 選擇器在被選元素的內(nèi)容后面插入內(nèi)容。
    請(qǐng)使用 content 屬性來(lái)指定要插入的內(nèi)容。

比較有歧義的是這個(gè)“被選元素的內(nèi)容后面”中的 后面 兩個(gè)字。開始我誤認(rèn)為了是將 after 中的內(nèi)容插入至被選元素的 弟元素 位置上。

CSS 

  1. .rightBox:after{   

  2.     content:"我是after";   

  3.     display:block  

  4. }  

會(huì)產(chǎn)生類似于

CSS 

  1.   

  2. 我是after
      

這樣的效果 （當(dāng)然，after 偽類實(shí)際上是不會(huì)產(chǎn)生一個(gè) DOM 元素的）。

但通過引子中用 css 偽類 after 來(lái)進(jìn)行清除浮動(dòng)的檢驗(yàn)，發(fā)現(xiàn) 后面 實(shí)際上應(yīng)該理解為將 after 中的內(nèi)容插入至被選元素的 子元素 位置上，即類似于如下效果：

CSS 

  1.   

  2.     

    我是after
      

  3.   

因此，才有了引子中用 mainBox:after{} 這樣的方式來(lái)實(shí)現(xiàn) after 偽類清除浮動(dòng)，而非 rightBox:after{}這種方式。

簡(jiǎn)單總結(jié)下：after 偽類所產(chǎn)生的內(nèi)容應(yīng)該是在被選元素的子元素位置(而且在所有子元素的最后，簡(jiǎn)單的幾個(gè)測(cè)試就能發(fā)現(xiàn)，不再贅述)，而非被選元素的弟元素位置。
3. w3school 中的示例

從這個(gè) 示例 可以看出，after 偽類內(nèi)容的默認(rèn) display 方式應(yīng)該為內(nèi)聯(lián) inline。

其實(shí)看到這個(gè)示例才發(fā)現(xiàn)，after 偽類所產(chǎn)生的內(nèi)容應(yīng)該就是在被選元素的子元素位置的（汗，那還饒了那么大個(gè)圈才發(fā)現(xiàn)……）。示例中 p 標(biāo)簽的 after 內(nèi)容展現(xiàn)的方式已經(jīng)很明確了，大家可以仔細(xì)體會(huì)下。所以說，看示例也是很重要啊。

關(guān)于CSS中的偽類after是怎樣的就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。


當(dāng)前名稱：CSS中的偽類after是怎樣的
轉(zhuǎn)載注明：http://weahome.cn/article/jshhoe.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部