css笔试题摘录（一）

精选转载

mxstar 2013-01-24 10:13:03 博主文章分类：css学习笔记

文章标签 试题 css 文章分类 前端开发

1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

Doctype声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。

浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

2. 行内元素有哪些？块级元素有哪些？CSS的盒模型？

行内元素有：a b span I b em img input select strong

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

盒模型：margin border padding width

3. CSS引入的方式有哪些? link和@import的区别是?

1. 使用 LINK标签

将样式规则写在.css的样式文件中，再以<link>标签引入。

2. 使用@import引入

跟link方法很像，但必须放在<STYLE>...</STYLE> 中

<!--

　　@import url(css/example.css);

-->

</STYLE>

3. 使用STYLE标签

将样式规则写在<STYLE>...</STYLE>标签之中。

<!--

body {color: #666;background: #f0f0f0;font-size: 12px;}

td,p {color:#c00;font-size: 12px;}

-->

</STYLE>

4. 使用STYLE属性

将STYLE属性直接加在个别的元件标签里，<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}

5. 使用<span></span>标记引入样式

<span style="font:12px/20px #000000;">cnwebshow.com</span>

两者区别：加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：

main.css

———————-

@import “sub1.css”;

@import “sub2.css”;

这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。

4. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

l 通配选择符* { sRules }

l 类型选择符E { sRules }
td { font-size:14px; width:120px; }

l 属性选择符
E [ attr ] { sRules }//所有具有该属性的元素
E [ attr = value ] { sRules }//属性与属性值必须完全匹配
E [ attr ~= value ] { sRules }//部分匹配属性选择器
E [ attr |= value ] { sRules }//匹配value或value-开头的元素

l ^= //以xxx开头的元素

l $= //以xxx结尾的元素

l *= //包含xxx的元素

l 包含选择符E1 E2 { sRules }
table td { font-size:14px; }

l 子对象选择符E1 > E2 { sRules }
div ul>li p { font-size:14px; }

l ID选择符 #ID { sRules }

l 类选择符E.className { sRules }

l 选择符分组
E1 , E2 , E3 { sRules }

l 伪类及伪对象选择符
E : Pseudo-Classes { sRules }
( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]
E : Pseudo-Elements { sRules }
( Pseudo-Elements )[:first-letter :first-line :before :after]

可以继承的有：font-size font-family color

不可继承的一般有：border padding margin background-color width height等
============================

关于CSS specificity

CSS 的specificity 特性或称非凡性，它是衡量一个衡量CSS值优先级的一个标准

既然作为标准，就具有一套相关的判定规定及计算方式，specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

算法：

当遇到多个选择符同时出现时候

按选择符得到的Specificity值逐位相加，

{数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}

就得到最终计算得的specificity，

然后在比较取舍时按照从左到右的顺序逐位比较。

主要的选择器Specificity值：

!important最高

行内style 1，0，0，0

Id选择器 0，1，0，0

Class及属性选择器 0,0,1,0

标签选择器 0,0,0,1

其他选择符 0,0,0,0

Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；

由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。

实例分析：

1.html > body div [id=”totals”] ul li > p {color:red;}

分析：

6个元素{ html body div ul li p} Specificity值为0,0,0,6

1个属性选择符{ [id=”totals”] } Specificity值为0,0,1,0

2个其他选择符{ > > } Specificity值为0,0,0,0

最终：Specificity值为 0,0,1,6

使用!important可以改变优先级别为最高，其次是style对象，然后是id > class >tag ，另外在同级样式按照申明的顺序后出现的样式具有高优先级。

5. 前端页面由哪三层构成，分别是什么？作用是什么？
网页分成三个层次，即：结构层（html或xhtml）、表示层（css）、行为层（js）。
网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer）由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。