一、CSS

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

1.标签选择器、伪元素选择器：1
2.类选择器、伪类选择器、属性选择器：10
3.id 选择器：100
4.内联样式：1000

注意事项：

1.!important 声明的样式的优先级最高；
2.如果优先级相同，则最后出现的样式生效；
3.继承得到的样式的优先级最低；
4.通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
5.样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

2、link和@import的区别？

link属于html标签，而@import是css提供的。
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载的。
兼容性问题：@import只在IE5以上才能识别，而link是html标签，无兼容性问题。
权重问题:@import的权重要高于link。
DOM操作:DOM可以操作link中的样式，而不可以操作@import中的样式。

3、有哪些⽅式（CSS）可以隐藏⻚⾯元素？

opacity: 0 占据空间，看不见，可以进行js交互
visibility:hidden 占据空间，看不见，并且无法进行js交互。
overflow：hidden 只隐藏溢出部分，并且不占据空间，也无法交互。
display:none 从文档流中去除，不占据空间同时也无法交互
z-index:-999 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了有时候需要先定位在使用position
transform: scale(0,0) 进行平面缩放，将大小缩小为0，但是任然占据空间，无法交互。

4、em\px\rem区别？

px：绝对单位，⻚⾯按精确像素展示。
em：相对单位，基准点为⽗节点字体的⼤⼩，如果⾃身定义了font-size按⾃身来计算（浏览器默认字体是16px），整个⻚⾯内1em不是⼀个固定的值。
rem：相对单位，可理解为”root em”, 相对根节点html的字体⼤⼩来计算，CSS3新加属性，chrome/firefox/IE9+⽀持

5、块级元素⽔平居中的⽅法？

/*第一种*/
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */

/* 第二种 */
/* flex水平垂直居中，父级display:flex，子级margin:auto */
.father{display: flex;
}
.child {margin:auto
}/* 第三四种 这两个差不多*/
/* position水平垂直居中，父级相对定位position:relative,子元素margin-top,margin-left 移动本身大小的一半 */
/* 运用css3中transform 移动元素水平垂直居中  */
.father {position: relative;
}
.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)
}/* 第五种 */
/* table水平垂直居中1 */
width: 100vw;
display: table-cell;
vertical-align: middle;
text-align: center;

6、CSS有⼏种定位⽅式？

position开头

static: 正常⽂档流定位，此时 top, right, bottom, left 和 z-index 属性⽆效，块级元素从上往下纵向排布，⾏级元素从左向右排列-
relative：相对定位，此时的『相对』是相对于正常⽂档流的位置。
absolute：相对于最近的⾮ static 定位祖先元素的偏移，来确定元素位置，⽐如⼀个绝对定位元素它的⽗级、和祖
⽗级元素都为relative，它会相对他的⽗级⽽产⽣偏移。
fixed：指定元素相对于屏幕视⼝（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变，⽐如那种回到顶部的按钮⼀般都是⽤此定位⽅式。
sticky：粘性定位，特性近似于relative和fixed的合体，其在实际应⽤中的近似效果就是IOS通讯录滚动的时候的

7、如何理解z-index？

CSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，⽽且z-index只能影响设置了position值的元素。我们可以把视图上的元素认为是⼀摞书的层叠，⽽⼈眼是俯视的视⻆，设置z-index的位置，就如同设置某⼀本书在这摞书中的位置。

8、如何理解层叠上下⽂？

每一个网页都有一个默认的层叠上下文。这个层叠上下文（桌子）的根源就是 <html></html>。 html标签中的一切都被置于这个默认的层叠上下文的一个层叠层上（物品放在桌子上）。

当你给一个定位元素赋予了除 auto 外的 z-index 值时，你就创建了一个新的层叠上下文

9、清除浮动有哪些⽅法？

清除浮动方法

使用clear:both清除浮动

利用伪元素clearfix来清除浮动

/*给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的*/
.clearfix:after{content:"";display:block;visibility:hidden;clear:both;
}

overflow方法的使用

/*当给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果*/
.box {border:1px solid #ccc;background:#eff2f4;overflow: auto
}

双伪元素方法的使用

/* 通过给父元素设置双伪元素来达到清除浮动的效果 */
.clearfix:before,.clearfix:after {content: "";display: block;clear: both;
}

10、你对css-sprites的理解

Sprites是一种性能优化技术，是一种将多个图像组合成单个图像文件以在网站上使用的方法，以提高性能，也被称为css精灵图

