:CSS 巧用 :before和:after-知識庫免费ppt模版下载-道格办公

(點擊上方公眾號，可快速關注)

作者：野獸'
網址：http://www.cnblogs.com/ys-ys/p/5092760.html

前幾天的晚上較全面的去看了下css的一些文檔和資料，大部分的樣式運用都沒什麼大問題了，只是有些許較陌生，但是也知道他們的存在和實現的是什麼樣式。今天主要想在這篇學習筆記中寫的也不多，主要是針對:before和:after寫一些內容，還有幾個小樣式略微帶過的介紹下。

什麼是:before和:after？該如何使用他們？

:before是css中的一種偽元素，可用於在某個元素之前插入某些內容。

:after是css中的一種偽元素，可用於在某個元素之後插入某些內容。

下面我們先跑個簡單的代碼測試下效果：

<style>
    p:before{< /span>
        content: 'H'  /*:before和:after必帶技能，重要性為滿5顆星*/
    }
    p:after{< /span>
        content: 'd'  /*:before和:after必帶技能，重要性為滿5顆星*/
    }
  </style>
  <p>ello Worl</p>

以上的代碼將會在頁面中展現的是”Hello World”。我們通過瀏覽器的”審查元素”看到的內容是：

<p>
  ::before
  'ello Worl'
  ::after
</p>

p標籤內部的內容的前面會被插入一個:before偽元素，該偽元素內包含的內容是”H”；而在p標籤內的內容後面會被插入一個:after偽元素，該元素包含的內容是”d”。作為一隻合格的程序猴子，捍衛”Hello World”的完整存在是必要的。

既然筆記主要針對是:before和:after，那麼肯定不會只是僅僅有以上的簡單介紹就完事。下面我們看看平常該怎麼使用他們。

1.結合border寫個對話框的樣式。

本獸將上面這句話拆成2部分：結合border，寫個對話框的樣式。

既然是結合border，那麼我們先轉個小話題，簡單由淺入深的介紹下怎麼用border畫三角形樣式(這個三角形在寫對話框樣式的時候需要)：

<style>
    .triangle{
        width: 0;
        height: 0;
        border-left:< span class='crayon-i ' >50px solid red;
        border-bottom:< span class='crayon-i ' >50px solid blue;
        border-top:< span class='crayon-i ' >50px solid black;
        border-right:< span class='crayon-i ' >50px solid purple
    }
  </style>
  <div class< span class='crayon-o' >='triangle'></div>

以上代碼將會在頁面上展示一個正方形，左邊是個紅色的三角形，右邊是紫色的三角形，上面是黑色的三角形，下面是藍色的三角形。那麼有人就會問，我們要的不是三角形麼？野獸你畫個正方形逗我呢？

我們對上面的樣式做些修改：

.triangle{
      width: 0;
      height: 0;
      border:50px transparent solid; < span class='crayon-c' >/*這裡我們將元素的邊框寬度設置為50px，transparent表示邊框顏色是透明的，solid表示邊框是實線的*/
      border-top-color: black;  /*這裡我們僅將上邊框的顏色設置為黑色，眾所周知，css後面的樣式代碼會覆蓋之前的相同的樣式代碼，至於其他三邊的還是透明色*/
      /*border-bottom-color: black; /*這裡設置底部邊框色為黑色*/
      border-left-color: black;  /*這裡設置左邊邊框色為黑色*/
      border-right-color:black*/ /*這裡設置右邊邊框色為黑色*/
  }

然後這時我們就會看到一個在頂部的方向向下的三角形。解釋已詳細的寫在css樣式的註釋裡。

接下來我們加上:before：

