Web前端CSS面试题（含答案）

• CSS选择器的优先级是怎样的？
• link和@import的区别?
• 有那些方式(CSS)可以隐藏页面元素？
• em\px\rem区别？
• 块级元素水平居中的方法？
• CSS有几种定位方式?
• 如何理解z-index？
• 如何理解层叠上下文？
• 清除浮动有哪些方法？
• 你对css-sprites的理解
• 你对媒体查询的理解
• 你对盒模型的理解
• 标准盒模型和怪异盒模型有什么区别？
• 谈谈对BFC(Block Formatting Context)的理解？
• 为什么有时候人们用translate来改变位置而不是定位?
• 伪类和伪元素的区别是什么？
• 你对flex的理解？
• 关于CSS的动画和过渡问题

CSS选择器的优先级是怎样的？

CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器
到具体的计算层面，优先级是由A，B，C，D的值来决定的，其中它们的值计算规则如下：

• A的值等于1的前提是存在内联样式，否则A=0；
• B的值等于 ID选择器 出现的次数；
• C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数；
• D的值等于 标签选择器 和 伪元素 出现的总次数；

就比如下面的选择器，它不存在内联样式，所有A=0，不存在id选择器B=0，存在一个类选择器C=1，存在三个标签选择器D=3，那么最终计算结果为：{0，0，1，3}

ul ol li .red {
   
	...
}

按照这个计算方式，下面的计算结果为:{0，1，0，0}

#red{
   
 ...
}

我们的比较优先级的方式是从A到D去比较值的大小，A,B,C,D权重从左到右，依次减小。判断优先级时，从左到右，一一比较，直到比较出最大值，即可停止。

比如第二个例子的B与第一个例子的B相比，1>0,接下来就不需要比较了，第二个选择器的优先级更高。

link和@import的区别?

• link属于XHTML标签，而@import是CSS提供的。
• 页面加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载。
• import只在IE 5 以上才能识别，而link是XHTML标签，无兼容问题。
• link方式的样式权重高于@import的权重。
• 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不时dom可以控制的。

有哪些方式(CSS)可以隐藏页面元素？

• opacity:0 : 本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互。
• visibility:hidden：与上一个方法类似的效果，占据空间，但是不可以交互了。
• overflow:hidden：这个只隐藏元素溢出的部分，但是占据空间且不可交互。
• display:none：这个是彻底隐藏了元素，元素从文档流中小时，即不占据空间也不交互，也不影响布局。
• z-index: