CSS中靈活使用:before和:after
我要評(píng)論本文主要是針對(duì):before和:after寫(xiě)一些內(nèi)容，還有幾個(gè)小樣式略微帶過(guò)的介紹下。
什么是:before和:after？ 該如何使用他們？
:before是css中的一種偽元素，可用于在某個(gè)元素之前插入某些內(nèi)容。
:after是css中的一種偽元素，可用于在某個(gè)元素之后插入某些內(nèi)容。
下面我們先跑個(gè)簡(jiǎn)單的代碼測(cè)試下效果：
- <style>
- p:before{
- content: "H" /*:before和:after必帶技能，重要性為滿5顆星*/
- }
- p:after{
- content: "d" /*:before和:after必帶技能，重要性為滿5顆星*/
- }
- </style>
- <p>ello Worl</p>
以上的代碼將會(huì)在頁(yè)面中展現(xiàn)的是”Hello World”。我們通過(guò)瀏覽器的”審查元素”看到的內(nèi)容是：
- <p>
- ::before
- "ello Worl"
- ::after
- </p>
p標(biāo)簽內(nèi)部的內(nèi)容的前面會(huì)被插入一個(gè):before偽元素，該偽元素內(nèi)包含的內(nèi)容是”H”；而在p標(biāo)簽內(nèi)的內(nèi)容后面會(huì)被插入一個(gè):after偽元素，該元素包含的內(nèi)容是”d”。作為一只合格的程序猴子，捍衛(wèi)”Hello World”的完整存在是必要的。
既然筆記主要針對(duì)是:before和:after，那么肯定不會(huì)只是僅僅有以上的簡(jiǎn)單介紹就完事。下面我們看看平常該怎么使用他們。
1.結(jié)合border寫(xiě)個(gè)對(duì)話框的樣式。
將上面這句話拆成2部分：結(jié)合border，寫(xiě)個(gè)對(duì)話框的樣式。
既然是結(jié)合border，那么我們先轉(zhuǎn)個(gè)小話題，簡(jiǎn)單由淺入深的介紹下怎么用border畫(huà)三角形樣式(這個(gè)三角形在寫(xiě)對(duì)話框樣式的時(shí)候需要)：
- <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>
以上代碼將會(huì)在頁(yè)面上展示一個(gè)正方形，左邊是個(gè)紅色的三角形，右邊是紫色的三角形，上面是黑色的三角形，下面是藍(lán)色的三角形。那么有人就會(huì)問(wèn)，我們要的不是三角形么？野獸你畫(huà)個(gè)正方形逗我呢？
我們對(duì)上面的樣式做些修改：
- .triangle{
- width: 0;
- height: 0;
- border:50px transparent solid; /*這里我們將元素的邊框?qū)挾仍O(shè)置為50px，transparent表示邊框顏色是透明的，solid表示邊框是實(shí)線的*/
- border-top-color: black; /*這里我們僅將上邊框的顏色設(shè)置為黑色，眾所周知，css后面的樣式代碼會(huì)覆蓋之前的相同的樣式代碼，至于其他三邊的還是透明色*/
- /*border-bottom-color: black; /*這里設(shè)置底部邊框色為黑色*/
- border-left-color: black; /*這里設(shè)置左邊邊框色為黑色*/
- border-right-color:black*/ /*這里設(shè)置右邊邊框色為黑色*/
- }
然后這時(shí)我們就會(huì)看到一個(gè)在頂部的方向向下的三角形。解釋已詳細(xì)的寫(xiě)在css樣式的注釋里。
接下來(lái)我們加上:before：
- <style>
- .test-div{
- position: relative; /*日常相對(duì)定位*/
- 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; /*日常絕對(duì)定位*/
- 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>
通過(guò)以上代碼，我們將會(huì)看見(jiàn)一個(gè)類(lèi)似微信/QQ的對(duì)話框樣式,但是美中不足的是，在對(duì)話框的四周的邊框不是完整的，而是在對(duì)話框的突出三角形上是木有邊框的T_T瞬間冷場(chǎng)有木有，該怎么辦呢？讓召喚:after穿著棉大衣來(lái)救場(chǎng)吧~
完整代碼：
- <style>
- .test-div{
- position: relative; /*日常相對(duì)定位*/
- 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; /*日常絕對(duì)定位*/
- 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>
好了，完整的一個(gè)對(duì)話框樣式呈現(xiàn)在眼前了，至于對(duì)話框的小三角形的方向，相信大家看了上上段對(duì)于border介紹的代碼也都知道該怎么做了吧，沒(méi)錯(cuò)，就是改下position的位置，改下border顯示顏色的方位~ (本獸不喜歡貼圖片，體諒下額，需要的可以拷貝代碼直接運(yùn)行看效果，造輪子不僅僅是造輪子，也能讓人加深印象，更好的理解)
2.作為內(nèi)容的半透明背景層。
比如我們的需求是做一個(gè)半透明的登錄框吧(這里也是在代碼中通過(guò)注釋來(lái)解釋)：
- <style>
- body{
- background: url(img/1.jpg) no-repeat left top /*這里本獸加了個(gè)圖片背景，用以區(qū)分背景的半透明及內(nèi)容的完全不透明*/
- }
- .test-div{
- position: relative; /*日常相對(duì)定位(重要，下面內(nèi)容也會(huì)介紹)*/
- width:300px;
- height: 120px;
- padding: 20px 10px;
- font-weight: bold;
- }
- .test-div:before{
- position: absolute; /*日常絕對(duì)定位(重要，下面內(nèi)容也會(huì)略帶介紹)*/
- 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)容也會(huì)略帶介紹)*/
- }
- </style>
- <!--這里容獸偷個(gè)懶，布局簡(jiǎn)單寫(xiě)寫(xiě)-->
- <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>
上面的代碼拷貝過(guò)去，加上張圖片可測(cè)試效果。
當(dāng)然，:bofore和:after也還有其他更多的巧妙用法，這里也不一一列出來(lái)了，這里放上一個(gè)用這兩個(gè)偽元素加上css3動(dòng)畫(huà)實(shí)現(xiàn)一些比較好看及實(shí)用的動(dòng)態(tài)效果的鏈接：HoverEffectIdeas
說(shuō)完了:before和:after，我們稍微扯扯一些其他的css樣式及布局注意點(diǎn)(可能大家不怎么注意，從而導(dǎo)致一些布局和樣式出問(wèn)題)。
position 定位的問(wèn)題
position屬性規(guī)定了元素的定位類(lèi)型，默認(rèn)為static。
該屬性還可以有下值：
absolute：生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
fixed：生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。
relative：生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
inherit：規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
代碼：
- <!--position:absolute-->
- <style>
- body{
- height: 2000px /*這里將body的高度設(shè)置為2000px是為了區(qū)分absolute和fixed的差別*/
- }
- .test-div{
- position:absolute;
- left:50px;
- top:50px
- }
- </style>
- <div class="test-div">Hello World</div>
- <!--position:fixed-->
- <style>
- body{
- height: 2000px /*這里將body的高度設(shè)置為2000px是為了區(qū)分absolute和fixed的差別*/
- }
- .test-div{
- position:fixed;
- left:50px;
- top:50px
- }
- </style>
- <div class="test-div">Hello World</div>
- <!--position:relative + position:absolute-->
- <style>
- .out-div{
- width: 300px;
- height: 300px;
- background: purple; /*這里定義個(gè)背景，讓我們知道這個(gè)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用于設(shè)置或檢索對(duì)象的堆疊順序，對(duì)應(yīng)的腳本特性為zIndex。
z-index的數(shù)值越大，該元素的堆疊層級(jí)越高。
代碼：
- <style>
- .first-div{
- width: 300px;
- height: 300px;
- background: purple; /*這里定義個(gè)背景，讓我們知道這個(gè)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>
這里我們將第一個(gè)div和第二個(gè)div位置放到一起，方便看z-index的效果。以上代碼的樣式是紫色的正方形里面有個(gè)白色的小正方形。因?yàn)樾≌叫蔚膠-index大于大正方形的z-index，所以能顯示出，當(dāng)我們把.first-div的z-index設(shè)置為3，這時(shí)候就看不到白色的小正方形了，它被紫色的大正方形無(wú)情的擋掉了…
zoom 元素縮放比例
zoom適用于所有元素，用于設(shè)置或檢索對(duì)象的縮放比例，對(duì)應(yīng)的腳本特性為zoom，原比例的值是1。
代碼：
- <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>
以上代碼將會(huì)展示的依次是紫色-黑色-紅色的div，大小分別是100px的1.5倍，1倍，0.5倍。
em 和 rem 是什么
1em等于當(dāng)前的字體尺寸，數(shù)值的改變意味著字體大小的調(diào)整。em 有繼承這個(gè)特性，也就是說(shuō)，外部父元素定義了字體的em大小，內(nèi)部子元素會(huì)繼承這一屬性的樣式。
rem = root em 。顧名思義，root即根部的，頂部的。也就是根部的em，這個(gè)根部指的是HTML根元素。所以rem的大小是針對(duì)HTML根元素的大小做字體的相對(duì)大小的調(diào)整。
代碼：
- <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ū)別可以通過(guò)僅僅注釋body字體樣式和html字體樣式來(lái)看看他們之間的差別。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
- :before和:after偽元素在CSS中除了被用來(lái)添加元素、加小標(biāo)、清浮動(dòng)等,還有很多妙用之處,接下來(lái)我們就來(lái)看一兩個(gè)CSS中:before和:after偽元素使用的奇技淫巧2016-05-20
- 這篇文章主要介紹了CSS中的before和:after偽元素使用詳解,包括對(duì)一些非文本內(nèi)容的插入操作使用,需要的朋友可以參考下2015-05-27
使用before和:after偽類(lèi)制作css3圓形按鈕
這篇文章主要介紹了使用before和:after偽類(lèi)制作css3圓形按鈕,需要的朋友可以參考下2014-04-08CSS偽元素 :before, :after, box-shadow應(yīng)用
利用CSS偽元素 ：before 和 ：after 可以在文檔前后插入內(nèi)容而不改變文檔原有結(jié)構(gòu)，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-03-04CSS偽類(lèi)對(duì)象before和after的用法實(shí)例詳解
這兩個(gè)偽類(lèi)對(duì)象只有在清楚浮動(dòng)clearfix的時(shí)候會(huì)用到哈，最近在研究css3的時(shí)候覺(jué)得它兩個(gè)的搭配不僅能夠減少代碼量并且能整出很巴適的效果2013-07-11那些你所不知的CSS ::before 和::after 偽元素用法
下面小編就為大家?guī)?lái)一篇那些你所不知的CSS ::before 和::after 偽元素用法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-12