优点:

减少http请求, 加快网页的加载速度, 提高用户体验
减少图片的体积, 减少字节数
解决设计师图片命名的烦恼
更换风格方便

缺点:

开发时需要测量, 比较繁琐
维护的时候麻烦，维护成本较⾼，如果⻚⾯背景有少许改动，⼀般就要改这张合并的图⽚
精灵图不能随意改变大小和位置
宽屏高分辨率的屏幕下, 容易出现背景断裂

11、你对媒体查询的理解？

使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询

/* 必须使用@media查询 */
@media (max-width: 600px) {.child {display: none;}
}

更加详细的媒体查询

12、你对盒模型的理解？

CSS3 中的盒模型有以下两种：标准盒子模型、IE 盒子模型

盒模型是网页布局的基石，从盒子的内部到盒子的外围。

盒子的内容主要包过：

内容 content（图片、文本、视频、小盒子...）
内填充（补白）padding （让文本和盒子的周围产生间距相当于盒子里面的泡沫）
具体的css属性盒子本身（border）
外边距 margin。

13、标准盒模型和怪异盒模型有什么区别？

标准盒模型和 IE 盒模型的区别在于设置 width 和 height 时，所对应的范围不同：

1.标准盒模型的 width 和 height 属性的范围只包含了 content，

2.IE 盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。

可以通过修改元素的 box-sizing 属性来改变元素的盒模型：

1.box-sizeing: content-box表示标准盒模型（默认值）

2.box-sizeing: border-box表示 IE 盒模型（怪异盒模型）

14、谈谈对BFC(Block Formatting Context)的理解？

1.什么是BFC：

一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素

2.怎样使一个元素变成BFC区域

body根元素
设置浮动，不包括none
设置定位，absoulte或者fixed
行内块显示模式，inline-block
设置overflow，即hidden，auto，scroll
表格单元格，table-cell
弹性布局，flex

15、为什么有时候⼈们⽤translate来改变位置⽽不是定位？

translate是transform的一个值。改变transform或者opacity不会触发浏览器重新布局，或者重绘，只会触发复合。而改变绝对定位会触发回流，进而触发重绘，所以说在使用绝对定位时会触发重绘和回流操作。

并且transform使浏览器为元素创建一个GPU图层，但是改变绝对定位会使用到CPU，因此translate更加高效，可以缩短平滑动画的绘制时间。而translate改变元素时，元素依然会占据原始位置，但是绝对定位不会发生这样的情况。

16、伪类和伪元素的区别是什么？

伪类：用来添加一些选择器的特殊效果。

伪元素：伪元素是用来添加一些选择器的特殊效果。：后面加after这样的

区别：

伪元素其实相当于伪造了一个元素，例如before,first-letter达到的效果就是伪造了一个元素，然后添加了其相应的效果而已；而伪类没有伪造元素，例如first-child只是给子元素添加样式而已。
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

17、你对flex的理解？

一、flex-direction: 调整主轴方向

row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。

二、justify-content 主要用来设置主轴方向的对齐方式

flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。

三、align-items 用于调整侧轴的对齐方式

flex-start：元素在侧轴的起始位置对齐。
flex-end：元素在侧轴的结束位置对齐。
center：元素在侧轴上居中对齐。
stretch：元素的高度会被拉伸到最大（不给高度时, 才拉伸）。

四、flex-wrap 属性控制 flex 容器是单行或者多行,默认不换行

nowrap：不换行（默认），如果宽度溢出，会压缩子盒子的宽度。
wrap：当宽度不够的时候，会换行。

五、align-content 用来设置多行的 flex 容器的排列方式

flex-start：各行向侧轴的起始位置堆叠。
flex-end：各行向弹性盒容器的结束位置堆叠。
center：各行向弹性盒容器的中间位置堆叠。
space-around：各行在侧轴中平均分布。
space-between：第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch：拉伸，不设置高度的情况下。

18、关于CSS的动画与过渡问题

过渡transition：

特点：

过渡是两个状态之间的过渡，只能从一种状态过渡到另一种状态
过渡需要事件触发，不能自动执行

综合属性:

可以同时控制多个属性进行过渡，多个属性之间用逗号隔

transition: width 2s linear 1s,height 2s linear 1s;

拆分属性：

