译者：前端小智来源：codersera。有梦想，有干货，微信搜索【走向世界的伟大举动】关注这个凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。CSS是CascadingStyleSheets的缩写，是一种样式表语言，用于描述以HTML等标记语言编写的文档的布局。它是设计网页的三剑客之一，另外两个是HTML和Javascript。CSS旨在将样式与内容分开，包括布局、颜色和字体。这种分离可以提高内容的可访问性，在样式特征的规范中提供更多的灵活性和控制，并允许多个网页通过在单个.css文件中指定相关的CSS来共享格式。并减少结构内容的复杂性和重复性。它语法简单，使用大量的英文关键字来指定各种样式属性的名称。现在我们已经讨论了CSS的基础知识，让我们来看看重要的基于CSS的面试问题。问题一：CSS是什么？CSS（层叠样式表）是一种对HTML元素足够简单的样式语言。它在网页设计中非常流行，其应用在XHTML中也很常见。问题二：为什么要开发CSS？CSS于1997年开发，作为Web开发人员设计他们正在创建的网页布局的一种方式。其目的是让开发人员将网站代码的内容和结构与视觉设计分开。这种结构和设计的分离允许HTML执行比其他方式更多的功能。问题3：CSS的主要版本有哪些？不同版本的CSS：CSS1CSS2CSS2.1CSS3问题4：CSS样式的组成部分有哪些？样式规则由三部分组成：选择器——选择器是用于选择要设置样式的内容的HTML标记。它根据元素的ID、类和名称选择HTML元素。属性——属性是HTML标签的一种属性。简而言之，所有HTML属性都转换为CSS属性。值——CSS中的值定义了一个CSS属性的一组有效值。问题5：将CSS集成到网页中有多少种方式CSS可以通过三种方式集成内联：直接在HTML元素上helloworld
外联：在单独创建在你的工作区中的CSS文件，并在你创建的每个网页中链接它们.head>问题6：谁维护CSS规范？万维网联盟负责维护CSS规范。问题七：伪元素是什么意思？伪元素是添加到允许样式的选择器的关键字，即所选元素的特定部分。CSS用于在HTML标记中应用样式，它允许在不影响实际文档的情况下对文档进行附加标记。它可用于：设置第一个字母、行或元素的样式。插入内容语法：Selector::pseudo-element{Property1:value;Property2:value;}问题8：CSS有什么优点？CSS的优点是：一致性——CSS有助于构建一致的框架，设计人员可以使用该框架来构建其他站点。结果，网页设计师的效率也提高了。易于使用——CSS非常容易学习并简化了网站开发。所有代码都放在一个页面上，这意味着对一行代码的改进或编辑不需要在多个页面上重复。*网站速度*–通常，一个网站最多可以使用2页或更多代码。但是对于CSS，这不是问题。它只需要2-3行代码，因此网站数据库保持干净并消除任何网站加载问题。设备兼容性——由于人们使用不同类型的智能设备访问互联网，因此需要响应式网页设计。CSS在这里所做的是使网页更具响应性，以便它们在所有设备上以相同的方式显示。多浏览器支持——CSS享有多浏览器支持，它与所有主要的互联网浏览器兼容。重新定位–CSS允许您定义页面上Web元素位置的变化。通过它的实施，开发人员可以将HTML元素放置在他们喜欢的位置，以符合页面的美学吸引力或其他考虑因素。问题9：什么是CSS渐变？渐变是我们在两幅图像之间创建中间帧以获得第一幅图像的外观，然后发展成第二幅图像的过程，它主要用于创建动画。问题10：什么是CSS特异性？CSS特异性是一个分数或等级，它决定了一个元素必须使用哪种样式声明。CSS中有四种类别可以授权选择器的特定级别：内联样式ID类、属性和伪类元素和伪元素问题12：CSS的缺点是什么？与参数相比，CSS有很多版本——CSS1、CSS2、CSS2.1、CSS3。结果，CSS变得非常混乱，尤其是对于初学者。缺乏安全性——由于CSS是一个基于开放文本的系统，它没有内置的安全系统来防止它被覆盖。通过对它的读/写访问，任何人都可以更改CSS文件并更改链接。碎片-使用CSS，可能无法在一个浏览器上工作。因此，在网站上线之前，Web开发人员必须通过在多个浏览器上运行程序来测试兼容性。复杂性——使用像MicrosoftFrontPage这样的第三方软件会使CSS复杂化。问题13：什么是RWD（响应式网页设计）？RWD(ResponsiveWebDesign)技术用于在手机、平板、台式机和笔记本电脑等各种屏幕尺寸和设备上完美显示设计页面，这样我们就不需要为每个设备创建不同的页面。问题14：CSSsprites有什么好处？CSS精灵的好处是：通过将各种小图像组合成一个图像来减少网页的加载时间。更少的HTTP请求和加载时间。问题15：什么是CSS上下文选择器？上下文选择器，严格来说是后代复合选择器，是一组用空格分隔的标签名。用于选择作为指定祖先元素后代的标签。只要标签在其层次结构中具有这样的“上游”祖先，就会选择该标签。从该标记到作为祖先的上下文有多少级别并不重要。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。我和阿里云服务器合作，优惠价格比较便宜：89/年，223/3年，比学生便宜9.9/月，买了建了一个项目，熟悉技术栈比较香（老用户可以买用他们的家庭账户，我用我妈妈的）推荐购买三年的便宜货，点击本文查看。问题16：什么是渐进增强和平滑退化？渐进增强的概念是指从最基本的可用性出发，在保证站点页面在低级浏览器中的可用性和可访问性的基础上，逐步增加功能，提升用户体验。本质上，我们日常的一些开发习惯，比如先用标记语言写页面，然后通过样式表控制页面样式等，都属于渐进增强的概念；其他更明显的行为包括使用HTML5和CSS3等新技术，为高级浏览器的页面增加用户体验。平滑降级的概念是指使用最新的技术为高级浏览器构建最强的功能和用户体验，然后根据低级浏览器的局限性逐渐衰减那些无法支持的功能和体验；在我们的日常开发中，一个典型的平滑降级的例子就是先为Chrome编写页面代码，然后在IE中修复异常或者去除IE无法实现的功能。因此，这两种概念方法早已存在于我们日常的开发工作中，只是“渐进增强”和“平滑退化”这两个名词是近几年才开始流行起来的。这两个概念在我们现在的HTML5和CSS3实际使用中尤为重要。如何保证使用日新月异的新技术来构建一个在主流浏览器下具有基本可用性的站点，并为高级浏览器提升体验，这些都是我们在开发过程中需要明确的思路。问题17：如何给网页添加图标？我们可以使用font-awesome或者阿里的iconfont等图标库来给HTML网页添加图标。我们必须将给定图标类的名称添加到任何内联HTML元素中。（
或）。图标库中的图标是可缩放的矢量，可以使用CSS进行自定义。问题18：哪个属性指定了边框的宽度？border-width指定边框的宽度。问题19：如何区分物理标签和逻辑标签？物理标签称为表示标记，而逻辑标签对外观毫无用处。物理选项卡是较新的版本，而逻辑选项卡是旧版本并且专注于内容。如题，我们的label元素写完后，浏览器会渲染结果，但不是那么简单//物理元素我想用b标签加粗//逻辑elementIIIwanttousethestrongtagtomakeitbold//两段文字都加粗，视觉效果完全一样。确实，文字加粗，两者都达到了我们想要的目的，但是我们忽略了一个问题，既然b标签可以加粗，那么strong标签也加粗。它存在的意义是什么？既然W3C定义了两者，那么它们之间有什么区别呢？它们之间有什么相似之处？物理元素物理元素，也称为实体标签，它们所做的是一种物理行为。比如我用上面的b标签把一段文字加粗，它传达给浏览器的是告诉浏览器我要加粗这段文字，从Bold这个词就可以看出，在英文中只有加粗的意思，有没有其他作用。一句话总结：物理元素就是告诉浏览器如何显示它。逻辑元素逻辑元素，从英文字面Strong可以看出是强调的意思，所以我们用这个逻辑元素（如上面的strong）来向浏览器传达一个信息，强调某段文字的重要性，表明这文字比较重要，也有利于搜索引擎收录。Web标准提倡XHTML不涉及具体的表达形式，“强调”可以用粗体或者其他方式强调，strong的具体表达也可以通过css改变，没有strong逻辑标签，不要使用b标签表示加粗字体，b标签和strong标签默认有相同的强调效果，strong可以定义为另一种风格来强调效果，但是最好遵守W3C标准，which提倡内容和样式分离，所以不推荐简单的使用b标签来实现加粗。从XHTML文档的含义和用户体验的角度来看，强逻辑标签更合适，而在SEO方面，则取决于优化情况。问题20：如何在CSS中定义伪类？它们的用途是什么？CSS伪类用于为选择器添加一些特殊效果。伪类语法selector:pseudo-class{property:value;}问题21：CSS和SCSS有什么区别？CSS和SCSS的区别如下：CSS是一种用于设计网页的样式语言，而SCSS是用来为浏览器编写CSS样式表的。SCSS提供了可用于缩短代码的变量，这是相对于CSS的一大优势。问题22：嵌入式样式表的优点和缺点是什么？嵌入式样式表的优点：可以在一个文档中创建多种标签类型。在复杂的情况下，可以使用选择器和分组方法来应用样式。无需额外下载。嵌入式样式表的缺点：无法控制多个文档。问题23：列出使用的各种媒体类型。不同的媒体不区分大小写，因此它们具有不同的属性。它们是：aural-用于语音和音频合成器print-用于打印机projection-用于程序演示，例如幻灯片handheld-用于小型手持设备screen-用于计算机显示器问题24：字体有哪些属性？Font-styleFont-variantFont-weightFont-size/line-weightFont-family问题25：“规则集”是什么意思？该指令告诉浏览器如何在HTML页面上呈现某些元素。它由一个选择器和一个遵循规则集的声明块组成。选择器可以附加到其他选择器以由规则集识别。问题26：什么是CSS框架？CSS框架是一个库，它允许使用CSS语言进行更简单、更符合标准的网页设计。这些框架中的大多数至少包括一个网格以及更多功能和其他基于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，比直接在domain上缓存图片的效果要差很多。(3)兼容性问题，ie8之前的浏览器不支持。一般一些网站的小图标可以使用base64图片导入。问题28：对BFC规范的理解（块格式化上下文：blockformattingcontext）？BFC指的是块级格式化上下文。一个元素组成BFC后，其内部元素的布局不会影响外部元素，外部元素的布局也不会影响BFC中的内部元素。BFC就像一个孤立的区域，独立于其他区域。一般而言，根元素是一个BFC区域。浮动元素和绝对定位元素也构成BFC。当display属性的值为inline-block或flex时，也会创建BFC。此外，当元素的溢出值不可见时，将创建BFC。问题29：什么是国际金融公司？IFC指的是行级格式化上下文，它有一些布局规则：(1)行级上下文内的框将在水平方向上一个接一个地放置。(2)当一行不够时，会自动切换到下一行。(3)行级上下文的高度由最高的innerinlinebox的高度决定。问题30：优化CSS和提高性能的方法有哪些？加载性能：(1)CSS压缩：将写好的CSS打包压缩，可以减少很多体积。(2)CSS单一样式：当需要下边距和左边距时，常选用：margin:top0bottom0；但是margin-bottom:bottom;margin-left:left;执行起来更有效率。(3)减少@import的使用，推荐使用link，因为后者是在页面加载的时候一起加载的，而前者是等待页面加载完成后再加载。选择器的性能：(1)键选择器(keyselector)。选择器的最后一部分是键选择器（即用来匹配目标元素的部分）。CSS选择器从右到左匹配。使用后代选择器时，浏览器会遍历所有子元素，判断是否为指定元素等；(2)如果规则有一个ID选择器作为它的键选择器，不要给规则添加标签。过滤掉不相关的规则（这样样式系统就不会浪费时间匹配它们）。(3)避免使用通配符规则，比如*{}，计算量惊人！仅选择您需要使用的元素。(4)尽量少选标签，但要用类。(5)尽量少用后代选择器，降低选择器的权重值。后代选择器的开销是最高的。尽量减少选择器的深度，不要超过三层，并使用更多的类来关联每个标签元素。(6)了解哪些属性可以被继承，然后避免对这些属性重复规则。渲染性能：（1）谨慎使用高性能属性：浮动和定位。(2)尽量减少页面重排和重绘。(3)去除空规则：{}。空规则的原因一般是为了保留样式。去掉这些空规则无疑会减小css文件的体积。(4)当属性值为0时，不加单位。(5)属性值为浮点数0.**，小数点前的0可以省略。(6)规范各种浏览器前缀：有浏览器前缀的优先。标准属性如下。(7)不要使用@import前缀，会影响css的加载速度。(8)优化选择器的嵌套，尽量避免层级过深。(9)CSSsprite图片，同一页面相似部分的小图标，使用方便，减少页面请求次数，但同时图片本身会变大。使用时要仔细考虑优缺点再使用。(10)正确使用显示属性。由于显示的效果，有些样式组合会失效，会增加样式的大小，同时影响解析性能。(11)不要滥用网络字体。WebFonts对于中国网站来说可能比较陌生，但是在国外却非常流行。Web字体通常体积庞大，一些浏览器在下载Web字体时会阻止页面呈现，从而影响性能。可维护性和健壮性：（1）将具有相同属性的样式抽取出来，通过class进行整合，在页面中使用，提高css的可维护性。(2)样式与内容分离：将css代码定义成外部css。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://codersera.com/blog/to...交流有梦想，有干货，微信搜索【大招天下】关注这位大清早还在洗碗的洗碗智者。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
