css零碎知识点整理伪类和伪元素的区别？表现形式区分：在w3c, css3中，已经做了明确区分。伪类用一个冒号表示（:

1. 伪类和伪元素的区别？

表现形式区分

在w3c, css3中，已经做了明确区分。伪类用一个冒号表示（:nth-child()）；伪元素用两个冒号区分（::after）。

用途区分

伪类用于DOM的的检索查询操作；伪元素用户创建、添加DOM，且伪元素不是会生成DOM元素，只会在文档中打上标记，且只能随DOM的存在而存在，但它却拥有DOM一些特性。

举例说明:

伪类一般用途：

style
       .parent-node>div:nth-child(2) {            background-color: yellow;        }        .a-link:link{            color: royalblue;        }        .a-link:visited{            color: black;        }        .a-link:hover{            color: red;        }                .a-link:focus{            color: blue;        }        .a-link:active{            color: aqua;        }


HTML

<div class="parent-node">    <a href="#" class="a-link">我是一个a链接</a>    <div>我是第二个孩子</div></div>

伪元素一般用途：

   style
   .parent-node{           width: 200px;           height: 100px;           border: 1px solid silver;           margin-left: 100px;           position: relative;        }        .parent-node::after{            content: '';            width: 0;            height: 0;            position: absolute;            bottom: -20px;            left: 50%;            border: 10px solid transparent;            border-top: 10px solid red;        }

HTML

<div class="parent-node"></div>

通常用到的伪类场景：

:hover 用于悬浮时添加背景色字体，以及变形等。还可借助display：none与display:block；隐藏与显示dom，达到下拉菜单、悬浮蒙层、过度动画等效果。

:disabled 用于设置button、input、checkbox等禁用样式

:nth-of-type(event) DOM的偶数个
:nth-of-type(odd) DOM的奇数个一般用于制作表格样式

通常用到的伪元素场景：

:: selection 用于设置用户鼠标选中的元素内容
:: after 用书设置DOM之后的内容，一般制作图案，字体
:: before 用于设置DOM之前的内容，作用同上。

2. 如何实现一个元素的水平垂直居中、对一个非定长宽的块状元素如何做垂直水平居中

存在父级

flex

display: flex;
justify-content:center;
align-items: center;

margin：auto;

margin:auto;只能实现水平居中，相当于，margin: 0 auto; 因为margin-top与margin-bottom默认值为0；且DOM必须为块级元素，且有宽度。否则无法达到水平居中。

所以为了实现水平垂直居中，我们可以利用margin-top,来实现垂直居中，虽然有点土。

margin: 50%（父级高度的50%） auto;

绝对定位

positon:abolute; left:50%;top:50%; 此方法父级必须改变默认定位（如： position:relative;），否则DOM会根据就近原则,寻找祖父级进行定位，会脱离父级。且父级必须有宽度和高度。

positon:abolute; left:50%;top:50%;

grid + margin: auto;

父级设置dispaly:grid; 子级设置margin:auto; 为什么这里的margin-bottom与margin-top不是默认0呢？会生效呢？因为在BFC中，flex与grid,在没进行空间分配时，剩余空间会自动填充进margin-bottom与margin-top；

父级
dispaly:grid; 

子级
margin:auto;

transform：translate + absolute

父级
positon:relative;
width: 200px;
height:200px;
子级
position:absolution;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

flex + margin: auto; 同grid

父级
dispaly:flex; 

子级
margin:auto;