框模型

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

术语翻译

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

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

提示：

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

内边距属性

下面两段代码作用是等效的：
代码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;}

边框属性

外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 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;}

外边距属性

外边距合并

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