我们知道#ID 速度是最快的,那么我们都用 ID,是不是很快。但是我们不应该为了效
解析:
(SASS,Compass,Stylus,LESS)
描述下你曾经使用过的 CSS 预处理的优缺点
解析:
Webfonts (字体服务例如:Google Webfonts,Typekit 等等。)
解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?
解析:
浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是
所有元素的集合)。然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到
真个选择器都匹配完,还在集合中的元素就匹配这个选择器了。
举个例子,有选择器:
body.ready #wrapper > .lol233
先把所有 class 中有 lol233 的元素拿出来组成一个集合,然后上一层,对每一个集合中的
元素,如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上,从这个元
素的父元素开始向上找,没有找到一个 tagName 为 body 且 class 中有 ready 的元素,就
把原来的元素从集合中删去。
至此这个选择器匹配结束,所有还在集合中的元素满足。
大体就是这样,不过浏览器还会有一些奇怪的优化。
为什么从后往前匹配因为效率和文档流的解析方向。效率不必说,找元素的父亲和之前的兄
弟比遍历所哟儿子快而且方便。关于文档流的解析方向,是因为现在的 CSS,一个元素只要
确定了这个元素在文档流之前出现过的所有元素,就能确定他的匹配情况。应用在即使 html
没有载入完成,浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。
为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运
用,遍历每一条 CSS Rule 通过集合筛选,比遍历每一个元素再遍历每一条 Rule 匹配要快
得多。
解释一下你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染
解析:
你的布局。
所有 HTML 元素可以看作盒子,在 CSS 中,”box model”这一术语是用来设计和布局时使用。
CSS 盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边距,边框,填充,和实
际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
不同部分的说明:
Margin(外边距) – 清除边框外的区域,外边距是透明的。
Border(边框) – 围绕在内边距和内容外的边框。
Padding(内边距) – 清除内容周围的区域,内边距是透明的。
Content(内容) – 盒子的内容,显示文本和图像。