【css】面试题

1、说一说都有哪些css的选择器

id选择器、类选择器、标签选择器、子代选择器（ul>li）、后代选择器（div h1）
伪类选择器：

• a:link{…} //为访问的链接
• a:hover{…} //鼠标悬浮链接后的样式
• a:visited{…} //访问过的链接样式
• a:active{…} //已选中的链接
• p:nth-child(2) //选择p元素的父元素的第二个元素
• p:nth-of-type(2) //选择所有p元素中的第二个元素
• p:only-child // 匹配p元素，该p元素是其父元素中的唯一child
• p:first-child //匹配属于第一个child的p元素
• p:last-child // 匹配属于最后一个child的p元素

2、css单位之间的差异

1. px 像素，绝对单位，1px相当于屏幕中的一个点；
2. em 相对单位，基准点是它的父元素的font-size，如果自身设置了font-size，那基准点是自己，整个页面中不同位置1em代表的大小有所不同；
3. rem 相对于根节点html的字体大小来计算，此时页面中不同位置的1rem代表的大小相同；
4. vw 相对单位，将屏幕宽度分成100份，1vw就是宽度的1%；
5. vh 与vw类似，不过是将高度分成100份；
6. vmin 代表vw和vh中最小的那个；
7. vmax 代表vw和vh中最大的那个；
8. % 百分比
9. 还有其他的in（英寸）、cm（厘米）、pt(磅)等等。

3、2d、3d转换

2d转换

• transform:rotate(30deg); //将元素顺时针旋转30度，如果值为负则为逆时针旋转；
• transform:translate(50px,100px); //将元素从当前位置移动到（left，top）= （50px, 100px）的地方；
• transform:scale(2, 4) //将元素宽度放大两配，高度放大四倍；
• transform:skew(30deg, 60deg) //将元素根据x轴翻转30°，再根据y轴翻转60°；

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。
perspective	定义视角和透视的方式（详解博客）

4、哪些属性可以被继承？
博客链接

5、z-index如何生效？z-index设置成0和不设置的区别？
（1）div的position不能是static；
（2）设置为0会脱离文档流，不设置，则默认为auto不会建立层叠次序
https://www.jianshu.com/p/cdd90d28380b