div+css之 css框模型 内边距 边框 外边距 外边距合并
1、CSS 框模型:
术语翻译
· element : 元素。
· padding : 内边距，也有资料将其翻译为填充。
· border : 边框。
· margin : 外边距，也有资料将其翻译为空白或空白边。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
2、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 |
设置元素的上边框的宽度。 |
3、透明边框
a:link, a:visited { border-color: transparent; }
4、定义单边颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：
· border-top-color
· border-right-color
· border-bottom-color
· border-left-color
h1 { border-right-color: red; }
5、边框的样式
a:link img {border-style: outset;}
您可以为一个边框定义多个样式，例如：
p.aside {border-style: solid dotted dashed double;}
上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。
6、定义单边样式
如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
· 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;}
7、边框的宽度
您可以通过 border-width属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
p {border-style: solid; border-width: 5px;}
或者：
p {border-style: solid; border-width: thick;}
8、定义单边宽度
p {border-style: solid; border-width: 15px 5px 15px 5px;}
p {border-style: solid; border-width: 15px 5px;}
您也可以通过下列属性分别设置边框各边的宽度：
· border-top-width
· border-right-width
· border-bottom-width
· border-left-width
因此，下面的规则与上面的例子是等价的：
p { border-style: solid; border-top-width: 15px;
border-right-width: 5px;border-bottom-width: 15px;
border-left-width: 5px;}
9、CSS 外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
<html> <head> <link rel="stylesheet" type="text/css" href="css文件.css" /> <title></title> </head> <body> <b>1、边框样式设计:</b><br> <p>dhsfbhegfbeyhwdfgghrt</p> </body> <html>css文件.css
p{border-style: solid dotted dashed double;} /* 边框的样式设计 */