CSS自学笔记（6）:CSS的模型

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

图片来源：w3school.com.cn

元素(element)是一个html文档的实际内容区域，依次由内边距(padding)、边框(border)、外边距(margin)包围。

注：

1. 背景应用于元素和内边距、边框组成的区域。
2. 内边距、边框、外边距是可选，默认值为0。

内边距(padding)

内边距位于边框和内容之间的空白区域，CSS中额padding属性可以定义内边距区域。

p {padding: 5px;}

元素p的各边都有5px的内边距，padding属性的属性值可以为长度值和百分比，但不能为负数。

我们也可以按照上右下左的顺序为各边设置内边距

p {padding: 5px 0.25em 2ex 20%;}

CSS 内边距属性

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

边框(border)

边框是包围着元素内容和内边距的一条或者多条，我们可以用border属性定义边框的样式、宽度、颜色。

可以为边框属性定义不同的属性值，可以得到各式各样的边框样式。

CSS 边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
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	设置元素的上边框的宽度。

外边距(margin)

外边距是包围边框的空白区域，可以用margin属性来定义外边距的样式，margin属性可以接受长度、百分比、负数等属性值。

所以，外边距是一片空白区域。

和内边距、边框一样，可以根据上右下左的顺序分别定义不同的属性值

p {margin: 0.5em 1cm 20px 10%;}

有时会输入一些重复的值，这时就会用到属性值复制的功能了，可以精简代码，减少没必要的重复代码。

p {margin: 0.5em 1em 0.5em 1em;}

等价于

p {margin: 0.5em 1em;}

CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：

• 如果缺少左外边距的值，则使用右外边距的值。
• 如果缺少下外边距的值，则使用上外边距的值。
• 如果缺少右外边距的值，则使用上外边距的值。

 

CSS 外边距属性

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

外边距合并

当两个垂直外边距（上下外边距）相遇时，它们将合并成一个外边距，合并后的外边距的高度等于两个外边距高度值较大的那个。