1、css选择器及优先级
选择器优先级：内联样式>id选择器>类选择器、属性选择器、伪类选择器>标签选择器、微元素选择器
注意：
!important优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式优先级最低；
通用选择器、子选择器和相邻兄弟选择器的权重均为0；
样式表的优先级：内敛样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式
2、css中可继承与不可继承的属性有哪些
不可继承的属性：
a、display
b、文本属性：vertical-align，text-decoration，text-shadow，white-space，unicode-bidi
c、盒子模型的属性：width、height、margin、border、padding
d、背景属性
f、定位属性
g、生成内容属性：content，counterr-reset，counter-increment
h、轮廓样式属性：outline-style，outline-width，outline-color、outline
i、页面样式属性：size、page-break-before，page-break-after
j、声音样式属性
可继承属性：
a、字体系列属性：font-family，font-weight，font-size，font-style
b、文本系列属性：text-indent，text-align，line-height，word-spacing，letter-spacing，text-transform，color
c、元素可见性：visibility
d、列表布局属性：list-style
f、光标属性：cursor
3、display的属性值及其作用
4、display的inline、inline-block和block的区别
block：块级元素，独占一行
inline：行内元素
inline-block：行内块元素
5、行内元素、块级元素
行内元素：设置宽高无效；可以设置水平方向的margin和padding，不能设置垂直方向的margin和padding；不会自动换行。
块级元素：可以设置宽高；水平和垂直均可设置margin和padding；可以自动换行；多个块状，默认排列从上到下。
6、隐藏元素的办法
a、display:none：渲染树不会包含该渲染对象，因此该元素不会再页面中占位置，也不会响应绑定的监听事件，会造成文本的重排
b、visibility:hidden：元素在页面中仍占据空间，但不会响应绑定的监听事件，不会造成文本的重排
c、opacity:0：将元素的透明度设置为0，元素在页面中仍占据空间，会响应绑定的监听事件
d、position:absolute：使用绝对定位将元素从可视区域内移除
e、z-index:负值：用其他元素遮盖本元素
f、clip/clip-path：使用元素裁剪来实现，元素在页面中仍占据空间，不会响应监听事件
g、transform:scale(0,0)：将元素缩放为0，元素在页面仍占据空间，不会响应监听事件
7、link和@import的区别
都是外部引用css的方式：
link是xhtml标签，除了加载css外，还可以定义rss等其他事务，@import只能加载css；
link引用css时，在页面载入时同时加载，@import需要页面完全载入以后加载；
link无兼容问题，@import低版本的浏览器不兼容；
link支持使用js控制DOM去修改样式，@import不支持。
8、transition和animation的区别
transition是过渡属性，强调过渡，需要一个触发事件才执行动画。类似于flash的补帧动画，设置一个开始关键帧，一个结束关键帧。
animation是动画属性，无需触发事件设定好时间后，就可自行执行，且可以循环一个动画。可以设置多个关键帧来完成动画。
9、伪元素和伪类的区别
伪元素：在内容前后插入额外的元素或样式，但是这些元素实际上不在文档中生成。它们只在外部可见，在文档中无法找到它们。
css
p::before {content:"伪元素：";}伪类：将特殊的效果加到特定的选择器上，是给已有元素添加类别，不会产生新的元素。
css
p:hover { color: red; }10、对盒模型的理解
css3中的盒模型分为标准盒模型、怪异盒模型（IE盒模型）。
盒模型都是由margin、border、padding、content组成的。
在标准盒模型中，width的宽度指的是content的宽度。
在怪异盒模型（IE盒模型）中，width的宽度等于content+border+padding。
可以通过设置box-sizing属性来改变盒模型属性：
content-box：标准盒模型；
border-box：怪异盒模型（IE盒模型）
11、为什么有时候用translate来改变位置而不是改变定位
translate是transform属性的一个值，改变transform或opacity不会触发浏览器重新布局或重绘，只会触发复合。而改变绝对定位会触发重新布局，进而触发重绘和复合。使用translate会更高效，可以缩短平滑动画绘制时间。translate改变位置时，元素依然会占据原始空间，绝对定位不会
12、li和li之间有看不见的空白间隔是什么原因引起的？如何解决
浏览器会把inline内联元素间的空白字符（空格、换行、tab等）渲染成一个空格。为了美观，通常是一个li放在一行，这导致li换行后产生的换行字符，会变成一个空格，占用一个字符的宽度。
解决办法：
a、为所有的li设置float:left，有些情况是不能设置浮动的
b、将所有的li写在同一行，不美观
c、给ul设置font-size:0，ul内其余字符还需重新设置大小，且safiri浏览器问题依旧存在
d、给ul设置letter-spacing:-8px，给li设置letter-spacing:normal
13、css3的新特性
新增各种css选择器，圆角，多列布局，阴影和反射，文字特效，文字渲染，线性渐变，旋转，缩放，定位，倾斜，动画，多背景
14、对css精灵图的理解
优点：减少http请求，提高了页面的性能，能减少图片的字节
缺点：测量背景位置时不好测量，维护图片也麻烦
15、什么是物理像素、逻辑像素和像素密度
以iphoneXS为例，当以px为单位书写css时，其宽度为414px*896px，也就是说当赋予一个div的宽度为414px时，这个div就会填满手机的宽度；
用尺子测量这部手机的物理像素为1242*2688，1242/414=3，也就是说，在单边上，一个逻辑像素=三个物理像素，就说这个屏幕的像素密度为3，也就是常说的3倍屏。
对于图片来说，若想不失真，1个图片像素至少要对应1个物理像素，假如原始图片是500*300，那么在3倍屏上，就要放一个1500*900的图片才能不失真。
16、margin和padding的使用场景
在border外侧添加空白，且空白处不需要背景（色）时，使用margin；
在border内侧添加空白，且空白处需要背景（色）时，使用padding。
17、对line-height的理解
line-height指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线的距离；
如果一个标签没有定义height属性，那么其最终表现的高度由line-height决定；
把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。
18、css的预处理器/后处理器时什么？为什么使用他们
预处理器：如less、sass等，用来预编译，增加了css的复用性、层级性、变量、循环等，让css更加的简洁，增加适应性以及可读性，可维护性等。
后处理器：如postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
使用原因：结构清晰，易于拓展；可以很方便的屏蔽浏览器私有语法的差异；可以轻松实现多重继承；完美的兼容了css，可用于老项目中。
19、display:inlie-block什么时候回显示间隙
有空格的时候会有间隙，可以删除空格解决；
margin正值时，可以使用margin负值解决；
使用font-size时，可以通过设置font-size:0、letter-spacing、word-spacing解决。
20、单行、多行文本溢出隐藏
单行文本：
css
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行多行文本：
css
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
display:-webkit-box; // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3; // 显示的行数21、判断元素是否到达可视区域
window.innerHeight是浏览器可视区域的高度；
document.body.scrollTop/document.documentElement.scrollTop是浏览器滚动过的距离；
offsetTop是元素顶部距离文档顶部的高度（包括滚动条的高度）；
内容到达显示区域：offsetTop < window.innerHeight + document.body.scrollTop
22、z-index在什么情况下会失效
z-index通常用在有两个重叠的标签，在一定情况下，一个标签显示在另一个标签上的情况。z-index值越大，就越在上层。z-index元素的position需要时absolute、relative、fixed。
失效的情况：
父元素position:relative时，子元素z-index失效。将父元素改为absolute或static；
元素没有设置position属性；
元素在设置z-index时还设置了float。去除float，改为display:inline-block。