<style>
    .test-div{
        position: relative;  /*日常相對定位*/
        width:150px;
        height:36px;
        border-radius:< span class='crayon-i ' >5px;
        border:black 1px solid;
        background: rgba(245,245,245,1)
    }
    .test-div:before{
        content: '';  /*:before和:after必帶技能，重要性為滿5顆星*/
        display: block;
        position: absolute;  /*日常絕對定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px transparent solid;
        left:-12px;
        border-right-color: rgba(245,245,245,1);
    }
  </style>
  <div class< span class='crayon-i ' >='test-div'></div>

通過以上代碼，我們將會看見一個類似微信/QQ的對話框樣式,但是美中不足的是，在對話框的四周的邊框不是完整的，而是在對話框的突出三角形上是木有邊框的T_T瞬間冷場有木有，該怎麼辦呢？讓召喚:after穿著棉大衣來救場吧~

完整代碼：

<style>
    .test-div{
        position: relative;  /*日常相對定位*/
        width:150px;
        height: 36px;
        border:black 1px solid;
        border-radius:< span class='crayon-i ' >5px;
        background: rgba(245,245,245,1)
    }
    .test-div:before,.test-div:after{
        content: '';  /*:before和:after必帶技能，重要性為滿5顆星*/
        display: block;
        position: absolute;  /*日常絕對定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px transparent solid;
    }
    .test-div:before{
        left:-11px;
        border-right-color: rgba(245,245,245,1);
        z-index:< span class='crayon-i ' >1
    }
    .test-div:after{
        left:-12px;
        border-right-color: rgba(0,0,0,1);
        z-index:< span class='crayon-h' > 0
    }
  </style>
  <div class< span class='crayon-i ' >='test-div'></div>

好了，完整的一個對話框樣式呈現在眼前了，至於對話框的小三角形的方向，相信大家看了上上段對於border介紹的代碼也都知道該怎麼做了吧，沒錯，就是改下position的位置，改下border顯示顏色的方位~ (本獸不喜歡貼圖片，體諒下額，需要的可以拷貝代碼直接運行看效果，造輪子不僅僅是造輪子，也能讓人加深印象，更好的理解)

2.作為內容的半透明背景層。

比如我們的需求是做一個半透明的登錄框吧(這裡也是在代碼中通過註釋來解釋)：

<style>
      body{
          background: url(img/1.jpg) no -repeat left < span class='crayon-i ' >top /*這裡本獸加了個圖片背景，用以區分背景的半透明及內容的完全不透明*/
      }
      .test-div{
          position: relative;  /*日常相對定位(重要，下面內容也會介紹)*/
          width:300px;
          height: 120px;
          padding: 20px 10px;
          font-weight:< span class='crayon-h' > bold;
      }
      .test-div:before{
          position: absolute;  /*日常絕對定位(重要，下面內容也會略帶介紹)*/
          content: '';  /*:before和:after必帶技能，重要性為滿5顆星*/
          top:0;
          left: 0;
          width: 100%;  /*和內容一樣的寬度*/
          height: 100%;  /*和內容一樣的高度*/
          background: rgba(255,255,255,.5); / *給定背景白色，透明度50%*/
          z-index:< span class='crayon-i ' >-1 /*日常元素堆疊順序(重要，下面內容也會略帶介紹)*/
      }
  </style>
  
  <div class< span class='crayon-i ' >='test-div'>
      <table>
          <tr>
              <td>Name</td>
              <td><input placeholder< /span>='your name' /></td>
          </tr>
          <tr>
              <td>Password</td>
              <td><input placeholder< /span>='your password' /></td>
          </tr>
          <tr>
              <td></td>
              <td><input type< /span>='button' value ='login' /></td>
          </tr>
      </table>
  </div>

上面的代碼拷貝過去，加上張圖片可測試效果。

當然，:bofore和:after也還有其他更多的巧妙用法，這裡也不一一列出來了，這裡放上一個用這兩個偽元素加上css3動畫實現一些比較好看及實用的動態效果的鏈接：HoverEffectIdeas

說完了:before和:after，我們稍微扯扯一些其他的css樣式及佈局注意點(可能大家不怎麼注意，從而導致一些佈局和样式出問題)。

position 定位的問題

position屬性規定了元素的定位類型，默認為static。

該屬性還可以有下值：

absolute：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。

fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位。

relative：生成相對定位的元素，相對於其正常位置進行定位。

inherit：規定應該從父元素繼承 position 屬性的值。

代碼：

<style>
      body{
          height: 2000px   /*這裡將body的高度設置為2000px是為了區分absolute和fixed的差別*/
      }
      .test-div{
          position:absolute;
          left:50px;
          top:50px
      }
  </style>
  <div class='test-div '>Hello World</div>

  <style>
      body{
          height: 2000px   /*這裡將body的高度設置為2000px是為了區分absolute和fixed的差別*/
      }
      .test-div{
          position:fixed;
          left:50px;
          top:50px
      }
  </style>
  <div class='test-div '>Hello World</div>

  <style>
      .out-div{
          width: 300px;
          height: 300px;
          background: purple;  /*這裡定義個背景，讓我們知道這個div在哪*/
          margin:50px 0px 0px 50px< span class='crayon-sy' >;
          position: relative
      }
      .in-div{
          position:absolute;
          left:50px;
          top:50px
      }
  </style>
  <div class< span class='crayon-i ' >='out-div'>
      <div class< span class='crayon-i ' >='in-div'>Hello World</div> ;
  </div>

