什么是盒子模型?
在我们平时看到的网页中，内部的每一个标签元素都是由几个部分构成的: 内容(content),边框(border),内边距(padding)和外边距(margin)。关于盒子模型重点需要掌握的是IE盒模型和标准盒模型的区别:
两者的区别在于content的不同，IE盒模型的content包括padding、border。
position的四个属性及它们的区别
- static(静态定位): 默认值，无定位，元素出现在正常的流中。(忽略top/left/right/bottom/z-index声明)
- fixed(固定定位): 相对于浏览器窗口定位，可通过z-index进行层次分级。
- absolute(绝对定位): 若存在一个position为relative的父级，则相对父级定位，否则相对浏览器窗口定位，脱离文档流，但其在文档流的位置不再存在。可通过z-index进行层次分级。
- relative(相对定位): 相对于其正常(原先本身)的位置定位，脱离文档流，但其在文档流的位置依然存在。可通过z-index进行层次分级。
什么是文档流?
将窗体自上而下分成一行行，并按每行中从左至右的顺序排放元素，即为文档流。
只有三种情况会使得元素脱离文档流:浮动、绝对定位和相对定位
z-index属性
z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下。
note：使用static定位或无position定位的元素z-index属性是无效的。
页面导入样式有几种方法? 它们的区别是?
- link标签引入，当下最常用的一种方式。它属于XHTML标签，除了能加载CSS外，还能定义rel、type、media等属性。
- @import引入，这种方式是由CSS提供的，只能用于加载CSS。
- style嵌入方式引入，这种方式的优点是减少页面请求，缺点是只会对当前的页面有效，无法复用导致代码冗余、不利于项目维护。
note：页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载,且link是XHTML标签，无兼容问题; link支持动态js去控制DOM节点去改变样式，而@import不支持
HTML语义化
根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器更好的解析。
- 有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。
- 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构。
- 便于开发和维护。
- 方便其它设备的解析。
##CSS中的单位px,em与rem
OnionSpace!