CSS框模型（盒子模型）padding与border属性
框结构模型图一：
元素框的核心区域即为实际内容所在。
由内边距完全包裹起内容部分。
通过内边距形成了元素背景区域。
构成该区域边界的部分即为边框设置。
在该区域之外存在外边距设置，默认情况下该区域为透明状态。因此在视觉上不会覆盖后续显示的内容。
提示：背景应用于由内容和内边距、边框组成的区域。
框结构模型图二：
外边距可以是负值
CSS padding 属性
padding 属性接受长度值或百分比值，但不允许使用负值。
请依次设置上侧、右侧、下侧和左侧的内边距参数。需要注意的是,这些边界内的间距数值可采用不同的单位或百分比值进行调整.
-
关于参数缺省问题，下面一一记录：
-
padding 的缺省设置即默认为 0 值。但其中 td 和 th 单元格例外，在这些单元格中 padding 的缺省设置被设定为 1。
-
当仅提供一个数值时，则表示所有四个方向的内边距宽度均为相同大小，并且该信息已在相关文档中有所记载。
-
当有两个指定时，则第一个参数决定上下方向的内边距大小而第二个参数决定左右方向的内边距大小。
当存在三个数值时，在上下文中具体应用时会涉及几个关键参数设置：其中第一个数值用于设定上部间隙宽度；第二个数值则决定了左右水平间距宽度；第三个数值用于设定下部间隙宽度。
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
- padding-top
- padding-right
- padding-bottom
- padding-left
百分比数值是以其父元素宽度为基础进行计算的。
因此，在父元素宽度变化时，
这些值也会随之变化。
请注意：上部和左部的内边距保持一致；也就是其百分比值基于父容器的宽度width属性设定，并非依据父容器的高度height属性计算。
CSS 边框**(border)**
每个边框有 3 个方面：宽度、样式，以及颜色。
CSS2.1 规定：元素的背景区域包括填充内容、内侧边距以及边框区域。具体而言，在处理断开或不连续的边框时，默认情况下要求背景只显示在可见的部分之间。
CSS border-style 属性
border与padding相同，在功能上也是互相对应的：它们不仅可以各自独立地对不同边缘进行单独配置，并且其默认值设定也保持一致：
例子 1
* 上边框是点状
* 右边框是实线
* 下边框是双线
* 左边框是虚线例子 2
* 上边框是点状
* 右边框和左边框是实线
* 下边框是双线例子 3
* 上边框和下边框是点状
* 右边框和左边框是实线例子 4
* 所有 4 个边框都是点状单边边框样式设置：
- top border style
- right border style
- bottom border style
- left border style
CSS 中的 border-style 属性明确指出了 10 种不同的非继承样式，并包含 none 选项。无需进一步阐述，请您点击链接自行了解详细信息。
CSS border-width 属性
应用方法与border-style几乎一样，不再赘述。
可能的值
| 值 | 描述 |
|---|---|
| thin | 定义细的边框。 |
| medium | 默认。定义中等的边框。 |
| thick | 定义粗的边框。 |
| length | 允许您自定义边框的宽度。 |
| inherit | 规定应该从父元素继承边框宽度。 |
分别设置边框各边的宽度：
- top border size * right border size * bottom border size * left border size
CSS border-color 属性
大部分应用方法可以与上面类推，下面只记几点注意事项：
通常情况下，默认设置使边框的颜色与元素背景一致。如果未指定边框色，则其颜色与内容体的颜色一致。另一方面，在某些情况下（如表格仅包含图片），该表的边框颜色会继承自父元素的文字颜色（因为color属性可以继承）。这种常见的情况包括body、div或其他表格结构。
透明边框
我们刚才讨论过，在边框缺乏样式时其宽度自然为零。然而，在某些特定情况下用户可能希望设计一个看似不可见但实际上带有轮廓的边框。
CSS2 增加了一个叫做透明度（transparency）的属性，并将其设置为透明值（transparent value）。该属性用于生成无色边框区域（unseen border region）。
参考以下案例：透明边框示例
它总能随时展示内容。这种透明边框类似于内边距，在元素有背景时会延伸至边界。
重要事项：截至IE7版本，在IE/WIN环境中不支持透明效果。早期版本中，默认情况下会依据元素的color属性来确定边框颜色。
最后，boder 有一种设置方式：
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
例如以下实例可观察到效果：所有左边框属性在一个声明之中