CSS 面试题：CSS的权重与优先级

对 CSS 的权重和优先级了解吗? 可以简单说下。

我们的回答可以通过以下方式来回答:

1. 权重:

1. 权重概念:
   1. 权重, 是一个相对的概念, 是针对某一指标而言; 某一指标的权重是指该指标在整体评价中的相对重要程度 。
2. CSS权重 指的是 css 选择器的优先级, 优先级高的 css 样式会覆盖优先级低的 css 样式, 优先级越高说明权重越高, 反之亦然 。

2. 优先级:

1. css优先级规则:
   1. css 选择规则的权值不同时, 权值高的优先;
   2. css 选择规则的权值相同时, 后定义的规则优先;
   3. css 属性后面加 !important 时, 无条件绝对优先;

2. 权值的计算:
   1. 第一等级: 代表 内联样式; 如 style="", 权值为 1,0,0,0 。
   2. 第二等级: 代表 ID选择器; 如 #id="", 权值为 0,1,0,0 。
   3. 第三等级: 代表 calss | 伪类 | 属性 选择器; 如 .class | :hover,:link,:target | [type], 权值 0,0,1,0 。
   4. 第四等级: 代表 标签 | 伪元素 选择器; 如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1 。
   5. 通用选择器 (\*), 子选择器(>), 相邻同胞选择器(+) 等选择器不在4等级之内, 所以它们的权值都为 0,0,0,0 。

3. 权值计算公式:
   1. 权值 = 第一等级选择器\*个数, 第二等级选择器\*个数, 第三等级选择器\*个数, 第四等级选择器\*个数 。

4. 权值比较规则:
   1. 当两个权值进行比较的时候, 是从高到低逐级将等级位上的权重值(如 权值 1,0,0,0 对应--> 第一等级权重值, 第二等级权重值, 第三等级权重值, 第四等级权重值)来进行比较的, 而不是简单的 1000\*个数 + 100\*个数 + 10\*个数 + 1\*个数 的总和来进行比较的, 换句话说, 低等级的选择器, 个数再多也不会越等级超过高等级的选择器的优先级的;
   2. 总结比较经验:
      1. 先从高等级进行比较, 高等级相同时, 再比较低等级的, 以此类推 。
      2. 完全相同的话, 就采用 后者优先原则(也就是样式覆盖) 。
      3. css 属性后面加 !important 时, 无条件绝对优先(比内联样式还要优先) 。

