CSS知识点

CSS基础

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

CSS选择器的优先级是：内联 > ID选择器 > 类选择器 > 标签选择器 到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下： A 的值等于 1 的前提是存在内联样式, 否则 A = 0; B 的值等于 ID选择器 出现的次数; C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数; D 的值等于 标签选择器 和 伪元素 出现的总次数 。 就⽐如下⾯的选择器，它不存在内联样式，所以A=0,不存在id选择器B=0,存在⼀个类选择器C=1,存在三个标签选择器 D=3，那么最终计算结果为: {0, 0, 1 ,3}

按照这个结算⽅式，下⾯的计算结果为: {0, 1, 0, 0}

我们的⽐较优先级的⽅式是从A到D去⽐较值的⼤⼩，A、B、C、D权重从左到右，依次减⼩。判断优先级时，从左到右，⼀⼀⽐较，直到⽐较出最⼤值，即可停⽌。 ⽐如第⼆个例⼦的B与第⼀个例⼦的B相⽐，1>0,接下来就不需要⽐较了，第⼆个选择器的优先级更⾼。

link和@import的区别？

link属于XHTML标签，⽽@import是CSS提供的。 ⻚⾯被加载时，link会同时被加载，⽽@import引⽤的CSS会等到⻚⾯被加载完再加载。 import只在IE 5以上才能识别，⽽link是XHTML标签，⽆兼容问题。link⽅式的样式权重⾼于@import的权重。 使⽤dom控制样式时的差别。当使⽤javascript控制dom去改变样式的时候，只能使⽤link标签，因为@import不是 dom可以控制的。

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

opacity:0 ：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互 visibility:hidden : 与上⼀个⽅法类似的效果，占据空间，但是不可以交互了 overflow:hidden : 这个只隐藏元素溢出的部分，但是占据空间且不可交互 display:none : 这个是彻底隐藏了元素，元素从⽂档流中消失，既不占据空间也不交互，也不影响布局 z-index:-9999 : 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了 transform: scale(0,0) : 平⾯变换，将元素缩放为0，但是依然占据空间，但不可交互 还有⼀些靠绝对定位把元素移到可视区域外，或者⽤clip-path进⾏裁剪的操作过于Hack，就不提了。

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

块级元素⽔平居中的⽅法？ 如果使⽤Hack的话，⽔平居中的⽅法⾮常多，我们只介绍主流的，奇葩的⻅拓展阅读 margin:0 auto ⽅法 flex布局，⽬前主流⽅法 table⽅法

还有⼀些通过position+(margin|transform)等⽅法的不⼀样列举了，⾮重点没必要。拓展阅读: 16种⽅法实现⽔平居中垂直居中

CSS有⼏种定位⽅式？

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

如何理解z-index？✨

CSS 中的z-index属性控制重叠元素的垂直叠加顺序，默认元素的z-index为0，我们可以修改z-index来控制元素的图层位置，⽽且z-index只能影响设置了position值的元素。 我们可以把视图上的元素认为是⼀摞书的层叠，⽽⼈眼是俯视的视⻆，设置z-index的位置，就如同设置某⼀本书在这摞书中的位置。 顶部: 最接近观察者 … 3 层 2 层 1 层 0 层 默认层 -1 层 -2 层 -3 层 … 底层: 距离观察者最远

可以结合这个例⼦理解z-index

如何理解层叠上下⽂？✨ 是什么？

层叠上下⽂是HTML元素的三维概念，这些HTML元素在⼀条假想的相对于⾯向（电脑屏幕的）视窗或者⽹⻚的⽤户的z 轴上延伸，HTML元素依据其⾃身属性按照优先级顺序占⽤层叠上下⽂的空间。

如何产⽣？

触发⼀下条件则会产⽣层叠上下⽂： 根元素 (HTML), z-index 值不为 “auto”的 绝对/相对定位， ⼀个 z-index 值不为 “auto”的 flex 项⽬ (flex item)，即：⽗元素 display: flex|inline-flex， opacity 属性值⼩于 1 的元素（参考 the specification for opacity）， transform 属性值不为 “none”的元素， mix-blend-mode 属性值不为 “normal”的元素， filter值不为“none”的元素， perspective 值 不 为 “none” 的 元 素 ， isolation 属性被设置为 “isolate”的元素， position: fixed 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇⽂章） -webkit-overflow-scrolling 属性被设置 “touch”的元素 拓展阅读：层叠上下⽂-张鑫旭

清除浮动有哪些⽅法？

空 div ⽅ 法 ：

Clearfix ⽅法：上⽂使⽤.clearfix类已经提到overflow: auto或overflow: hidden⽅法，使⽤BFC 在flex已经成为布局主流之后，浮动这种东⻄越来越少⻅了，毕竟它的副作⽤太⼤