z-index 元素堆疊排序

z-index用於設置或檢索對象的堆疊順序，對應的腳本特性為zIndex。

z-index的數值越大，該元素的堆疊層級越高。

代碼：

<style>
      .first-div{
          width: 300px;
          height: 300px;
          background: purple;  /*這裡定義個背景，讓我們知道這個div在哪*/
          position: absolute;
          left:50px;
          top:50px;
          z-index:< span class='crayon-h' > 1
      }
      .second-div{
          position:absolute;
          left:80px;
          top:80px;
          width:50px;
          height: 50px;
          background: white;
          z-index:< span class='crayon-h' > 2
      }
  </style>
  <div class< span class='crayon-i ' >='first-div'></div>
  <div class< span class='crayon-i ' >='second-div'></div>

這裡我們將第一個div和第二個div位置放到一起，方便看z-index的效果。以上代碼的樣式是紫色的正方形裡面有個白色的小正方形。因為小正方形的z-index大於大正方形的z-index，所以能顯示出，當我們把.first-div的z-index設置為3，這時候就看不到白色的小正方形了，它被紫色的大正方形無情的擋掉了…

zoom 元素縮放比例

zoom適用於所有元素，用於設置或檢索對象的縮放比例，對應的腳本特性為zoom，原比例的值是1。

代碼：

<style>
      div{
          width: 100px;
          height: 100px;
          float: left
      }
      .first-div{
          background: purple;
          zoom:1.5
      }
      .second-div{
          background: black;
          zoom:1
      }
      .third-div{
          background: red;
          zoom:.5
      }
  </style>
  <div class< span class='crayon-i ' >='first-div'></div>
  <div class< span class='crayon-i ' >='second-div'></div>
  <div class< span class='crayon-i ' >='third-div'></div>

以上代碼將會展示的依次是紫色-黑色-紅色的div，大小分別是100px的1.5倍，1倍，0.5倍。

em 和 rem 是什麼

1em等於當前的字體尺寸，數值的改變意味著字體大小的調整。 em 有繼承這個特性，也就是說，外部父元素定義了字體的em大小，內部子元素會繼承這一屬性的樣式。

rem = root em 。顧名思義，root即根部的，頂部的。也就是根部的em，這個根部指的是HTML根元素。所以rem的大小是針對HTML根元素的大小做字體的相對大小的調整。

代碼：

<style>
      body{
        font-size:< span class='crayon-h' > 12px;
      }
      /*html{
          font-size: 12px;
      }*/
      div{
          width: 200px;
          height: 100px;
          float:left
      }
      .first-div{
          font-size:< span class='crayon-h' > 1em
      }
      .second-div{
          font-size:< span class='crayon-h' > 2em
      }
      .third-div{
          font-size:< span class='crayon-h' > 1rem
      }
      .fourth-div{
          font-size:< span class='crayon-h' > 2rem
      }
  </style>
  <div class< span class='crayon-i ' >='first-div'>Hello World</div> ;
  <div class< span class='crayon-i ' >='second-div'>Hello World</div> ;
  <div class< span class='crayon-i ' >='third-div'>Hello World</div> ;
  <div class< span class='crayon-i ' >='fourth-div'>Hello World</div> ;

以上代碼分別展示了不同大小的字體，em和rem的區別可以通過僅僅註釋body字體樣式和html字體樣式來看看他們之間的差別。

本文屬於「前端大全」CSS 分類。

回复 CSS查看更多 CSS 技術乾貨。

【今日微信公號推薦↓】

文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Using%20before%20and%20after%20in%20CSS.html

CSS 巧用 :before和:after

发表回复

评论列表（196条）

CSS 巧用 :before和:after

相關推薦

【實用技巧】圖解靜電紡絲流程：PPT科學研究繪圖入門指南（016）

全新版：PPT科學研究繪圖全攻略與素材集錦

史上最全PPT科研作圖教程及素材（第二版）

【實戰教程】PPT科研繪圖教程（001）——光催化機理示意圖

【導航】PPT科研插圖繪製教程列表

发表回复

评论列表（196条）