CSS中灵便应用:before和:after

2021-01-20 18:42 jianzhan

本文关键是对于:before和:after写1些內容,也有几个小款式稍微带过的详细介绍下。

甚么是:before和:after? 该怎样应用她们?

:before是css中的1种伪元素,能用于在某个元素以前插进一些內容。
:after是css中的1种伪元素,能用于在某个元素以后插进一些內容。

下面大家先跑个简易的编码检测下实际效果:

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.   p:before{   
  3.       content"H"  /*:before和:after必带专业技能,关键性为满5颗星*/  
  4.   }   
  5.   p:after{   
  6.       content"d"  /*:before和:after必带专业技能,关键性为满5颗星*/  
  7.   }   
  8. </style>   
  9. <p>ello Worl</p>  

以上的编码可能在网页页面中呈现的是”Hello World”。大家根据访问器的”核查元素”看到的內容是:

XML/HTML Code拷贝內容到剪贴板
  1. <p>  
  2.   ::before   
  3.   "ello Worl"   
  4.   ::after   
  5. </p>  

p标识內部的內容的前面会被插进1个:before伪元素,该伪元素内包括的內容是”H”;而在p标识内的內容后边会被插进1个:after伪元素,该元素包括的內容是”d”。做为1只达标的程序流程小猴子,保卫”Hello World”的详细存在是必要的。

既然笔记关键对于是:before和:after,那末毫无疑问不容易只是仅唯一以上的简易详细介绍就完事。下面大家看看平时该如何应用她们。

1.融合border写个会话框的款式。

将上面这句话拆成2一部分:融合border,写个会话框的款式。

既然是融合border,那末大家先转个小话题,简易循序渐进的详细介绍下如何用border画3角形款式(这个3角形在写会话框款式的情况下必须):

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.   .triangle{   
  3.       width: 0;   
  4.       height: 0;   
  5.       border-left:50px solid red;   
  6.       border-bottom:50px solid blue;   
  7.       border-top:50px solid black;   
  8.       border-right:50px solid purple  
  9.   }   
  10. </style>   
  11. <div class="triangle"></div>   

以上编码可能在网页页面上展现1个正方形,左侧是个鲜红色的3角形,右侧是紫色的3角形,上面是黑色的3角形,下面是蓝色的3角形。那末有人就会问,大家要的并不是3角形么?野兽你画个正方形逗我呢?

大家对上面的款式做些改动:

CSS Code拷贝內容到剪贴板
  1. .triangle{   
  2.     width: 0;   
  3.     height: 0;   
  4.     border:50px transparent solid/*这里大家将元素的边框宽度设定为50px,transparent表明边框色调是全透明的,solid表明边框是实线的*/  
  5.     border-top-colorblack;  /*这里大家仅将上边框的色调设定为黑色,大家都知道,css后边的款式编码会遮盖以前的同样的款式编码,至于别的3边的還是全透明色*/  
  6.     /*border-bottom-color: black; /*这里设定底部边框色为黑色*/  
  7.     border-left-colorblack;  /*这里设定左侧边框色为黑色*/  
  8.     border-right-color:black*/ /*这里设定右侧边框色为黑色*/  
  9. }  

随后这时候大家就会看到1个在顶部的方位向下的3角形。解释已详尽的写在css款式的注解里。

接下来大家再加:before:

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.   .test-div{   
  3.       positionrelative;  /*平常相对性精准定位*/  
  4.       width:150px;   
  5.       height:36px;   
  6.       border-radius:5px;   
  7.       border:black 1px solid;   
  8.       background: rgba(245,245,245,1)   
  9.   }   
  10.   .test-div:before{   
  11.       content"";  /*:before和:after必带专业技能,关键性为满5颗星*/  
  12.       displayblock;   
  13.       positionabsolute;  /*平常肯定精准定位*/  
  14.       top:8px;   
  15.       width: 0;   
  16.       height: 0;   
  17.       border:6px transparent solid;   
  18.       left:-12px;   
  19.       border-right-color: rgba(245,245,245,1);   
  20.   }   
  21. </style>   
  22. <div class="test-div"></div>  

根据以上编码,大家可能看见1个相近手机微信/QQ的会话框款式,可是不完美的是,在会话框的4周的边框并不是详细的,而是在会话框的突显3角形上是木有边框的T_T一瞬间冷场有没有,应该怎么办呢?让招唤:after衣着棉大衣来救场吧~

