§ 1.CSS的px，%，em，rem，vh，vw的区别：

在开发移动端的时候，需要适配各种机型，不同的机型的分辨率都是不一样的，我们需要一套代码，去适配不同的机型大小

在index.html文件里的head新增meta标签，width=device-width：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果不设置width=device-width，移动设备会按照默认视口的宽度去渲染，比如手机是375的屏幕，默认视口可能是800,1000，这样会出现横向滚动条，这样就有问题，所以我们需要设置一下，也就是把我们网页的宽度和设备的宽度是一样的，这样就不会出现横向滚动条以及内容被截断的情况

1.px：

px是固定的单位长度，一旦设置了就无法随页面的大小而适应改变

2.em：

em是相对长度定位，比px更具有灵活性，em的长度是相对于父元素计算的，需要注意的是，em存在继承效果：

1.如果使用em存在继承效果，每个元素都自动继承其父元素的字体大小

2.只要父级元素及上面一直有fontsize为em单位，则会一直继承

3.rem：

rem是css3新引进的一种度量单位，r = root，rem相对于根元素，也就是html的字体大小，比如给html设置一个标准值，比如是font-size为62.5%，那么1rem等于16px，12像素的大小就是12除以16等于0.75rem，14像素的大小就是14除以16等于0.875rem

4.vh / vw：

是指viewport，vh / vw是相对于视口的宽高进行控制的，比如屏幕375px，1wh就是3.75px，这样换算就非常简单

5.%百分比：

百分比是相对于父元素的

补充：

谷歌浏览器默认字体大小是16px，谷歌浏览器字体大小最小为12px，如果想要设置小于12px的字体，可以通过CSS3的transform的scale()，缩放方法来解决

§ 2.说一下CSS权重优先级

!important(无穷大) > 内联样式(1000) > id选择器(100) > 类选择器(属性选择器，伪类选择器)(10) > 标签选择器(伪元素选择器)(1) > 通配符选择器(0) > 继承(0)

§ 3.说一下CSS伪类，伪元素都有哪些

参考：www.w3school.com.cn/css/css_pse…

伪类选择器：

1.动态伪类

:link => 链接没有被访问前的样式效果

:visited => 链接被访问后的样式效果

:hover => 鼠标悬停在元素上面时的样式效果

:active => 点击元素时的样式效果

:focus => 用于元素成为焦点时的样式效果，一般用于表单元素

2.结构伪类

:first-child => 选择某个元素下的第一个子元素

:last-child => 选择某个元素下的最后一个子元素

:nth-child => 选择某个元素下的一个或多个特定的子元素

:nth-last-child => 选择某个元素的一个或多个特定的子元素，从后往前数

:nth-of-type => 选择指定的元素

:nth-last-of-type => 选择指定的元素，从后往前数

:first-of-type => 选择一个父级元素下的第一个同类型子元素

:last-of-type => 选择一个父级元素下的第一个同类型子元素，从后往前数

:only-child => 选择的元素是其父元素的唯一一个子元素

:only-of-type => 选择一个元素是上级元素下唯一相同类型的子元素

:empty => 选择的元素里没有任何内容（空标签）

3.否定伪类

:not => 排查或者过滤特定元素

4.状态伪类

:enabled => 选择匹配指定范围内所有可用的UI元素

:disabled => 选择匹配指定范围内所有不可用的UI元素

:checked => 选择匹配指定范围内所有可用的UI元素

5.目标伪类

:target => 选择匹配父元素的所有元素，并且匹配元素被相关URL指向

伪元素选择器：

:after => 在标签里的元素之后插入内容

:before => 在标签里的元素之前插入内容

:first-letter => 选择每个标签里的元素的首字母

:first-line => 选择每个标签里的元素首行

:selection => 选择用户选择的元素部分

§ 4.css布局模型，flex布局有哪些属性？

§ 5.css属性，visibility，display，opacity有什么区别？

visibility：设置为hidden时，元素不可见，但是占位，元素在页面结构中不消失，默认值为visible可见

display：设置为none时，元素不可见，不占位，元素在页面结构中不展示

opacity：通过透明度，来实现元素不可见，为0时则不可见，占位，元素在页面结构中不消失

§ 6.如何用css实现div水平垂直居中，常见一共都有哪几种方法？

1.绝对定位：

父div为position: relative，子div为position: absolute，上右下左各为0，margin为auto

.farther{
    width:100vw;
    height:100vh;
    position: relative;
}
.son{
    width:500px;
    height:500px;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

2.子元素相对父元素绝对定位

父div为position: relative，子div为position: absolute，left和right各50%，transform: translate(-50%,-50%)，平移各50%

.farther{
    width:100vw;
    height:100vh;
    position: relative;
}
.son{
    width:500px;
    height:500px;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

3.利用绝对定位，calc函数动态计算实现水平垂直居中，缺点是需要知道父元素的宽高，不推荐使用（备注：别处找的）

父div为position: relative，子div为position: absolute，left用calc函数，父div的宽度减去子div的宽度除以2，top用calc函数，父div的高度减去子div的高度除以2

4.flex布局：

父div设置为display:flex，align-items: center，justify-content: center，子div正常宽高

.farther{
    width:100vw;
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.son{
    width:500px;
    height:500px;
}

5.grid布局：

父div设置为display:grid，grid-template-columns: 50px，grid-template-rows: 50px，place-content: center center，子div正常宽高

css 常问面试题（1）后续持续更新