前端面试题之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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 195,653评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,321评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,833评论 0 324
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,472评论 1 266
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,306评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,274评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,658评论 3 385
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,335评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,638评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,697评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,454评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,311评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,699评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,986评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,254评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,647评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,847评论 2 335

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,709评论 1 92
  • 转载说明 一、介绍 浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工作原理,我们将看到,从你在地址栏输入g...
    17碎那年阅读 2,430评论 0 22
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,452评论 1 19
  • 我是一个带点矫情的屌丝女,无论五官身材,无论事业学识,都不能引起别人的瞩目,但我又很热烈追求平淡的生活中感情...
    酷雪冰凌阅读 307评论 5 3
  • 当选后,唐纳德·特朗普在他的胜利演讲中承诺重建美国的基础设施,这将需要大量的政府开支。此外,特朗普的“美国第...
    小小杠杆阅读 298评论 1 2