CSS学习6（元素框）

基本元素框

所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小，因此，每个框影响着其他元素框的位置和大小。默认地，一个可以显示的文档由多个矩形框组成，这些矩形框分布开，从而不会相互重叠（一般情况下）。另外，根据某些限制，这些框要尽可能地少占空间，同时还要保证相互之间有足够的空间，以便清楚地看出哪些内容属于哪个元素。

外边距

没啥好说的，就说一点：

外边距使用百分数值时是以父元素宽度为标准的，上下外边距也一样。

边框

默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果一个元素没有任何文本，假设它有一个表，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色(因为color可以继承)。

CSS2.1明确指出元素的背景是内容、内边距和边框区的背景。也就是说如果你的边框是虚线，背景会从边框中透出来。

边框的样式

border-style

[none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]{1,4}| inherit

注意，当边框样式为none时，其width属性也会被置0。

内边距

可以为元素的内边距设置百分数值。像外边距一样，百分数值要相对于其父元素的width计算，上下边距也一样，所以如果父元素的width改变，它们也会改变。

替换元素

尽管看上去可能有些奇怪，不过确实可以向替换元素应用内边距，最让人奇怪的是，可以向图像应用内边距。

不论替换元素是块级元素还是行内元素，内边距都会围绕其内容，背景色将填入该内边距。