详细编码:

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.   .test-div{   
  3.       positionrelative;  /*平常相对性精准定位*/  
  4.       width:150px;   
  5.       height36px;   
  6.       border:black 1px solid;   
  7.       border-radius:5px;   
  8.       background: rgba(245,245,245,1)   
  9.   }   
  10.   .test-div:before,.test-div:after{   
  11.       content"";  /*:before和:after必带专业技能,关键性为满5颗星*/  
  12.       displayblock;   
  13.       positionabsolute;  /*平常肯定精准定位*/  
  14.       top:8px;   
  15.       width: 0;   
  16.       height: 0;   
  17.       border:6px transparent solid;   
  18.   }   
  19.   .test-div:before{   
  20.       left:-11px;   
  21.       border-right-color: rgba(245,245,245,1);   
  22.       z-index:1   
  23.   }   
  24.   .test-div:after{   
  25.       left:-12px;   
  26.       border-right-color: rgba(0,0,0,1);   
  27.       z-index: 0   
  28.   }   
  29. </style>   
  30. <div class="test-div"></div>  

好了,详细的1个会话框款式展现在眼下了,至于会话框的小3角形的方位,坚信大伙儿看了上上段针对border详细介绍的编码也都了解该如何做了吧,没错,便是改下position的部位,改下border显示信息色调的方向~ (本兽不喜爱贴照片,迁就下额,必须的能够复制编码立即运作看实际效果,造轮子不仅是造轮子,也能令人加深印象,更好的了解)

2.做为內容的半全透明情况层。

例如大家的要求是做1个半全透明的登陆框吧(这里也是在编码中根据注解来解释):

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.     body{   
  3.         backgroundurl(img/1.jpg) no-repeat left top /*这里本兽加了个照片情况,用以区别情况的半全透明及內容的彻底不全透明*/  
  4.     }   
  5.     .test-div{   
  6.         positionrelative;  /*平常相对性精准定位(关键,下面內容也会详细介绍)*/  
  7.         width:300px;   
  8.         height120px;   
  9.         padding20px 10px;   
  10.         font-weightbold;   
  11.     }   
  12.     .test-div:before{   
  13.         positionabsolute;  /*平常肯定精准定位(关键,下面內容也会略带详细介绍)*/  
  14.         content"";  /*:before和:after必带专业技能,关键性为满5颗星*/  
  15.         top:0;   
  16.         left: 0;   
  17.         width: 100%;  /*和內容1样的宽度*/  
  18.         height: 100%;  /*和內容1样的高宽比*/  
  19.         background: rgba(255,255,255,.5); /*给定情况白色,全透明度50%*/  
  20.         z-index:⑴ /*平常元素层叠次序(关键,下面內容也会略带详细介绍)*/  
  21.     }   
  22. </style>   
  23. <!--这里容兽偷个懒,合理布局简易写写-->   
  24. <div class="test-div">   
  25.     <table>   
  26.         <tr>   
  27.             <td>Name</td>   
  28.             <td><input placeholder="your name" /></td>   
  29.         </tr>    
  30.         <tr>   
  31.             <td>Password</td>   
  32.             <td><input placeholder="your password" /></td>   
  33.         </tr>    
  34.         <tr>   
  35.             <td></td>   
  36.             <td><input type="button" value="login" /></td>   
  37.         </tr>   
  38.     </table>   
  39. </div>  

上面的编码复制以往,再加张照片可检测实际效果。

自然,:bofore和:after也也有别的更多的恰当用法,这里也不11列出来了,这里放上1个用这两个伪元素再加css3动漫完成1些较为漂亮及好用的动态性实际效果的连接:HoverEffectIdeas

说完了:before和:after,大家略微扯扯1些别的的css款式及合理布局留意点(将会大伙儿不如何留意,从而致使1些合理布局和款式出难题)。

position 精准定位的难题

position特性要求了元素的精准定位种类,默认设置为static。

该特性还能够有下值:

absolute:转化成肯定精准定位的元素,相对 static 精准定位之外的第1个父元素开展精准定位。
fixed:转化成肯定精准定位的元素,相对访问器对话框开展精准定位。
relative:转化成相对性精准定位的元素,相对其一切正常部位开展精准定位。
inherit:要求应当从父元素承继 position 特性的值。

编码:

