CSS框模型

CSS框模型(Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。背景应用于由内容和内边距组成的区域。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

2、 CSS padding属性： (1)、padding属性： 属性 描述 padding padding-bottom padding-left padding-right padding-top 简写属性。作用是在一个声明中设置元素的所内边距属性。 设置元素的下内边距。 设置元素的左内边距。 设置元素的右内边距。 设置元素的上内边距。 (2)、各padding属性的取值： 值 描述 length % inherit 规定以具体单位计的固定的右内边距值，比如像素、厘米等。默认值是 0px。 定义基于父元素宽度的百分比右内边距。此值不会如预期地那样工作于所有的浏览器中。 规定应该从父元素继承右内边距。 3、 CSS border属性：

(1)、CSS边框border属性： 属性 描述 border border-style border-width border-color border-bottom border-bottom-color border-bottom-style border-bottom-width border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-top border-top-color border-top-style border-top-width 简写属性，用于把针对四个边的属性设置在一个声明。 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 简写属性，用于把下边框的所有属性设置到一个声明中。 设置元素的下边框的颜色。 设置元素的下边框的样式。 设置元素的下边框的宽度。 简写属性，用于把左边框的所有属性设置到一个声明中。 设置元素的左边框的颜色。 设置元素的左边框的样式。 设置元素的左边框的宽度。 简写属性，用于把右边框的所有属性设置到一个声明中。 设置元素的右边框的颜色。 设置元素的右边框的样式。 设置元素的右边框的宽度。 简写属性，用于把上边框的所有属性设置到一个声明中。 设置元素的上边框的颜色。 设置元素的上边框的样式。 设置元素的上边框的宽度。 (2)、border属性的取值： ☆border-style取得的值：

值 描述 none hidden dotted dashed solid double groove ridge inset outset inherit 定义无边框。 与 \"none\" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 定义点状边框。在大多数浏览器中呈现为实线。 定义虚线。在大多数浏览器中呈现为实线。 定义实线。 定义双线。双线的宽度等于 border-width 的值。 定义 3D 凹槽边框。其效果取决于 border-color 的值。 定义 3D 垄状边框。其效果取决于 border-color 的值。 定义 3D inset 边框。其效果取决于 border-color 的值。 定义 3D outset 边框。其效果取决于 border-color 的值。 规定应该从父元素继承边框样式。 ☆border-width取得的值： 值 描述 定义细的边框。 默认。定义中等的边框。 定义粗的边框。 允许您自定义边框的宽度。 规定应该从父元素继承边框宽度。 thin medium thick length inherit ☆border-color取得的值： 值 描述 color_name hex_number rgb_number 规定颜色值为颜色名称的边框颜色（比如 red）。 规定颜色值为十六进制值的边框颜色（比如 #ff0000）。 规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。 transparent inherit 默认值。边框颜色为透明。 规定应该从父元素继承边框颜色。 4、 CSS margin属性： (1)、margin属性：

属性 描述 margin margin-bottom margin-left margin-right margin-top 简写属性。在一个声明中设置所有外边距属性。 设置元素的下外边距。 设置元素的左外边距。 设置元素的右外边距。 设置元素的上外边距。 (2)、margin属性的取值：

值 描述 auto length % inherit 浏览器计算外边距。 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 规定基于父元素的宽度的百分比的外边距。 规定应该从父元素继承外边距。 5、 CSS外边距合并：

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

(1)、合并的几种情况：

①当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

②当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上

和/或下外边距也会发生合并。请看下图：

③假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下

外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：