乐趣区

关于javascript:26-个-CSS-面试题目增强你的-CSS-基础

jiezi

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

点赞再看 ，微信搜寻【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。**

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588…

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 的不同版本：

  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：什么是渐进加强和安稳进化?

渐进加强 的概念是指从最根本的可用性登程，在保障站点页面在低级浏览器中 的可用性和可拜访性的根底上，逐渐减少性能及进步用户体验。实质上讲，咱们日常的一些开发习惯，例如首先应用标记语言编写页面，而后通过样式表来管制页面 款式等，都属于渐进加强的概念；其余更为显著的行为包含应用 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 之间的区别如下：

  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。

退出移动版