30道CSS 面试知识点总结

时间 2021-02-26

标签 css html 前端 git github web 面试算法数据库浏览器栏目 CSS 繁體版

原文原文链接

译者：前端小智
来源：codersera.

点赞再看，微信搜索 【大迁世界】,B站关注 【前端小智】这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。

CSS是层叠样式表（ Cascading Style Sheets ）的缩写，是一种样式表语言，用于描述以 HTML 之类的标记语言编写的文档的布局。它是用于设计Web页面的三剑客之一，另外两位浩客是HTML和Javascript。css

CSS 的设计目的是使样式和内容分离，包括布局、颜色和字体。这种分离能够提升内容的可访问性，在样式特征的规范中提供更多的灵活性和控制，经过在一个单独的. .css 文件中指定相关的 CSS，使多个 web 页面可以共享格式，并减小结构内容中的复杂性和重复。html

它具备简单的语法，并使用大量的英文关键字来指定各类样式属性的名称。前端

既然咱们已经讨论了CSS的基础知识，让咱们来观察一下基于CSS的重要面试问题。git

问题1：什么是 CSS？

CSS（层叠样式表）是一种样式语言，对于 HTML 元素来讲足够简单。它在网页设计中很是流行，其应用在XHTML中也很常见。github

问题2：为何要开发CSS？

CSS是在1997年开发的，做为一种web开发人员设计他们正在建立的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：什么是渐进加强和平稳退化?

渐进加强的概念是指从最基本的可用性出发，在保证站点页面在低级浏览器中的可用性和可访问性的基础上，逐步增长功能及提升用户体验。本质上讲，咱们平常的一些开发习惯，例如首先使用标记语言编写页面，而后经过样式表来控制页面样式等，都属于渐进加强的概念；其余更为明显的行为包括使用HTML五、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 已经收录，欢迎Star。