CSS面试总结

1、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，接下来就不需要比较了，第二个选择器的优先级更高。
2、link和@import的区别？

• link属于XHTML标签，而@import是css提供的。
• 页面被加载时，Link会同时被加载，而@import引用的css会等到页面被加载完在加载。
• import指在IE5以上才能识别，而link时XHTML标签，无兼容问题。
• link方式的样式权重高于@import的权重。
• 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用Link标签，因为@import不是dom可以控制的。
  3、有哪些方式（css）可以隐藏页面元素？
• opacity:0:本质上是将元素的透明将为0，就看起来隐藏了，但依然是占据空间且可以交互
• visibility:hidden:与上一个方法类似的效果，占据空间，但是不可以交互了
• overflow:hidden:这个只隐藏元素溢出的部分，但是占据空间且不可交互
• display:none:这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局
• z-index:-9999:原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
• transform:scale(0,0):平面交换，将元素缩放为0，但是依然占据空间，但不可交互。
  还有一些靠绝对定位把元素移到可视区域外，或者用clip=path进行裁剪的操作过于Hack,就不提了。
  4、em\px\rem区别？
• px:绝对单位，页面按精确像素展示。
• em:相对单位，基准点为父节点字体得大小，如果自身定义了font-size按自身计算（默认浏览器字体是16px），整体页面内1em不是一个固定的值。
• rem:相对单位，可理解为“root em”相对根节点html的字体大小来计算，css3新加属性，chrome/firefox/IE9+支持
  5、块级元素水平居中的方法？
  如果使用Hack的话，水平居中的方法非常多，我们只介绍主流的，奇葩的见拓展阅读（后面会添加）

margin:0 auto//方法

.center{
   
	height:200px;
	width:200px;
	margin:0 auto;
	border:1px solid red;
}

<div class