CSS，JS基础面试题了解一下？

## CSS

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

CSS选择器优先级最高到最低顺序为：

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.子选择器（ul < li）

5.后代选择器（li a）

6.伪类选择（a:hover,li:nth-child）

最后，需要注意的是：　　

!important的优先级是最高的，但出现冲突时则需比较”四位数“;

优先级相同时，则采用就近原则，选择最后出现的样式;

继承得来的属性，其优先级最低。

- [link和@import的区别？ ][]

1.从属关系区别: @import 是 CSS 提供的语法规则，只有导入样式表的作用； link 是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别: 加载页面时， link 标签引入的 CSS 被同时加载； @import 引入的 CSS 将在页面加载完毕后被加载

- [有哪些⽅式（CSS）可以隐藏⻚⾯元素？ ][]

1,display:none  2.overflow:hedden   3.可以通过将透明度调结为0（opacity: 0;），完全透明状态来达到隐藏页面元素的效果。

- [em\px\rem区别？ ][]

1. px为固值单位像素，浏览器最小的显示单位
2. em:相对单位，以父元素的字号为标准计算，父元素字体大小的多少倍“嵌套中都使用此单位会有逐级相乘的状态”。
3. rem:相对单位，以跟标签html的字号为标准计算，rem不会受上级元素的字号影响。

- [块级元素⽔平居中的⽅法？ ][]

1. 使用margin：0 auto；2.利用弹性布局 display：flex； justify-content: center;  align-items: center;

- [CSS有⼏种定位⽅式？ ][]

1. 有五种方式
2. 分别是：static静态定位，absolute绝对定位，relative相对定位，fixed固定定位，sticky粘性定位（relative相对定位，fixed固定定位的结合使用）

- [如何理解z-index？ ][]

1. 显示元素的堆叠顺序，当多个定位的块重叠时通过调节z-index的值可以让下面被覆盖的块显示出来，z-index的值为number“可为负数”，默认值0

- [如何理解层叠上下⽂？ ][]

1. 在HTML中有一个三维概念，也就是我们面向电脑屏幕的这一端为Z轴。 而凡是拥有层叠上下文的元素，将离用户最近，也就是越靠在Z轴前面。默认情况下只有根元素HTML会产生一个层叠上下文，并且元素一旦使用了一些属性也将会产生一个层叠上下文，如我们常用的定位属性。如两个层叠上下文相遇时，总是后一个层叠前一个，除非使用z-index来改变。

- [清除浮动有哪些⽅法？ ][]

1. 给父元素添加 .overflow:hedden
2. 使用after位元素清除浮动
3. 给父元素设置宽高

- [你对css-sprites的理解 ][]

1. css-sprites为精灵图片，精灵图片使用比较简单方便，而且还可以减少请求数量减小服务器压力，可以用来性能优化
2. 又称精灵图片，就是将很多的小图放置到一张大图片上，精灵图主要做为背景图使用。之所以使用精灵图是因为使用某张图片时需要向服务器发送请求资源，如果图片过多服务器的压力就会较大，所以精灵图片可以减轻服务器的压力。

使用方式：背景插入，图片大小，背景定位

- [你对媒体查询的理解？ ][]

1.语法： @media mediaType 操作符（media feature） {css-code}

         @media  媒体查询，可以针对不同的媒体类型定义不同的样式。

         mediaType  媒体类型

              -screen  表示电脑，平板，智能手机屏幕，包含有关客户端显示屏幕的信息。

 2.操作符： 创建复杂的媒体类型

              -and  所有条件都要成立的条件下，才能使用样式表。

              ,  有一个条件成立，就可以执行代码块。

              -not 排除设备类型，如果后面是条件“作为条件取反使用。

         （media feature） 条件“规定媒体/设备的特征”。

              -max- 相当于小于等于<=

              -min- 相当于大于等于>=

         {css-code} 媒体查询符合条件执行的css代码。