溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

content屬性的4種用途

發(fā)布時(shí)間：2020-08-11 05:21:04 來(lái)源：網(wǎng)絡(luò) 閱讀：533 作者：frwupeng517 欄目：開(kāi)發(fā)技術(shù)

content屬性瀏覽器支持情況，兼容到IE8瀏覽器，IE7及以下不支持


用途一、配合:before及:after偽元素插入文本

<div>
    <p>偽元素</p>
</div>
p:before{
    content:'CSS3';
    color:#4bb;
    font-weight:bold;
    margin-right:20px;
    background:#f0f0f0;
    /*如果要設(shè)置寬高的話，就必須變成塊級(jí)元素*/
    float:left;
    display:block;
    width:50px;

}

content屬性的4種用途


用途二、插入圖像 url()

p:before{
    content:url(p_w_picpaths/dot.jpg);
    margin-right:5px;
}

content屬性的4種用途


用途三、配合:after 清除浮動(dòng)

.clearfix:after{
    content:'';
    display:block;
    height:0;
    clear:both;
    overflow:hidden;
    visibility:hidden;
}
/*為兼容IE6,IE7，因?yàn)閕e6,ie7不能用after偽類。加上下面代碼*/
.clearfix{zoom:1}


用途四、配合:before 解決上外邊距溢出

在沒(méi)有對(duì)全局css作樣式重置的情況下，會(huì)出現(xiàn)這么一個(gè)問(wèn)題

<div id="d1"></div>
<div id="d2"></div>
#d1,#d2{width:100px; height:100px;}
#d1{background:red;}
#d2{background:green;}

此時(shí)，兩個(gè)div元素各自占據(jù)一行，緊密排列

content屬性的4種用途


如果在第二個(gè)div里面再加入一個(gè)p元素，由于p元素自帶有上下外邊距各16px，會(huì)產(chǎn)生一個(gè)16px的間距

content屬性的4種用途


在這里就可以使用content配合:before來(lái)解決

#d2:before{
  content:"";
  display:table;
}

content屬性的4種用途

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手