你对css sprites的理解，好处是什么？ 是什么 ？

雪碧图也叫CSS精灵， 是⼀CSS图像合成技术，开发⼈员往往将⼩图标合并在⼀起之后的图⽚称作雪碧图。

如何操作？ 使⽤⼯具（PS之类的）将多张图⽚打包成⼀张雪碧图，并为其⽣成合适的 CSS。 每张图⽚都有相应的 CSS 类，该类定义了background-image、background-position和background-size属性。 使⽤图⽚时，将相应的类添加到你的元素中。

好处： 减少加载多张图⽚的 HTTP 请求数（⼀张雪碧图只需要⼀个请求） 提前加载资源

不⾜： CSS Sprite维护成本较⾼，如果⻚⾯背景有少许改动，⼀般就要改这张合并的图⽚ 加载速度优势在http2开启后荡然⽆存，HTTP2多路复⽤，多张图⽚也可以重复利⽤⼀个连接通道搞定

你对媒体查询的理解？ 是什么

媒体查询由⼀个可选的媒体类型和零个或多个使⽤媒体功能的限制了样式表范围的表达式组成，例如宽度、⾼度和颜 ⾊。媒体查询，添加⾃CSS3，允许内容的呈现针对⼀个特定范围的输出设备⽽进⾏裁剪，⽽不必改变内容本身,⾮常适合web⽹⻚应对不同型号的设备⽽做出对应的响应适配。

如何使⽤？

媒体查询包含⼀个可选的媒体类型和，满⾜CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特 征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示⽂档所使⽤的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.那么媒体查询内的样式将会⽣效。

拓展阅读：深⼊理解CSS Media媒体查询

你对盒模型的理解✨ 是什么？

当对⼀个⽂档进⾏布局（lay out）的时候，浏览器的渲染引擎会根据标准之⼀的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为⼀个个矩形的盒⼦（box）。CSS 决定这些盒⼦的⼤⼩、位置以及属性（例如颜⾊、背景、边框尺⼨…）。

盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

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

在W3C标准下，我们定义元素的width值即为盒模型中的content的宽度值，height值即为盒模型中的content的⾼度值。因此，标准盒模型下： 元素的宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

⽽IE怪异盒模型（IE8以下）width的宽度并不是content的宽度，⽽是border-left + padding-left + content的宽度值 + padding-right + border-right之和，height同理。 在怪异盒模型下： 元素占据的宽度 = margin-left + width + margin-right

虽然现代浏览器默认使⽤W3C的标准盒模型，但是在不少情况下怪异盒模型更好⽤，于是W3C在css3中加⼊ box- sizing 。

此演示来源于拓展阅读⽂章

拓展阅读：深⼊理解盒模型

谈谈对BFC的理解✨ 是什么？

书⾯解释：BFC(Block Formatting Context)这⼏个英⽂拆解 Box: CSS布局的基本单位，Box 是 CSS 布局的对象和基本单位， 直观点来说，就是⼀个⻚⾯是由很多个 Box 组成的，实际就是上个问题说的盒模型 Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤ 简⽽⾔之，它是⼀块独⽴的区域，让处于BFC内部的元素与外部的元素互相隔离

如何形成？

BFC触发条件: 根元素，即HTML元素position: fixed/absolute float 不 为 none overflow不为visible display的值为inline-block、table-cell、table-caption

作⽤是什么？

防⽌margin发⽣重叠

两栏布局，防⽌⽂字环绕等

防⽌元素塌陷

拓展阅读：深⼊理解BFC

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

translate()是transform的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会 触发复合（compositions）。⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效，可以缩短平滑动画的绘制时间。 ⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。拓展阅读:CSS3 3D transform变换

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

伪类（pseudo-class） 是⼀个以冒号(:)作为前缀，被添加到⼀个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后⾯加上对应的伪类。 伪元素⽤于创建⼀些不在⽂档树中的元素，并为其添加样式。⽐如说，我们可以通过::before来在⼀个元素前增加⼀些 ⽂本，并为这些⽂本添加样式。虽然⽤户可以看到这些⽂本，但是这些⽂本实际上不在⽂档树中。

区别 其实上⽂已经表达清楚两者区别了，伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进 ⾏对元素的改变。 我们通过 p::before 对这段⽂本添加了额外的元素，通过 p:first-child 改变了⽂本的样式。

拓展阅读：伪类与伪元素

你对flex的理解？✨

web应⽤有不同设备尺⼨和分辨率，这时需要响应式界⾯设计来满⾜复杂的布局需求，Flex弹性盒模型的优势在于开发 ⼈员只是声明布局应该具有的⾏为，⽽不需要给出具体的实现⽅式，浏览器负责完成实际布局，当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局