共计 6833 个字符，预计需要花费 18 分钟才能阅读完成。
译者：前端小智
起源：codersera.
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
CSS 是 层叠样式表（Cascading Style Sheets）的缩写，是一种样式表语言，用于形容以 HTML 之类的标记语言编写的文档的布局。它是用于设计 Web 页面的三剑客之一，另外两位浩客是 HTML 和Javascript。
CSS 的设计目标是使款式和内容拆散，包含布局、色彩和字体。这种拆散能够进步内容的可拜访性，在款式特色的标准中提供更多的灵活性和管制，通过在一个独自的. .css 文件中指定相干的 CSS，使多个 web 页面可能共享格局，并缩小构造内容中的复杂性和反复。
它具备简略的语法，并应用大量的英文关键字来指定各种款式属性的名称。
既然咱们曾经探讨了 CSS 的基础知识，让咱们来察看一下基于 CSS 的重要面试问题。
问题 1：什么是 CSS？
CSS（层叠样式表）是一种款式语言，对于 HTML 元素来说足够简略。它在网页设计中十分风行，其利用在 XHTML 中也很常见。
问题 2：为什么要开发 CSS？
CSS是在 1997 年开发的，作为一种 web 开发人员设计他们正在创立的 web 页面布局的办法。它的目标是让开发者将网站代码的内容和构造从视觉设计中分离出来。
这种构造和设计的拆散容许 HTML 执行比原来更多的性能。
问题 3：CSS 的次要版本有哪些？
CSS 的不同版本：
- CSS1
- CSS2
- CSS2.1
- CSS3
问题 4：CSS 款式的组成部分是什么？
一个款式规定由三局部组成：
- 选择器–选择器是 HTML 标记，用于抉择要设置款式的内容。它依据其
ID，类和名称抉择 HTML 元素。 - 属性–属性是 HTML 标签的一种属性。简而言之，所有 HTML 属性都转换为 CSS 属性。
- 值– CSS 中的值定义 CSS 属性的一组有效值。
问题 5：有多少种办法能够将 CSS 集成为 web 页面
CSS 能够集成为三种形式
- 内联：间接在 HTML 元素上应用
<p style=”colour:skyblue;”>hello world</p>
- 内部: 在工作空间中创立独自的 CSS 文件，而后在创立的每个 web 页面中链接它们
<head>
<link rel=”text/css”href=”your_CSS_file_location”/>
</head>- 外部: web 页面的 head 元素在其中实现了外部 CSS。
head>
<style>
P{
color : lime;
background-color:black;
}
</style>
</head>问题 6：谁在保护 CSS 标准？
万维网协会保护 CSS 标准。
问题 7：伪元素是什么意思？
伪元素是增加到选择器的关键字，它容许一种款式，即所选元素的特定局部。CSS 用于在 HTML 标记中利用款式，它容许在不影响理论文档的状况下对文档进行额定标记。它能够用来：
- 为第一个字母、行或元素设置款式。
- 插入内容
语法：
Selector: :pseudo-element
{Property1 :value;
Property2 :value;}问题 8：CSS 有什么劣势？
CSS 的长处是:
- 一致性 – CSS 有助于构建统一的框架，设计人员能够应用该框架来构建其余站点。因而，网页设计师的效率也进步了。
- 易于应用 – CSS 是非常容易学习和简化网站开发。所有代码都放在一个页面上，这意味着对代码行进行改良或编辑不须要反复批改多个页面.
- * 网站速度 *– 通常，一个网站应用的代码最多能够达到
2页或更多。然而对于 CSS，这不是问题。它只须要2-3行代码，因而，网站数据库放弃整洁，打消任何网站加载问题。 - 设施兼容性 – 因为人们应用不同类型的智能设施拜访互联网，因而须要响应式 web 设计。CSS 在这里的作用是使 web 页面的响应性更好，这样它们就能够在所有设施中以雷同的形式显示。
- 多浏览器反对 – CSS 享有多浏览器的反对，它与所有次要的互联网浏览器兼容。
- 从新定位 – CSS 容许您定义页面上 web 元素地位的变动。通过它的实现，开发人员能够将 HTML 元素搁置在他们喜爱的地位，以便与页面的美学吸引力或其余思考因素保持一致。
问题 9：CSS 突变是什么？
突变是指咱们在两幅图像之间创立两头帧，以取得第一幅图像的外观，而后倒退成第二幅图像的过程，它次要用于创立动画。
问题 10：什么是 CSS 特异性？
CSS 特定性是一个分数或等级，它决定了元素必须应用哪种款式申明。CSS 中有四类能够受权选择器的特异性级别：
- 内联款式
- ID
- 类，属性和伪类
- 元素和伪元素
问题 12：CSS 有什么毛病
CSS 的毛病有:
- 版本太多 – 与 HTML 或 Javascript 等其余参数相比，CSS 有很多版本 -CSS1，CSS2，CSS2.1，CSS3。因而，CSS 变得十分凌乱，尤其是对于初学者。
- 不足安全性 – 因为 CSS 是基于凋谢文本的零碎，因而它没有内置的平安零碎来避免其被笼罩。通过对其读 / 写操作的拜访，任何人都能够更改 CSS 文件并更改链接。
- Fragmentation – 应用 CSS，可能无奈在一个浏览器上应用另一浏览器。因而，在网站上线之前，Web 开发人员必须通过在多个浏览器上运行程序来测试兼容性。
- 复杂性–应用 Microsoft FrontPage 等第三方软件会使 CSS 变得复杂。
问题 13：什么是 RWD (Responsive Web Design)?
RWD（响应式 Web 设计）技术用于在每种屏幕尺寸以及挪动，平板电脑，台式机和笔记本电脑等设施上完满显示设计页面，让咱们无需为每个设施创立不同的页面。
问题 14：CSS 精灵有什么益处?
CSS 精灵的益处有：
- 通过将各种小图像组合成一个图像，缩小了 web 页面的加载工夫。
- 缩小 HTTP 申请，从而缩小加载工夫。
问题 15：什么是 CSS 上下文选择器？
上下文选择器，严格来讲，叫 后辈组合式选择器，就是一组以空格分隔的标签名。用于抉择作为指定先人元素后辈的标签。只有有标签在它的层次结构“上游”存在这么一个先人，那么就会选中该标签。无论从该标签到作为先人的上下文之间隔着多少档次都没有关系。
大家都说简历没我的项目写，我就帮大家找了一个我的项目，还附赠【搭建教程】。
我和阿里云单干服务器，折扣价比拟便宜：89/ 年，223/ 3 年，比学生 9.9 每月还便宜，买了搭建个我的项目，相熟技术栈比拟香（老用户用家人账号买就好了，我用我妈的)举荐买三年的划算点，点击本条就能够查看。
问题 16：什么是渐进加强和安稳进化?
渐进加强 的概念是指从最根本的可用性登程，在保障站点页面在低级浏览器中 的可用性和可拜访性的根底上，逐渐减少性能及进步用户体验。实质上讲，咱们日常的一些开发习惯，例如首先应用标记语言编写页面，而后通过样式表来管制页面 款式等，都属于渐进加强的概念；其余更为显著的行为包含应用 HTML5、CSS3 等新技术，针对高级浏览器为页面进步用户体验的丰盛水平。
安稳进化 的概念是指首先应用最新的技术面向高级浏览器构建最强的性能及用户体验，而后针对低级浏览器的限度，逐渐衰减那些无奈被反对的性能及体验；在咱们日常的开 发中，一个典型的安稳进化的例子就是首先针对 Chrome 编写页面代码，而后修复 IE 中的异样或针对 IE 去除那些无奈被实现的性能特色.
所以，这两个概念办法其实早已并存在咱们的日常开发工作中了，只是“渐进加强”与“安稳进化”这样的措辞是近些年才开始被遍及。在咱们眼下的 HTML5 与 CSS3 实战用，这两个概念就尤其重要了，怎么保障应用一直变动的新技术来构建在支流浏览器下都具备根本可用性的站点，并针对高级浏览器进行体验晋升，这 些是咱们在开发过程中须要明确的思路。
问题 17：咱们如何在网页上增加图标？
咱们能够应用诸如 font-awesome 或者阿里的 iconfont 之类的图标库将图标增加到 HTML 网页。咱们必须将给定图标类的名称增加到任何内联 HTML 元素中。（<i>或<span>）。图标库中的图标是可缩放的矢量，能够应用 CSS 进行自定义。
问题 18：哪个属性指定边框的宽度？
border-width指定边框的宽度。
问题 19：如何辨别物理标签和逻辑标签?
物理标签被称为示意标记，而逻辑标签对于外观是无用的。物理标签是较新的版本，而逻辑标签是旧的并且专一于内容。
如题，咱们的标签元素写上后，浏览器就会渲染出后果，但不仅仅是这么简略
// 物理元素
<b> 我想用 b 标签加粗 </b>
// 逻辑元素
<strong> 我想用 strong 标签加粗 </strong>
// 两段文字都加粗了，而且视觉效果齐全一样
的确，文字加粗了，两者都达到了咱们想要的目标，然而咱们疏忽了一个问题，既然 b 标签能够加粗，那么 strong 这个标签同样是加粗，存在的 意义又是什么呢？既然 W3C 定义了两个，它们之间的不同点是什么呢？它们之间的相同点又是什么呢？
物理元素
物理元素，又叫实体标签，它所做的是一种物理行为，比方下面我把一段文字用 b 标签加粗了，它所传播的给浏览器，通知浏览器 我要加粗这段文字，从单词 Bold 中也能够看进去，英文中仅仅是加粗的意思，并没有其余作用。总结来说就是一句话：物理元素就是通知浏览器该怎么显示进去。
逻辑元素
逻辑元素，从英文字面上 Strong 就能够看出它是强调的意思，所以咱们用这个逻辑元素 (如上 strong) 来向浏览器传播 一个强调某段文字重要性的音讯，阐明此文字较为重要，也有利于搜索引擎收录。
Web 规范主张 XHTML 不波及具体的表现形式，“强调”能够用加粗来强调，也能够用别的形式强调，也能够通过 css 来扭转 strong 的具体表现，还有就是并不是有了 strong 逻辑标签，就不必 b 标签来示意字体加粗了，b 标签和 strong 标签默认状况下强调的成果统一，strong 齐全能够定义成别的款式，用来强调 成果，然而最好合乎 W3C 规范，它更提倡内容与款式拆散，所以单纯为了达到加粗而应用 b 标签不倡议这样做，从 XHTML 文档有意义性及用户体验角度来说，strong 逻辑标签更加适合，而 SEO 方面，则针对优化状况而定。
问题 20：如何在 CSS 中定义一个伪类? 它们是用来干什么的
CSS 伪类是用来增加一些选择器的特殊效果。伪类的语法
selector:pseudo-class{property:value;}问题 21：CSS 和 SCSS 有什么区别？
CSS 和 SCSS 之间的区别如下：
- CSS 是一种用于设计 web 页面的款式语言，而 SCSS 用于为浏览器组合 CSS 样式表。
- SCSS 提供了一些变量，能够应用这些变量来缩短代码，这是与 CSS 相比的一大劣势。
问题 22：嵌入式样式表的优缺点是什么？
嵌入式样式表的长处:
- 能够在一个文档中创立多种标签类型。
- 在简单状况下，能够应用选择器和分组办法来利用款式。
- 无需额定下载。
嵌入式样式表的毛病：
无法控制多个文档。
问题 23：列出应用的各种媒体类型。
不同的介质不辨别大小写，因而它们具备不同的属性。他们是：
- aural – 用于语音和音频合成器
- print – 用于打印机
- projection – 用于计划展现，比方幻灯片
- handheld – 用于小的手持的设施
- screen – 用于电脑显示器
问题 24：font 的属性有哪些？
- Font-style
- Font-variant
- Font-weight
- Font-size/line-weight
- Font-family
问题 25：“规定集”是什么意思？
该指令通知浏览器如何在 HTML 页面上渲染特定元素。它由一个选择器和一个遵循规定集的申明块组成。选择器能够附加到其余选择器，以通过规定集进行标识。
问题 26：什么是 CSS 框架？
CSS 框架是一个库，它容许应用 CSS 语言进行更轻松，更符合标准的 Web 设计。这些框架中的大多数至多蕴含一个网格以及更多功能和其余基于 Javascript 的性能。一些驰名的 CSS 框架有：ACSS，Bulma，YAML，Foundation等。
问题 27：简略介绍应用图片 base64 编码的长处和毛病。
base64 编码是一种图片解决格局，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，能够用该字符串来代替图片的
url 属性。
应用 base64 的长处是：
（1）缩小一个图片的 HTTP 申请
应用 base64 的毛病是：
（1）依据 base64 的编码原理，编码后的大小会比原文件大小大 1 /3，如果把大图片编码到 html/css 中，不仅会造成文件体
积的减少，影响文件的加载速度，还会减少浏览器对 html 或 css 文件解析渲染的工夫。
（2）应用 base64 无奈间接缓存，要缓存只能缓存蕴含 base64 的文件，比方 HTML 或者 CSS，这相比域间接缓存图片的成果要
差很多。
（3）兼容性的问题，ie8 以前的浏览器不反对。
个别一些网站的小图标能够应用 base64 图片来引入。
问题 28: 对 BFC 标准（块级格式化上下文：block formatting context）的了解？
BFC 指的是块级格式化上下文，一个元素造成了 BFC 之后，那么它外部元素产生的布局不会影响到内部元素，内部元素的布局也
不会影响到 BFC 中的外部元素。一个 BFC 就像是一个隔离区域，和其余区域互不影响。
一般来说根元素是一个 BFC 区域，浮动和相对定位的元素也会造成 BFC，display 属性的值为 inline-block、flex 这些
属性时也会创立 BFC。还有就是元素的 overflow 的值不为 visible 时都会创立 BFC。
问题 29: IFC 是什么？
IFC 指的是行级格式化上下文，它有这样的一些布局规定：
（1）行级上下文外部的盒子会在程度方向，一个接一个地搁置。
（2）当一行不够的时候会主动切换到下一行。
（3）行级上下文的高度由外部最高的内联盒子的高度决定。
问题 30: CSS 优化、进步性能的办法有哪些？
加载性能：
（1）css 压缩：将写好的 css 进行打包压缩，能够缩小很多的体积。
（2）css 繁多款式：当须要下边距和右边距的时候，很多时候抉择:margin:top 0 bottom 0; 但 margin-bottom:bot
tom;margin-left:left; 执行的效率更高。
（3）缩小应用 @import, 而倡议应用 link，因为后者在页面加载时一起加载，前者是期待页面加载实现之后再进行加载。
选择器性能：
（1）要害选择器（key selector）。选择器的最初面的局部为要害选择器（即用来匹配指标元素的局部）。CSS 选择符是从右到
左进行匹配的。当应用后辈选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
（2）如果规定领有 ID 选择器作为其要害选择器，则不要为规定减少标签。过滤掉无关的规定（这样款式零碎就不会浪费时间去匹
配它们了）。
（3）防止应用通配规定，如 *{}计算次数惊人！只对须要用到的元素进行抉择。
（4）尽量少的去对标签进行抉择，而是用 class。
（5）尽量少的去应用后辈选择器，升高选择器的权重值。后辈选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过
三层，更多的应用类来关联每一个标签元素。
（6）理解哪些属性是能够通过继承而来的，而后防止对这些属性反复指定规定。
渲染性能：
（1）谨慎应用高性能属性：浮动、定位。
（2）尽量减少页面重排、重绘。
（3）去除空规定：{}。空规定的产生起因一般来说是为了预留款式。去除这些空规定无疑能缩小 css 文档体积。
（4）属性值为 0 时，不加单位。
（5）属性值为浮动小数 0.**，能够省略小数点之前的 0。
（6）标准化各种浏览器前缀：带浏览器前缀的在前。规范属性在后。
（7）不应用 @import 前缀，它会影响 css 的加载速度。
（8）选择器优化嵌套，尽量避免层级过深。
（9）css 雪碧图，同一页面相近局部的小图标，方便使用，缩小页面的申请次数，然而同时图片自身会变大，应用时，优劣思考清
楚，再应用。
（10）正确应用 display 的属性，因为 display 的作用，某些款式组合会有效，徒增款式体积的同时也影响解析性能。
（11）不滥用 web 字体。对于中文网站来说 WebFonts 可能很生疏，国外却很风行。web fonts 通常体积宏大，而且一些浏
览器在下载 web fonts 时会阻塞页面渲染伤害性能。
可维护性、健壮性：
（1）将具备雷同属性的款式抽离进去，整合并通过 class 在页面中进行应用，进步 css 的可维护性。
（2）款式与内容拆散：将 css 代码定义到内部 css 中。
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文：https://codersera.com/blog/to…
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。
