外边距

写在前面的话：这是在博客园发表的第一篇文章，只是自己的读书笔记，希望后面自己会有更多自己的观点。

以往页面都是使用表格布局，原因是表不仅可以用来创建边栏，还可以为整个页面的外观建立一种复杂的结构。甚至还可以用表格完成一些简单的任务，如将文本放在有边框的有色框中。但是这么简单的任务并不需要表格，直接创建即可。

基本元素框

元素框即所有文档元素都生成的一个矩形框，它描述了一个元素在文档布局中所占的空间大小。每个框也影响着其他元素框的位置和大小。例如，文档的第一个元素框是1英寸高，下一个元素框就会至少从顶端开始向下1英寸开始，如果第一个元素框是2英寸高，后面的元素框则会向下多移1英寸。

默认情况下，一个可以显示的文档是由多个矩形框组成的，这些矩形框不会相互重叠。但是采用手工定位或者是在正常的文档流元素上使用负的外边距，也可能出现视觉重叠。

宽度和高度

元素的width：元素从左内边界到右内边界的距离；

元素的height：元素上内边界到下内边界的距离。

此图为《css权威指南》2001年印刷版本截图，仅供参考

height与width属性不能应用到行内非替换元素，只能用于块级元素和替换元素。

IE的width和height的定义

width和height迎来定义可见元素的尺寸，而不是定义元素的内容，即，一个元素的width为400px，则相当于标准中的元素内容区+左右内边距+左右边框。

ie允许行内非替换元素应用width和width属性。

外边距与内边距

 元素框在元素之间只留了很少的空间，但是有三种方法可以在元素外围生成额外的空间：增加内边距，增加外边距以及元素背景的影响。

 元素背景会延伸到内边距中，但不会影响到外边距。外边距和内边距会影响元素的背景何时结束。

外边距

大多数正常流中的间隔都是因为存在元素外边距，外边距会在元素外创建额外“空白”。不能放入其他元素，但是可以看到父元素的背景。

margin的默认值是0，但是浏览器对许多元素提供了预定的样式，所以外边距会有非零的默认值。

百分数与外边距

一般情况下，外边距是随着父元素的width变化而变化的，如果上下外边距随着父元素的height变化而变化，即父元素的height增加，上下外边距必须增加，父元素为了适应后代元素的上下外边距增加height，子元素也必须增加上下外边距，这就导致了无限循环，所以上下左右外边距地增加随着父元素的width变化即可。

外边距和行内元素

前面我们提到，行内非替换元素的行高是不可以通过height改变的，但是规范中是允许试用这个属性的只是不会有效果。但是如果设置左右外边距则是有用的。

如果一个行内非替换元素跨多行显示则情况稍有变化，左外边距应用到元素的开始处，右外边距应用到元素的结束处，行内元素换行一般情况下是不会在下一行开头出现右外边距的，跟打字时不会在下一行开头出现逗号句号一样。

行内非替换元素应用负外边距不会影响行高和上下外边距，但是元素的左右两端可能和其它内容重叠。

行内替换元素的外边距会影响行高，但是左右外边距的影响则是和非替换元素一样。

行内替换元素和非替换元素

笔者去网上搜了一圈，发现大多数人博客里面的概念和百度文库里描述的都是一样的，这里就不赘述了，稍微加点自己的理解。

1.替换元素

替换元素是浏览器根据元素的标签和内容决定具体的显示内容，如<img>标签的src属性决定显示的内容，<input>的type属性决定输入框是单选按钮还是输入框。

<img>,<input>,<texteara>,<select>，<object>都是替换元素。

或许替换元素就是可以替换显示内容的元素。

2.非替换元素

(X)HTML大多数元素是不可替换元素，即其内容直接表现给用户端。如<p>标签。

同上，一个元素标签给定了是不能替换显示的内容的。