css3相关知识点

1、如何理解盒子模型？

每个HTML元素都是长方形盒子。
（1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。
（2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。

2、link与@import的区别？

（ 1）link属于XHTML标签，而@ import是CSS提供的。

（ 2）页面被加载时，link会同时被加载，而@ import引用的CSS会等到页面被加载完再加载。

（ 3） import只在IE 5以上才能识别，而link是XHTML标签，无兼容问题。

（ 4）link方式的样式权重高于@ import的权重。

（ 5）使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@ import不是dom可以控制的。

3、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS 3新增伪类有哪些？

id选择器（#id）

类选择器（.className）

标签选择器（div、h1、p）、通配符选择器（*）、后代选择器（li、a）、伪类选择器（a:hover, li: nth-child）

可继承的样式：color、font-size、font-family

4、经常遇到的浏览器的兼容性有哪些？原因、解决方法是什么？

浏览器默认的margin和padding不同，解决方案是加一个全局的*{margin:0;padding:0;}来统一。

5、为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对 SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。最简单的初始化方法就是：* { padding: 0; margin: 0;}

7、Firefox下文本无法撑开容器的高度，如何解决？

清除浮动 .clear{ clear:both; height:0px; overflow:hidden;}

8、用纯 CSS 创建一个三角形的原理是什么？

把上、左、右三条边隐藏掉（颜色设为 transparent）

#demo { 
  width:0; height: 0; 
  border-width: 20px; 
  border-style: solid; 
  border-color: transparent transparent red transparent;
}

9、前端页面有哪三层构成，分别是什么？作用是什么？

最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。

网页的结构层（structural layer）由HTML或XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

网页的表示层（presentation layer）由CSS负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是JavaScript语言和DOM主宰的领域。

10、现在HTML5中css3可以写出一个旋转的立方体，请写出要用到的CSS属性。

-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(30deg) rotateX(10deg);
-webkit-animation:  rot 4s linear infinite;

11、介绍一下 Sass 和 Less 是什么？它们有何区别？

Sass ( Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟 css一样(但多了些功能)，比 css好写，而且更容易阅读。 Sass语法类似与 Haml，属于缩排语法（ makeup），用意就是为了快速写 Html和 Css。 Less一种动态样式语言. 将 CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node .js)。

区别：

(1) Sass是基于 Ruby的，是在服务端处理的，而 Less是需要引入 less .js来处理 Less代码输出 Css到浏览器，也可以在开发环节使用 Less，然后编译成 Css文件，直接放到项目中，也有 Less .app、 SimpleLess、 CodeKit .app这样的工具，也有在线编译地址。

(2)变量符不一样， less是@，而 Scss是$，而且变量的作用域也不一样。

( 3)输出设置，Less没有输出设置，Sass提供 4中输出选项：nested, compact, compressed 和 expanded。

( 4)Sass支持条件语句，可以使用if{} else{}, for{}循环等等。而 Less不支持。