5. 选择器的优先级(继承不如指定):
   1. css 属性 !important
   2. 内联样式
   3. ID 选择器(#id)
   4. 类选择器(.class) = 伪类选择器(:hover等) = 属性选择器[type等]
   5. 元素选择器(p等) = 伪元素选择器(:after/:before/::selection等)
   6. 通用选择器(\*)
   7. 继承的样式

之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 "前端面试题" 的相关专栏; 大概会有200+的文章。

如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨。

有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容。

，介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
（3）区别： IE的content部分把 border 和 padding计算了进去；

2，CSS选择符有哪些？哪些属性可以继承？

* 1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a:hover, li:nth-child）
* 可继承的样式： font-size font-family color, UL LI DL DD DT;
* 不可继承的样式：border padding margin width height ;

3，CSS优先级算法如何计算？

* 优先级就近原则，同权重情况下样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比内联优先级高

4，CSS3新增伪类有那些？

举例：
p:first-of-type 选择属于其父元素的首个 元素的每个 元素。
p:last-of-type 选择属于其父元素的最后 元素的每个 元素。
p:only-of-type 选择属于其父元素唯一的 元素的每个 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。

5，如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？

给div设置一个宽度，然后添加margin:0 auto属性

居中一个浮动元素

确定容器的宽高宽500 高 300 的层

设置层的外边距

让绝对定位的div居中

6，display有哪些值？说明他们的作用。

block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示
inherit 规定应该从父元素继承 display 属性的值

7，position的值relative和absolute定位原点是？

absolute 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit 规定从父元素继承 position 属性的值。

8，CSS3有哪些新特性？

新增各种CSS选择器（: not(.input)：所有 class 不是“input”的节点）
圆角（border-radius:8px）
多列布局（multi-column layout）
阴影和反射（Shadow\Reflect）
文字特效（text-shadow、）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
增加了旋转,缩放,定位,倾斜,动画，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

9，用纯CSS创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

10，一个满屏品字布局如何设计?

简单的方式：
上面的div宽100%，
下面的两个div分别宽50%，
然后用float或者inline使其不换行即可

11，li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

12，为什么要初始化CSS样式。

- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
- 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）
淘宝的样式初始化代码：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, b8bf53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

13，absolute的containing block(容器块)计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：
1、若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
2、否则,则由这个祖先元素的 padding box 构成。
如果都找不到，则为 initial containing block。
补充：
1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
2. absolute: 向上找最近的定位为absolute/relative的元素
3. fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block

14，对BFC规范(块级格式化上下文：block formatting context)的理解？

（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。
创建规则：
根元素
浮动元素（float不是none）
绝对定位元素（position取值为absolute或fixed）
display取值为inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素
作用：
可以包含浮动元素
不被浮动元素覆盖
阻止父子元素的margin折叠

15，css定义的权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为1*/ div{}
/*权重为10*/ .class1{}
/*权重为100*/ #id1{}
/*权重为100+1=101*/ #id1 div{}
/*权重为10+1=11*/ .class1 div{}
/*权重为10+10+1=21*/ .class1 .class2 div{}
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

16，移动端的布局用过媒体查询吗？

css的媒体查询允许通过@media标签为特定媒体的浏览器设定样式，其中包含众多筛选，功能强大。

17，使用 CSS 预处理器吗？喜欢那个？

SASS (SASS、LESS没有本质区别，只因为团队前端都是用的SASS)

18，CSS优化、提高性能的方法有哪些？

将样式表放到页面顶部
不使用CSS表达式
不使用@import
不使用IE的Filter

19，在网页中的应该使用奇数还是偶数的字体？为什么呢？

应该是用偶数字体。原因：

像谷歌一些比较流行的浏览器一般会有个默认的最小字体，而且对奇数字体渲染的不太好看

20，元素竖向的百分比设定是相对于容器的高度吗？

是的，元素的百分比设置一般是根据父级元素的宽高决定的，如果父级元素没有宽高百分比是不起作用的

端面试题目会根据面试者的经历、岗位要求和面试官本身等因素而变化。大前端背景下，每个领域 1-2 个问题成为了更常见的面试提问规则。面试者的回答往往会影响面试官对其在这个领域的技术评价。

如果无话可答，则意味着一个领域没有分数，如果这个领域是岗位的必要项，便会直接影响面试结果。于是，面试者总是希望，尽可能地多答上题目，怎么才能做到这点呢？

第一，基础，包括原理，语言特性，设计模式，算法和数据结构，网络协议等。当我们可以从设计者或架构者的角度来看待一门语言、框架、协议时，即使不知道某个特性、用法，依然有可能类比推敲出答案。
第二，积累。前端技术发展极快，规范、语言、框架、工具、思想日新月异，关注相关更新，特别是我们正在使用的技术栈的变化，广度可以跨越经历的局限，让自己满足更多岗位的要求。
第三，引导。一方面，通过简历中技术熟练程度、项目和工作经历描述，擅长的要突出，不会的可以不写。另一方面，问题完全不会时，可以征询面试官意见，引导至我们会的问题。例如，XX 我不了解，但 XX 与之原理相同，我可以介绍一下吗？问题非常会时，可以引导面试官进一步提问。例如，XX 可以继续优化。

需要注意的是：

多答不是硬答。确实不会，大方承认，尽快进入下个问题，能减少对面试官主观上的影响。反之，完全不沾边，甚至错误的回答容易减少印象分。
多答不是唠叨。会的题目，应该答出尽可能多的得分点，除非面试官追问，请避免在一个得分点上展开过多，让面试官有更多时间提新问题，考核完全部领域，面试者也能有更多展示机会。

常见考点

了解了前端面试的基本原则，可以进入实战准备阶段了。对此，我们按照语言，将常见考点的基础知识结构整理了出来，帮助扣友们梳理知识结构，快速查漏补缺。

高频题测试

学海无涯「题」作舟，用一些题目来练习一下吧。下面的这些前端面试高频题，你都能答得出来吗？

Q：CSS 优先级规则是什么？

选择器与元素的相关度越高，优先级越高，具体规则如下：

开发者定义选择器 > 用户定义选择器 > 浏览器默认选择器

内联样式（ style="" ） > 内（ <style> ）、外部样式（ <link/> ）

ID 选择器 > 类选择器、属性选择器、伪类选择器 > 类型选择器、伪元素选择器

相同优先级，书写顺序后 > 前

同级选择器，复合选择器 > 单选择器

自身的选择器 > 继承自父级的选择器

用户配置 !important 声明 > 开发者 !important 声明 > 其它

Q：什么是重排和重绘？

当DOM的样式或内容会被修改时，将触发重新渲染。除了属性值计算、单位换算外，渲染主要分为三个步骤：

布局：计算盒模型的位置，大小
绘制：填充盒模型的文字、颜色、图像、边框和阴影等可视效果
合并：所有图层绘制后，按层叠顺序合并为一个图层

重新渲染一般有三种执行路径：

重排：布局 → 绘制 → 合并
重绘：绘制 → 合并
合并：不同属性的修改，会触发不同的渲染路径

Q：Cookie 和 Session 的区别？

项目	Cookie	Session
存取值类型	字符串	大多数类型
存取位置	客户端	服务端，sessionId 非主动传参时，依赖 Cookie
存取方式	文件	文件、内存、关系或非关系型数据库等
大小	受客户端限制	自行配置
过期时间	写入时设置，用户可清除	自行配置，用户可清除对应Cookie，服务端自动清除过期 Session
兼容性	需浏览器开启，用户同意	不依赖 Cookie 时，通过 Get 或自定请求字段传入
作用范围	可设置跨子域，不可跨主域	用户身份唯一标识符不变时，可跨域，跨服务器。默认受限于 Cookie，仅限会话期间有效

Q：判断一个对象是不是数组 Array

isPrototypeOf-测试一个对象是否在另一个对象的原型链上-prototype 不可省略

JavaScrpit

 function isArray(o) {
  return Array.prototype.isPrototypeOf(o)
}

instanceof
-用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

JavaScrpit

function isArray(o) {
  return o instanceof Array
}

Array.isArray-用于确定传递的值是否是一个 Array

JavaScrpit

function isArray(o) {
  return Array.isArray(o)
}    *

Object.prototype.toString-方法返回一个表示对象的字符串

JavaScrpit

function isArray(o) {
  return Object.prototype.toString.call(o) === '[object Array]'
}

Q：如何实现一个组件，前端组件的设计原则是什么？

单一原则：一个组件只做一件事
通过脑图、结构图，标识组件的 State Props Methods 生命周期，表示层次和数据流动关系
State 和 Props-扁平化：最多使用一层嵌套，便于对比数据变化，代码更简洁-无副作用：State 仅响应事件，不受其他 State 变化影响
松耦合-组件应该独立运行，不依赖其它模块
配置、模拟数据、非技术说明文档、helpers、utils 与组件代码分离
视图组件只关心视图，数据获取，过滤，事件处理应在外部 JS 或父组件中处理
Kiss原则（Keep it Simple Stupid）-不需要 State 时，使用函数组件-不要传递不需要的 Props-及时抽取复杂组件为独立组件-不要过早优化
参考 CSS 的 OOSS 方法论，分离位置和样式，利于实现皮肤
考虑多语言、无障碍等后期需求

Q：对比 express 和 koa？

Handler 处理方式-Express：回调函数-Koa：Async / Await
中间件-Express：同一线程，线性传递-Koa：洋葱模型，级联传递
响应机制-Express：res.send 立即响应
-Koa：设置 ctx.body ，可累加，经过中间件后响应

前端通关手册

上面分享的这些前端考点和高频题都来自于本次 LeetBook 的上新。想要解锁更多内容，点击下面的图片查看吧。

《前端通关手册：JavaScript》：力扣

《前端通关手册：HTML&CSS》：力扣

实用的前端面试突围指南书，以面试题目作为线索，从基础到更新，通过多方法，讲概念，让面试者的回答在广度或深度上能够脱颖而出，带你轻松掌握 JavaScript、HTML、CSS 的面试考点。

编者介绍：

吴小宇，做网站 13 年，2 次创业，土木、教育、前端 3 次跨领域转行，入行 1 年成为组长，热爱技术，尊重商业和人性，擅长多角度解决问题。

当然，在面试时除了前端方面的专业知识，也会问到一些计算机通用基础问题，因此本次上新还特别为扣友们准备了一本校招通用的通关手册。

《校招基础知识详解》: 力扣

互联网校招基础考点一网打尽，用简单易懂的讲解将面试知识串连起来，帮你快速理清多而杂的知识点，构建起校招技能树，面试游刃有余。

编者介绍：

CyC2018，Github 校招面试项目 CS-Notes 作者，排名 10。校招期间收获多家大厂 Offer，具有丰富的面试经验。

针对这部分基础，我们同样整理了一份实用的考点大纲：

技术会迭代，我们也会与时俱进，不断精益内容。希望能够通过 LeetBook 节省面试者的时间，提高投入产出比，在准备面试的过程中，真正获得知识和能力的提升。

最后，祝福所有扣友都能找到满意的工作！

在线咨询

上一篇：JSP JavaBean
下一篇：一文带你掌握CSS基础：盒子模型（Margin、Border、Padding）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

CSS 面试题：CSS的权重与优先级

对 CSS 的权重和优先级了解吗? 可以简单说下 。

1. 权重:

2. 优先级:

常见考点

高频题测试

前端通关手册

您的项目需求

对 CSS 的权重和优先级了解吗? 可以简单说下。