1. 程式人生 > >CSS內容生成

CSS內容生成

1、什麼是內容生成
        使用css向某元素內插入一段內容
    2、偽元素選擇器
        1、:before 或 ::before
            作用:匹配到某元素內容區域之前
            <p>(:before)窗前明月光</p>
        2、:after 或 ::after
            作用:匹配到某元素內容區域之後
            <p>疑是地上霜(:after)</p>
    3、屬性
        屬性:content
        作用:向匹配到的位置處增加內容
        取值:
            1、字串 :用 "" 引起來的普通文字
            2、url() :生成一副影象
 
    4、解決問題
        1、浮動元素父元素高度問題
            .clear:after{
        content:"";
        /*變為塊級 或 table*/
        display:block;
        /*清除兩端浮動*/
        clear:both;
      }
        2、外邊距的溢位問題
            <div id="d1"></div>
            <div id="d2">
                <div id="d3"></div>
            </div>
            #d2:before{
                content:"";
                display:table;
            }