金三银四css必知知识点总结

1.css选择器和其优先级

1. id选择器（ # myid）
2. 类选择器（.myclassname）
3. 标签(元素)选择器（div, h1, p）
4. 相邻选择器（h1 + p）
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符选择器（ * ）
8. 属性选择器（a[rel = “external”]）
9. 伪类选择器（a:hover,a:focus li:nth-child）
   伪元素选择器（a::before,a::after）、分组选择器。 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

2. 伪类和伪元素的区别：

伪类作用的对象是整个对象，伪类没有创造元素，例如：first-child只是给子元素添加样式。
伪元素作用于元素的一部分，一个段落的第一行或第一个字母，伪元素相当于创造了一个元素，相当于创造了一个新的元素，然后添加了响应的效果。

3.居中定位

1. flex布局

 display: flex;
    /*垂直居中*/
 align-items: center;
    /*水平居中*/
 justify-content: center;

2. 绝对定位 + transform

/*使用绝对定位和transform*/
.box{
   
    width: 300px;
    height: 300px;
    position: relative;
}
.box-item{
   
    width: 100px;
    height: 100px;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
} 

3. 绝对定位 + margin

/*使用绝对定位和margin负外边距对块级元素进行垂直居中*/
.box{
   
    width: 300px;
    height: 300px;
    position:relative;
}
.box-item{
   
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}

4. table布局

/*使用display:table和vertical-align:middle进行垂直居中*/

.box{
   
    width: 300px;
    height: 300px;
    display: table;