CSS中靈活使用:before和:after

發(fā)布時間：2016-05-05 16:31:12 作者：佚名

我要評論

這篇文章主要介紹了CSS中如何靈活使用:before和:after，主要內(nèi)容介紹了什么是:before和:after？該如何使用:before和:after？感興趣的小伙伴們可以參考一下

本文主要是針對:before和:after寫一些內(nèi)容，還有幾個小樣式略微帶過的介紹下。

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

:before是css中的一種偽元素，可用于在某個元素之前插入某些內(nèi)容。
:after是css中的一種偽元素，可用于在某個元素之后插入某些內(nèi)容。

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

CSS Code復制內(nèi)容到剪貼板

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

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

XML/HTML Code復制內(nèi)容到剪貼板

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

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

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

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

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

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

CSS Code復制內(nèi)容到剪貼板

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

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

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

CSS Code復制內(nèi)容到剪貼板

.triangle{
width: 0;
height: 0;
border:50px transparent solid; /*這里我們將元素的邊框?qū)挾仍O置為50px，transparent表示邊框顏色是透明的，solid表示邊框是實線的*/
border-top-color: black; /*這里我們僅將上邊框的顏色設置為黑色，眾所周知，css后面的樣式代碼會覆蓋之前的相同的樣式代碼，至于其他三邊的還是透明色*/
/*border-bottom-color: black; /*這里設置底部邊框色為黑色*/
border-left-color: black; /*這里設置左邊邊框色為黑色*/
border-right-color:black*/ /*這里設置右邊邊框色為黑色*/
}

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

接下來我們加上:before：

CSS Code復制內(nèi)容到剪貼板

<style>
.test-div{
position: relative; /*日常相對定位*/
width:150px;
height:36px;
border-radius: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="test-div"></div>

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

完整代碼：

CSS Code復制內(nèi)容到剪貼板

<style>
.test-div{
position: relative; /*日常相對定位*/
width:150px;
height: 36px;
border:black 1px solid;
border-radius: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:1
}
.test-div:after{
left:-12px;
border-right-color: rgba(0,0,0,1);
z-index: 0
}
</style>
<div class="test-div"></div>

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

2.作為內(nèi)容的半透明背景層。

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

CSS Code復制內(nèi)容到剪貼板

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

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

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

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

position 定位的問題

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

該屬性還可以有下值：

absolute：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。
relative：生成相對定位的元素，相對于其正常位置進行定位。
inherit：規(guī)定應該從父元素繼承 position 屬性的值。

代碼：

CSS Code復制內(nèi)容到剪貼板

<style>
body{
height: 2000px /*這里將body的高度設置為2000px是為了區(qū)分absolute和fixed的差別*/
}
.test-div{
position:absolute;
left:50px;
top:50px
}
</style>
<div class="test-div">Hello World</div>
<style>
body{
height: 2000px /*這里將body的高度設置為2000px是為了區(qū)分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;
position: relative
}
.in-div{
position:absolute;
left:50px;
top:50px
}
</style>
<div class="out-div">
<div class="in-div">Hello World</div>
</div>

z-index 元素堆疊排序

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

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

代碼：

CSS Code復制內(nèi)容到剪貼板

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

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

zoom 元素縮放比例

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

代碼：

CSS Code復制內(nèi)容到剪貼板

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

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

em 和 rem 是什么

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

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

代碼：

CSS Code復制內(nèi)容到剪貼板

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

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

Tag：before After css

CSS中:before和:after偽元素使用的奇技淫巧
:before和:after偽元素在CSS中除了被用來添加元素、加小標、清浮動等,還有很多妙用之處,接下來我們就來看一兩個CSS中:before和:after偽元素使用的奇技淫巧
2016-05-20
CSS中的before和:after偽元素使用詳解
這篇文章主要介紹了CSS中的before和:after偽元素使用詳解,包括對一些非文本內(nèi)容的插入操作使用,需要的朋友可以參考下
2015-05-27
使用before和:after偽類制作css3圓形按鈕
這篇文章主要介紹了使用before和:after偽類制作css3圓形按鈕,需要的朋友可以參考下
2014-04-08
CSS偽元素 :before, :after, box-shadow應用
利用CSS偽元素：before 和：after 可以在文檔前后插入內(nèi)容而不改變文檔原有結構，下面有個不錯的示例，大家可以參考下
2014-03-04
CSS偽類對象before和after的用法實例詳解
這兩個偽類對象只有在清楚浮動clearfix的時候會用到哈，最近在研究css3的時候覺得它兩個的搭配不僅能夠減少代碼量并且能整出很巴適的效果
2013-07-11
那些你所不知的CSS ::before 和::after 偽元素用法
下面小編就為大家?guī)硪黄切┠闼恢腃SS ::before 和::after 偽元素用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-12

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中靈活使用:before和:after

相關文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容