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

資訊專欄INFORMATION COLUMN

淺談 CSS 中的偽類 after

shinezejian / 1418人閱讀

摘要：而不會(huì)因?yàn)楦叨人荻浑[藏在內(nèi)部浮動(dòng)的子元素下。若果不考慮的高度塌陷問題，直接在其弟元素處設(shè)置屬性即可。開始我誤認(rèn)為了是將中的內(nèi)容插入至被選元素的弟元素位置上。中的示例從這個(gè)示例可以看出，偽類內(nèi)容的默認(rèn)方式應(yīng)該為內(nèi)聯(lián)。

1. 引子

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

html

    

    

    




css.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:right;
}
.clear
{
    clear:both;
    height:0;/*解決IE6下有高度的問題*/
    overflow:hidden;
}

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

html

    

    




css.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:right;
}
.rightBox:after{
    clear:both;
    content:".";
    visibility:hidden;
    display:block;
    height:0;
    overflow:hidden;
}

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

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

  
P.S.

  1. 現(xiàn)在回過頭來看上述方法，其實(shí)上述方法所謂的清除浮動(dòng)，都是將沒有設(shè)置高度的.mainBox的高度撐起來，從而使得.mainBox的弟元素能直接跟在.mainBox后面。而不會(huì)因?yàn)?mainBox高度塌陷而被隱藏在.mainBox內(nèi)部浮動(dòng)的子元素下。防止高度塌陷還可以使用創(chuàng)建一個(gè) BFC 的方法（如overflow:hidden）來進(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)容。

  請使用 content 屬性來指定要插入的內(nèi)容。

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

css.rightBox:after{
    content:"我是after";
    display:block
}

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

html


我是after

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

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

html

    
我是after

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

簡單總結(jié)下：after 偽類所產(chǎn)生的內(nèi)容應(yīng)該是在被選元素的子元素位置(而且在所有子元素的最后，簡單的幾個(gè)測試就能發(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ì)下。所以說，看示例也是很重要啊。

P.S. 本人已零零碎碎學(xué)了些前端的東西，目前正在摸索中前進(jìn)。水平有限，如有不對之處，還望各位多多指教。

&& 這個(gè) markdown 編輯器實(shí)在是大愛??！

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

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

相關(guān)文章

  • css偽元素

    摘要：中的偽元素什么是偽元素可以先看一下幾個(gè)小例子文字的偽元素現(xiàn)在添加一個(gè)塊級標(biāo)簽和一個(gè)行內(nèi)標(biāo)簽，并設(shè)置它的偽類字體間距效果如下文字的偽元素現(xiàn)在添加一個(gè)塊級標(biāo)簽和一個(gè)行內(nèi)標(biāo)簽，并設(shè)置它的偽類我想人類可能會(huì)一直耐心維持這個(gè)稍微和平的 css中的偽元素 什么是偽元素？ 可以先看一下幾個(gè)小例子： :first-line 文字的偽元素 現(xiàn)在添加一個(gè)塊級標(biāo)簽和一個(gè)行內(nèi)標(biāo)簽，并設(shè)置它的偽類： c...

    YPHP 評論0 收藏0

  • css偽元素

    摘要：中的偽元素什么是偽元素可以先看一下幾個(gè)小例子文字的偽元素現(xiàn)在添加一個(gè)塊級標(biāo)簽和一個(gè)行內(nèi)標(biāo)簽，并設(shè)置它的偽類字體間距效果如下文字的偽元素現(xiàn)在添加一個(gè)塊級標(biāo)簽和一個(gè)行內(nèi)標(biāo)簽，并設(shè)置它的偽類我想人類可能會(huì)一直耐心維持這個(gè)稍微和平的 css中的偽元素 什么是偽元素？ 可以先看一下幾個(gè)小例子： :first-line 文字的偽元素 現(xiàn)在添加一個(gè)塊級標(biāo)簽和一個(gè)行內(nèi)標(biāo)簽，并設(shè)置它的偽類： c...

    xiaodao 評論0 收藏0

  • CSS（一）偽元素的巧用

    摘要：并且，一些偽元素可以使開發(fā)者獲取到不存在于源文檔中的內(nèi)容比如常見的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類使用一個(gè)冒號例如。就本文而言，我們將把我們探討的范圍限制在和這兩個(gè)偽元素的巧用上。 作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：love 與 hate 糾纏不休,大家都懂的吧。。。。 ? ?????偽類和...

    entner 評論0 收藏0

  • CSS3偽類和偽元素

    作為一個(gè)CSS3初學(xué)不久者來說，很容易混淆單冒號（:）和雙冒號（::）的用法，以為兩者可以互換著來使用。我自己之前也混淆過他們，因?yàn)閮烧呖雌饋硖嘞窳耍拖駥\生兄弟。但實(shí)際上，他們的區(qū)別還是挺大的，最多算得上近房親戚。 下面我們來開始講講單冒號（:）偽類和雙冒號（::）偽元素有什么相同和不同點(diǎn)（另外在CSS2中單冒號: 也叫做偽對象，具體可看看http://www.mb5u.com/tool/cs...

    mozillazg 評論0 收藏0

  • 偽元素 ::after 和 ::before 應(yīng)該這么用（一）

    摘要：偽元素被當(dāng)做的樣式來進(jìn)行展現(xiàn)，用法和普通的元素用法是一樣的。中的偽元素使用個(gè)冒號，在中，為了區(qū)分偽類和偽元素，規(guī)定偽元素使用個(gè)冒號。偽元素的特點(diǎn)優(yōu)點(diǎn)不占用節(jié)點(diǎn)，減少節(jié)點(diǎn)數(shù)。不僅塊級元素可以設(shè)置偽元素，大部分行級元素也可以。 1 什么是偽元素？ CSS 在渲染文檔的時(shí)候，偽元素可以通過 css 給 HTML 添加一個(gè)元素（叫標(biāo)簽也行），這個(gè)元素在文檔樹中是找不到的。偽元素被當(dāng)做 CSS ...

    BlackMass 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<