26 个 CSS 面试题目加强你的 CSS 基础

时间  2020-12-02
标签 css 前端 vue git github web 面试 数据库 浏览器 安全 栏目 CSS 繁體版
原文   原文链接
译者：前端小智
来源：codersera.
点赞再看，微信搜索 【大迁世界】关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq44924588... 上已经收录，文章的已分类，也整理了不少个人文档，和教程资料。**

最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下，谢谢各位了。css

github 地址：https://github.com/qq44924588...前端

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

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

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

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

clipboard.png

问题1：什么是 CSS？

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

问题2：为何要开发CSS？

CSS是在1997年开发的，做为一种web开发人员设计他们正在建立的web页面布局的方法。它的目的是让开发者将网站代码的内容和结构从视觉设计中分离出来。数据库

这种结构和设计的分离容许HTML执行比原来更多的功能。浏览器

问题3：CSS的主要版本有哪些？

CSS的不一样版本：安全

  1. CSS1
  2. CSS2
  3. CSS2.1
  4. CSS3

问题4：CSS样式的组成部分是什么？

一个样式规则由三部分组成：

  1. 选择器–选择器是 HTML 标记，用于选择要设置样式的内容。 它根据其ID，类和名称选择 HTML元素。
  2. 属性–属性是 HTML 标签的一种属性。 简而言之，全部 HTML 属性都转换为 CSS 属性。
  3. 值– CSS中的值定义CSS属性的一组有效值。

问题 5：有多少种方法能够将 CSS 集成为 web 页面

CSS 能够集成为三种方式

  1. 内联：直接在HTML元素上使用
<p style=”colour:skyblue;”>hello world</p>
  1. 外部:在工做空间中建立单独的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标记中应用样式，它容许在不影响实际文档的状况下对文档进行额外标记。它能够用来：

  1. 为第一个字母、行或元素设置样式。
  2. 插入内容

语法：

Selector: :pseudo-element
{Property1 :value;
Property2 :value;}

问题 8：CSS有什么优点？

CSS的优势是:

  1. 一致性 – CSS有助于构建一致的框架，设计人员可使用该框架来构建其余站点。 所以，网页设计师的效率也提升了。
  2. 易于使用 – CSS 是很是容易学习和简化网站开发。全部代码都放在一个页面上，这意味着对代码行进行改进或编辑不须要重复修改多个页面.
  3. *网站速度 *– 一般，一个网站使用的代码最多能够达到 2 页或更多。可是对于CSS，这不是问题。它只须要2-3行代码，所以，网站数据库保持整洁，消除任何网站加载问题。
  4. 设备兼容性 – 因为人们使用不一样类型的智能设备访问互联网，所以须要响应式web设计。CSS 在这里的做用是使 web 页面的响应性更好，这样它们就能够在全部设备中以相同的方式显示。
  5. 多浏览器支持 – CSS享有多浏览器的支持，它与全部主要的互联网浏览器兼容。
  6. 从新定位 – CSS容许您定义页面上 web 元素位置的变化。经过它的实现，开发人员能够将 HTML 元素放置在他们喜欢的位置，以便与页面的美学吸引力或其余考虑因素保持一致。

问题9：CSS 渐变是什么？

渐变是指咱们在两幅图像之间建立中间帧，以得到第一幅图像的外观，而后发展成第二幅图像的过程，它主要用于建立动画。

问题10：什么是 CSS 特异性？

CSS 特定性是一个分数或等级，它决定了元素必须使用哪一种样式声明。 CSS 中有四类能够受权选择器的特异性级别：

  1. 内联样式
  2. ID
  3. 类，属性和伪类
  4. 元素和伪元素

问题12：CSS有什么缺点

CSS的缺点有:

  1. 版本太多 – 与HTML或Javascript等其余参数相比，CSS有不少版本-CSS1，CSS2，CSS2.1，CSS3。 所以，CSS变得很是混乱，尤为是对于初学者。
  2. 缺少安全性 - 因为CSS是基于开放文本的系统，所以它没有内置的安全系统来防止其被覆盖。 经过对其读/写操做的访问，任何人均可以更改 CSS 文件并更改连接。
  3. Fragmentation - 使用 CSS，可能没法在一个浏览器上使用另外一浏览器。 所以，在网站上线以前，Web 开发人员必须经过在多个浏览器上运行程序来测试兼容性。
  4. 复杂性–使用 Microsoft FrontPage 等第三方软件会使CSS变得复杂。

问题13：什么是 RWD (Responsive Web Design)?

RWD（响应式Web设计）技术用于在每种屏幕尺寸以及移动，平板电脑，台式机和笔记本电脑等设备上完美显示设计页面，让咱们无需为每一个设备建立不一样的页面。

问题14：CSS 精灵有什么好处?

CSS精灵的好处有：

  1. 经过将各类小图像组合成一个图像，减小了web页面的加载时间。
  2. 减小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 之间的区别以下：

  1. CSS是一种用于设计web页面的样式语言，而SCSS用于为浏览器组合CSS样式表。
  2. SCSS 提供了一些变量，可使用这些变量来缩短代码，这是与 CSS 相比的一大优点。

问题 22：嵌入式样式表的优缺点是什么？

嵌入式样式表的优势:

  1. 能够在一个文档中建立多种标签类型。
  2. 在复杂状况下，可使用选择器和分组方法来应用样式。
  3. 无需额外下载。

嵌入式样式表的缺点：

没法控制多个文档。

问题 23：列出使用的各类媒体类型。

不一样的介质不区分大小写，所以它们具备不一样的属性。 他们是：

  1. aural - 用于语音和音频合成器
  2. print - 用于打印机
  3. projection - 用于方案展现，好比幻灯片
  4. handheld - 用于小的手持的设备
  5. screen - 用于电脑显示器

问题 24：font 的属性有哪些？

  1. Font-style
  2. Font-variant
  3. Font-weight
  4. Font-size/line-weight
  5. Font-family

问题 25：“规则集”是什么意思？

该指令告诉浏览器如何在HTML页面上渲染特定元素。 它由一个选择器和一个遵循规则集的声明块组成。 选择器能够附加到其余选择器，以经过规则集进行标识。

问题 26：什么是 CSS 框架？

CSS 框架是一个库，它容许使用CSS语言进行更轻松，更符合标准的Web设计。 这些框架中的大多数至少包含一个网格以及更多功能和其余基于Javascript的功能。 一些著名的CSS框架有：ACSS，Bulma，YAML，Foundation等。

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://codersera.com/blog/to...

交流

文章每周持续更新，能够微信搜索【大迁世界 】第一时间阅读，回复【福利】有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，欢迎Star。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程