1、框模型：

　　背景应用于边框(border)所围区域；

　　用户代理样式表就是浏览器默认的样式，主要是字体大小和各种间距；

　　通用选择器* {}，可设置所有元素的样式；

　　width 和 height 指的是内容区域的宽度和高度；

　　增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 

2、外边距为负值：

　　margin-top是负值：元素向上方元素移动相应距离，可覆盖上方元素；

　　margin-bottom是负值：下方元素向自己移动相应距离，可被下方元素覆盖；

　　marin-left是负值：元素向左方元素移动相应距离，可覆盖左方元素；

　　margin-right是负值：右方元素向自己移动相应距离，可被右方元素覆盖；

　　总结：

　　　　元素之间相互覆盖没有意义；

　　　　当元素A已经设置好外边距，元素B想要靠近它，这时有两种方式：

　　　　　　其一是B懒得出力，A只好拉B过去，所以A设置自己的margin-bottom或margin-right为负值即可；

　　　　　　其二是B积极出力，自己向A走过去，所以B设置自己的margin-top或marin-left为负值即可；

　　　　　　注意，两种方式，A都是不动的。

 

3、浮动元素

4、div横向排列：

　　若设置好width与height，再设置display:inline，效果不对？

　　设置float:left，上外边距不对？

5、DTD：

　　Document Type Definition 文档类型定义，它是一套关于XML标记符的语法规则，是XML1.0版规格的一部分，也是用来验证XML文件格式的验证机制，是XML的一个组成部分；
　　DTD文档的组成部分有：元素的定义规则，元素间关系的定义规则，元素可使用的属性，可使用的实体或者符号规则；

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">：

　　　　这就是文档类型定义，里面包含了文档的规则，浏览器就根据定义的DTD来解释页面的标识，并展现出来。

6、浏览器兼容性：

　　W3C 规定，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的；

　　IE5.X 和 6 浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；

　　故不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素（？而且为什么不全部只设置外边距）。

7、CSS长度单位：

　　浏览器默认的16px与body、html元素有何关系？

　　em是相对于父元素的font-size属性值来计算的，rem是相对于html标签的font-size属性值来计算的：

　　　　父元素不设置font-size的话，就继承body 1em=16px，想计算方便可以将body的font-size 设置为 62.5%；

　　<html style="font-size:20px;">
    　　<body>
        　　<div style="font-size:10px;">
            　　<div style="font-size:1em;">1em*10=10px</div>
            　　<div style="font-size:1rem;">1rem*20=20px</div>
        　　</div>
    　　</body>
　　</html>

8、边距百分比：

　　百分数值是相对于其父元素的 width 计算的；

　　即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。