框模型

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

术语翻译

• element : 元素。
• padding : 内边距，也有资料将其翻译为填充。
• border : 边框。
• margin : 外边距，也有资料将其翻译为空白或空白边。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：

• 背景应用于由内容和内边距、边框组成的区域。
• 内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
• 外边距可以是负值，而且在很多情况下都要使用负值的外边距。

内边距属性

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

下面两段代码作用是等效的：
代码1：

h1 {padding: 10px 0.25em 2ex 20%;}//按上右下左的顺序来设定单独的边属性。

代码2：

h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}

边框

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。

• 边框的样式：

a:link img {border-style: outset;} //border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。

• 定义多种样式:

p.aside {border-style: solid dotted dashed double;}

• 定义单边样式:(以下两个代码等价)
  有四个边框样式

border-top-style
border-right-style
border-bottom-style
border-left-style

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

• 边框的宽度：

p {border-style: solid; border-width: 5px;}

或者

p {border-style: solid; border-width: thick;}//or thin or medium(默认)

• 定义单边宽度：可以按照 top-right-bottom-left 的顺序设置元素的各边边框

p {border-style: solid; border-width: 15px 5px 15px 5px;}

也可以通过下列属性分别设置边框各边的宽度：

p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}

• 没有边框：

p {border-style: none; border-width: 50px;} //边框没有了，宽度设定没有意义了

• 边框的颜色：

p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;//按上右下左的顺序设定各个具体边框
}

p {
border-style: solid;
border-color: blue red;//上下边框蓝色，左右边框红色
}

• 透明边框：边框颜色值 transparent。这个值用于创建有宽度的不可见边框

<a href="#">AAA</a> <a href="#">BBB</a> <a href="#">CCC</a> a:link, a:visited { border-style: solid; border-width: 5px; border-color: transparent; } a:hover {border-color: gray;}

边框属性

属性	功能描述
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 属性

h1 {margin : 0.25in;}
h1 {margin : 10px 0px 15px 5px;}//按上右下左的顺序来设定属性
p {margin : 10%;}//可是使用百分比，相对于父元素的

• 值复制
  规则如下：
• 如果缺少左外边距的值，则使用右外边距的值。
• 如果缺少下外边距的值，则使用上外边距的值。
• 如果缺少右外边距的值，则使用上外边距的值。
  下面的两段代码效果一样：

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

• 单边外边距属性

p {margin-left: 20px;}

外边距属性

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

外边距合并

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