前端面试官常问的问题和答案(css面试题级答案解析)

1、CSS有哪些基本的选择器，执行先后顺序？

id选择器 => #myId {}

类选择器 => .myClass {}

标签选择器 => p,h1 {}

后代选择器 => div h1 {}

子选择器 => div>h1 {}

兄弟选择器(所有的兄弟) => ul~h1 {}

相邻兄弟选择器 => ul+h1 {}

属性选择器 => li[name='sss'] {}

伪类选择器 => h1:hover {}

伪元素选择器 => h1::before{}

通配符选择器* => * {}

!important>内联样式（非选择器）>ID选择器>类选择器>标签选择器>通配符选择器（*）

2、垂直水平居中方式有哪些？

[CSS 中几种最常用的水平垂直居中的方法](CSS 中几种最常用的水平垂直居中的方法)

3、常用的块元素与行内元素有哪些？有什么特征

块元素：div、h1~h6、ul、li、table、p、br、form。

特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行

行内元素：span、a、img、textarea、select、option、input。

特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）。

4、清除浮动

父级div定义overflow:hidden（如果父级元素有定位元素超出父级，超出部分会隐藏，）

给浮动元素父级增加标签（由于新增标签会造成不必要的渲染，不建议使用）

伪元素清除浮动：给浮动元素父级增加 .clearfix::after（content: ‘’; display: table;

clear: both;）（不会新增标签，不会有其他影响，）

5、CSS3新特征

圆角（border-radius）

阴影（box-shadow）

文字特效(text-shadow)

线性渐变（gradient）

变换(transform)

更多的CSS选择器

更多背景设置（background）

色彩模式（rgba）

伪元素（::selection）

媒体查询（@media）

多栏布局（column）

图片边框（border-image）

6、CSS中有哪些长度单位？

绝对长度单位：px

百分比: %

相对父元素字体大小单位: em

相对于根元素字体大小的单位: rem

相对于视口*宽度的百分比（100vw即视窗宽度的100%）: vw

相对于视口*高度的百分比（100vh即视窗高度的100%）: vh

7、display:none和visibility:hidden的区别

display:none：隐藏元素，在文档布局中不在给它分配空间（从文档中移除），会引起回流（重排）

visibility:hidden: 隐藏元素，但是在文档布局中仍保留原来的空间（还在文档中），

不会引起回流（重绘）

8、什么是重绘，重排？如何解决？重绘（repaint/redraw）

某个dom节点的颜色，背景颜色变了，字体大小，只影响自己，不影响其他元素。

注意：table及其内部元素可能需要多次计算才能确定好其在渲染树中节点的属性，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。

重排（回流/reflow/重构）

某个dom节点的宽高，布局，隐藏等发生改变，不仅自身发生了改变，而且其他元素也会受到影响随之发生改变。每个页面最少一次回流，就是页面第一次加载的时候。

触发重排的原因

页面初始化渲染（无可避免）

添加或删除可见的DOM元素

元素尺寸的改变------大小，外边距；边框

浏览器窗口尺寸的变化

填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变

读取某些元素属性：（
offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,

　
scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　

　currentStyle(IE)　)

1.重绘不一定重排，但是重排一定会重绘

2.重绘和重排的成本都是非常高的，要尽量减少dom的增删改

如何解决

不要直接操作样式，先设置好class，然后修改DOM的className;

position:absolute 与flex 不会导致重排

不要把DOM 节点的属性放在一个循环当成循环的变量；

需要动画的元素脱离文档流；

不使用table 布局，

尽量不修改影响范围比较大的DOM;

如果要多次添加DOM,先使用
document.createDocumentFragment() 创建一个盒子，

完盒子里面先添加子元素，添加完成在插入元素中；

9、link和@import的区别？

link属于html标签，而@import是css提供的。

页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载的。

兼容性问题：@import只在IE5以上才能识别，而link是html标签，无兼容性问题。

权重问题:@import的权重要高于link。

DOM操作:DOM可以操作link中的样式，而不可以操作@import中的样式。

<!-- html 文件 -->
<!-- link 方式，推荐 -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<!-- @import 方式 -->
<style type="text/css" media="screen">
  @import url(style.css);
</style>

9、如何让 CSS 只在当前组件中起作用？

将当前组件的<style>修改为<style scoped>。