前端面试题之CSS(一)

1.@charset是做什么的？

概述

@charset CSS @规则 指定样式表中使用的字符编码。它必须是样式表中的第一个元素，而前面不得有任何字符。因为它不是一个嵌套语句，所以不能在@规则条件组中使用。如果有多个 @charset
@规则被声明，只有第一个会被使用，而且不能在HTML元素或HTML页面的字符集相关 <style>元素的样式属性使用。

在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：

1. 文件的开头的 Unicode byte-order 字符值。

2. 由Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。

3. CSS @规则 @charset。

4. 使用参考文档定义的字符编码： 元素指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link" style="font-style: normal !important; color: rgb(56, 120, 148); margin: 0px; padding: 0px; border: 0px; text-decoration: none;"><link>
   元素的 charset 属性。 该方法在 HTML5 标准中已废除，无法使用。

5. 假设文档是 UTF-8。

语法

1.@charset "UTF-8";
2.@charset "iso-8859-15";

例子

@charset "UTF-8";     
@charset "utf-8"; /*大小写不敏感*/ /* Set the encoding of the style sheet to Unicode UTF-8 */
@charset 'iso-8859-15'; /* Invalid, wrong quoting style used */@charset 'UTF-8'; /* Invalid, wrong quoting style used */@charset "UTF-8"; /* Invalid, more than one space */ 
@charset "UTF-8"; /* Invalid, there is a character (a space) before the at-rule */
@charset UTF-8; /* Invalid, without ' or ", the charset is not a CSS [<string>
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/string) */

2. @import有什么作用？如何使用？

概述

@import CSS@规则，用于从其他样式表导入样式规则。这些规则必须先于所有其他类型的规则， @charset 规则除外; 因为它不是一个嵌套语句，@import不能在条件组的规则中使用。
因此，用户代理可以避免为不支持的媒体类型检索资源，作者可以指定依赖媒体的@import规则。这些条件导入在URI之后指定逗号分隔的媒体查询。在没有任何媒体查询的情况下，导入是无条件的。指定所有的媒体具有相同的效果。

语法

1.@import url;
2.@import url list-of-media-queries;

例子

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

3.id 选择器和 class 选择器的使用场景分别是什么？

1. ID唯一性,不能给多个DOM设置同一个ID.即不能通过ID选择器去控制多个DOM节点.虽然在测试代码
2. 在编写样式时尽量使用类选择器，即使该DOM节点可能只出现一次。因为ID选择器的优先级比类选择器高,在后期样式的控制中会越来越难控制。也许有人会问：我可不可以全篇都使用ID选择器，那么就不存在和类选择器比较优先级了。理论上这是可以的，但是请注意上一点——ID必须能够唯一的确定DOM节点。如果你全篇都使用ID选择器，那么即使两个DOM节点样式完全相同，那么你也必须把节点样式写两遍, 如果后期要进行维护,那么你必须对两处的代码都进行维护！！！极大的增加了维护的成本。
3. 既然有了类选择器为什么还要规定一个ID选择器？在一个完整的HTML+CSS+JavaScript的页面体系中，对一个DOM节点的ID使用最多的其实是JavaScript(因为通过ID能唯一的确定DOM节点，方便控制),CSS中的使用的ID选择器一般情况下只会添加少量样式，更多对DOM节点的样式控制都是使用类选择器,既能够产生样式叠加,又方便后期的维护。请尽量避免在CSS中使用大量的ID选择器
4. 常规情况下，CSS中会出现大量的ID选择器的情况——JavaScript插件配套的样式表中。

4. em、rem分别是什么？

em是相对元素的父元素的字体大小。rem相对的是html根元素的字体大小

5.CSS 选择器的权重是如何计算的？

！important>行内样式（1000）>ID选择器（100）>类、属性、伪类选择器(10)>元素和伪元素选择器（1）>*通配符选择器(0)