前端必修技能：高手进阶核心知识分享 - css盒的before、after和子元素的层 ...

早在十几二十年前，我最开始接触CSS的时间，根本没听说过 before 和 after ，那时间公司的浏览器更新到了IE8，我谁人老古董的WINXP系统的浏览器升级到IE7，市面上以致大部门电脑的浏览器还都是IE6。那时间每次做页面 ，最头疼的就是各个浏览器的兼容问题。以致公司专门请了个人坐在两台电脑前，装了各个品牌，各个版本的浏览器，在那不绝的刷我们的项目。如今好了，浏览器兼容问题越来越少了，跨平台成为前端要办理的新的高峰。学习的氛围越来越好，国内的高手大神们也越来越多了，但要学的技能也越来越多了。。。CSS都从原来那么大略的玩意儿，变成如今可以写动画的浏览器前端利器，以致能办理一部门原来必须JS才能办理的问题。唉。。老了。
话题扯远了，这篇文章呢，重要是分享一下关于 ::before、::after 和 子元素的层叠关系 以及 这几种元素团结的应用。
前端必修技能：高手进阶核心知识分享 - css盒的before、after和子元素的层叠关系剖析及应用

CSS层叠由来

在前端的天下里，浏览器不应该是平面的。它不但有X轴（水平方向），有Y轴（竖直方向），它还有个Z轴（垂直方向：我们的视线与浏览器平面的垂直方向）。你必须可以或许理解这个方向，才能公道而熟练的利用它（层叠的关系），制作出精美的页面和漂亮的动画。

Z轴的存在,就引申出 一个问题：各元素之间 距离 观察者 谁近谁远的 问题：---- 上下文堆叠顺序 (stack contex)。CSS的中文全称叫什么来着：层叠样式表。没错，CSS本来就为了办理HTML各个标签之间的层叠关系和样式体现而诞生的。
在HTML页面中的各个标签，从书写角度上看，存在这两种关系。一种是顺序（层叠），一种是嵌套。那么它们在浏览器剖析的时间，如果不发生位置的重叠，全部排开铺在网页上，这个情况是好办理的。但是，如果，需要位置重叠时间，谁在前（上）面，谁又在后（下）面呢？顺序排列的几个标签，怎样叠放？嵌套的标签，又怎样表现？ 什么又是 伪元素 ::before 和::after 呢？
伪元素::before 和 ::after

::before和::after：::before表现元素的开始，::after表现元素的最后，before和after必须团结content属性来使用。
特殊需要留意的是：单标签 不支持伪元素 ::before 和 ::after ..
代码示例：

1.     <style>
2.         p::after{
3.             content: "hahaha";
4.             color: red;
5.         }
6.         p::before{
7.             content: "hehehe";
8.             color: coral;
9.         }
10. </style>

复制代码

层叠剖析

我们来看一个HTML的结构的例子：

1.   <div class="father">
2.     <div class="child-1"></div>
3.     <div class="child-2"></div>
4.   </div>

复制代码

在这个例子里，很明显的 div元素father 作为父级，与它的 子元素 div元素 child-1 和 child-2 就是嵌套关系。而两个子元素之间，就是层叠关系。那么我们在不改变他们的定位关系（postion）和Z轴层级（z-index）的前提下，看看他们是怎样在浏览器中体现的：

1. /* css */
2. .father {
3.   position: relative;
4.   height: 400px;
5.   width: 400px;
6.   background: #ddd;
7.   color: #fff;
8.    
9. }
10. .father::before {
11.   content: "before";   
12.   width: 100px;
13.   height: 100px;
14.   background: blue;  
15. }
16. .father::after {
17.   content: "after";  
18.   width: 100px;
19.   height: 100px;
20.   background: orange;
21.   /* transform: translate(60px,-240px); */
22. }
23. .child-1 {
24.   display: block;
25.   height: 100px;
26.   width: 100px;
27.   background: green;
28.   /* transform: translate(20px,-80px); */
29. }
30. .child-2 {
31.   display: block;
32.   height: 100px;
33.   width: 100px;
34.   background: purple;
35.   /* transform: translate(40px,-160px); */
36. }

复制代码

首先，我们看看不做任何位移时，father元素的 ::before ::after 和它的两个子元素 child-1 child-2的 展示方式。革新浏览器：

接下来，我们给子元素举行位移，不移动befoer和after，看看它们怎样排列：

1. .father::before {
2.   content: "before";  
3.   display: block;
4.   width: 100px;
5.   height: 100px;
6.   background: blue;  
7. }
8. .father::after {
9.   content: "after";  
10.   display: block;
11.   width: 100px;
12.   height: 100px;
13.   background: orange;
14.   /* transform: translate(60px,-240px); */
15. }
16. .child-1 {
17.   display: block;
18.   height: 100px;
19.   width: 100px;
20.   background: green;
21.   transform: translate(20px,-80px);
22. }
23. .child-2 {
24.   display: block;
25.   height: 100px;
26.   width: 100px;
27.   

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。