transition-property：
- 定义过渡的属性名(样式名称)，比如width height border
- 可以具体的样式属性名，也可以使用关键字 all(所有属性共用同样的效果)
transition-duration:
- 定义动画持续时间单位是秒/s
transition-delay:
- 延迟执行，延迟时间，单位是秒/s
transition-timing-function：
- 定义动画函数曲线
- 取值：
  - ease : 先快后慢
  - ease-in ：越来越快
  - ease-out: 越来越慢
  - ease-in-out：先慢再快再慢
  - liner：匀速直线运动
  - cubic-bezier()：贝赛尔曲线 cubic-bezier(.17,.67,.83,.67)

动画animation

特点：

动画是多个状态之前的改变
动画可以自动执行，不需要事件触发
动画通过 @keyframes 定义关键帧定义动画

animation: name duration timing-function delay iteration-count direction fill-mode;
属性名：动画名 动画持续时间 动画函数曲线 延迟执行  定义动画的执行次数  定义动画执行顺序  定义动画执行后保留的状态

拆分属性：

animation-name: 引用动画的名字（定义动画的名字）
animation-duration: 动画持续时间
animation-timing-function: 动画函数曲线
animation-delay： 延迟执行
animation-iteration-count：

定义动画的执行次数
- 指定动画无限执行：infinite
animation-direction：

定义动画执行的顺序
- 取值：alternate 默认值
- alternate-reverse 动画先反向执行，然后再正向执行，必须结合 iteration-count 属性一起使用才有效果；动画至少要执行两次
- reverse 动画反向执行
animation-fill-mode:

定义动画执行结束后保留的状态
- 取值：forword 动画保留终点状态
- backwards 默认值，动画保留起点状态
- both 动画将遵循forwards 和 backwards 的规则，从而再两个方向上扩展动画属性

1.from-to

CSS

@keyframes name{from{起点状态}to{终点状态}
}

2.百分比

@keyframes name{0%{起点状态}n%{定义多个中间状态}100%{终点状态}
}

动画(animation)和过渡(transition)

区别：transition 只能声明元素变化从开始到结束之间的变化关系。而 animation 则是可以自由的定义一段动画在元素上的开始和结束。而且你能通过animation-iteration-count来设置动画的次数
transition: 强调是单一属性的动画效果,从开始到结束整个过程,中间不会发生动画的转折
animation：强调的是多种动画属性的结合，能够有效的排列动画执行时间的某时做某事从开始到结束的过程可以是简单，也可以是复杂。算是 transition 的加强版

动画和过渡原文

2022高频面试题之css篇相关推荐

2023大厂高频面试题之Vue篇(2)
系列文章: 2023前端大厂面试题之JavaScript篇(1) 2023前端大厂面试题之JavaScript篇(2) 2023前端大厂面试题之JavaScript篇(3) 2023前端大厂面试题之J ...
前端面试题之CSS篇
前端面试题之CSS篇一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和in ...
前端面试题汇总CSS篇
转载自:https://www.cnblogs.com/zhangshuda/p/8465043.html 前端面试题 ----css篇 1.css盒模型有哪些及区别content-box borde ...
前端计划——面试题总结-CSS篇
前端面试之CSS篇 1.三种基本引入方式外部样式表 <link rel="stylesheet" type="text/css" href=" ...
【网络协议】专题总结以及网络协议高频面试题汇总(8篇)
这是一份超详细的HTTP协议攻略,内容大纲如下: 内容如下(点击即可跳转): 一篇文章带你详解 HTTP 协议(上) 一篇文章带你详解 HTTP 协议之报文首部及字段详解(中) 一篇文章带你详解 HT ...
面试题：高频前端面试题之CSS篇
目录一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和inline-blo ...
与歌谣通关前端面试题【CSS篇汇总目录】
我是歌谣放弃很容易但坚持一定很酷欢迎关注公众号小歌谣一起讨论前后端知识 CSS汇总 [CSS] [css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现 [css] CSS3有哪些新增的特性 ...
前端开发实习面试题（CSS篇）
目录 1.CSS3有哪些新特性? 2.介绍一下盒子模型(由什么组成)? 3.定位有哪些值,分别是相对谁定位? 4.如果我想给table表格的第一列内容添加样式,如何做? 5.浮动的作用,如何清除浮动? ...
前端面试题---（css篇①）15道题
什么是css???????? CSS全称为Cascading Style Sheets,中文翻译为"层叠样式表",简称CSS样式表,是一种用来表现HTML或XML等文件式样的计算机 ...

2022高频面试题之css篇