CSS Code拷贝內容到剪贴板
  1. <!--position:absolute-->   
  2.   <style>   
  3.       body{   
  4.           height2000px  /*这里将body的高宽比设定为2000px是以便区别absolute和fixed的区别*/  
  5.       }   
  6.       .test-div{   
  7.           position:absolute;   
  8.           left:50px;   
  9.           top:50px  
  10.       }   
  11.   </style>   
  12.   <div class="test-div">Hello World</div>   
  13. <!--position:fixed-->   
  14.   <style>   
  15.       body{   
  16.           height2000px  /*这里将body的高宽比设定为2000px是以便区别absolute和fixed的区别*/  
  17.       }   
  18.       .test-div{   
  19.           position:fixed;   
  20.           left:50px;   
  21.           top:50px  
  22.       }   
  23.   </style>   
  24.   <div class="test-div">Hello World</div>   
  25. <!--position:relative + position:absolute-->   
  26.   <style>   
  27.       .out-div{   
  28.           width300px;   
  29.           height300px;   
  30.           backgroundpurple;  /*这里界定个情况,让大家了解这个div在哪儿*/  
  31.           margin:50px 0px 0px 50px;   
  32.           positionrelative  
  33.       }   
  34.       .in-div{   
  35.           position:absolute;   
  36.           left:50px;   
  37.           top:50px  
  38.       }   
  39.   </style>   
  40.   <div class="out-div">   
  41.       <div class="in-div">Hello World</div>   
  42.   </div>   
  43.   

z-index 元素层叠排列

z-index用于设定或查找目标的层叠次序,对应的脚本制作特点为zIndex。

z-index的标值越大,该元素的层叠等级越高。

编码:

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.      .first-div{   
  3.          width300px;   
  4.          height300px;   
  5.          backgroundpurple;  /*这里界定个情况,让大家了解这个div在哪儿*/  
  6.          positionabsolute;   
  7.          left:50px;   
  8.          top:50px;   
  9.          z-index: 1   
  10.      }   
  11.      .second-div{   
  12.          position:absolute;   
  13.          left:80px;   
  14.          top:80px;   
  15.          width:50px;   
  16.          height50px;   
  17.          backgroundwhite;   
  18.          z-index: 2   
  19.      }   
  20.  </style>   
  21.  <div class="first-div"></div>   
  22.  <div class="second-div"></div>   

这里大家将第1个div和第2个div部位放到1起,便捷看z-index的实际效果。以上编码的款式是紫色的正方形里边有个白色的小正方形。由于小正方形的z-index超过大正方形的z-index,因此能显示信息出,当大家把.first-div的z-index设定为3,这时候候就看不见白色的小正方形了,它被紫色的大正方形无情的挡掉了…

zoom 元素放缩占比

zoom可用于全部元素,用于设定或查找目标的放缩占比,对应的脚本制作特点为zoom,原占比的值是1。

编码:

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.     .first-div{   
  3.         width100px;   
  4.         height100px;   
  5.         backgroundpurple;   
  6.         zoom:1.5;   
  7.         floatleft  
  8.     }   
  9.     .second-div{   
  10.         width100px;   
  11.         height100px;   
  12.         backgroundblack;   
  13.         zoom:1;   
  14.         float:left  
  15.     }   
  16.     .third-div{   
  17.         width100px;   
  18.         height100px;   
  19.         backgroundred;   
  20.         zoom:.5;   
  21.         float:left  
  22.     }   
  23. </style>   
  24. <div class="first-div"></div>   
  25. <div class="second-div"></div>   
  26. <div class="third-div"></div>  

以上编码可能展现的先后是紫色-黑色-鲜红色的div,尺寸各自是100px的1.5倍,1倍,0.5倍。

em 和 rem 是甚么

1em等于当今的字体样式规格,标值的更改代表着字体样式尺寸的调剂。em 有承继这个特点,也便是说,外界父元素界定了字体样式的em尺寸,內部子元素会承继这1特性的款式。

rem = root em 。说白了,root即根部的,顶部的。也便是根部的em,这个根部指的是HTML根元素。因此rem的尺寸是对于HTML根元素的尺寸做字体样式的相对性尺寸的调剂。

编码:

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.     body{   
  3.       font-size12px;     
  4.     }   
  5.     /*html{  
  6.         font-size: 12px;  
  7.     }*/  
  8.     .first-div{   
  9.         width200px;   
  10.         height100px;   
  11.         font-size: 1em;   
  12.         floatleft  
  13.     }   
  14.     .second-div{   
  15.         width200px;   
  16.         height100px;   
  17.         font-size: 2em;   
  18.         float:left  
  19.     }   
  20.     .third-div{   
  21.         width200px;   
  22.         height100px;   
  23.         font-size: 1rem;   
  24.         float:left  
  25.     }   
  26.     .fourth-div{   
  27.         width200px;   
  28.         height100px;   
  29.         font-size: 2rem;   
  30.         float:left  
  31.     }   
  32. </style>   
  33. <div class="first-div">Hello World</div>   
  34. <div class="second-div">Hello World</div>   
  35. <div class="third-div">Hello World</div>   
  36. <div class="fourth-div">Hello World</div>   

以上编码各自展现了不一样尺寸的字体样式,em和rem的差别能够根据仅仅注解body字体样式款式和html字体样式款式看来看她们之间的区别。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。