盒属性主要涉及到三类CSS属性：
- padding
- margin
- border
一、CSS中的盒概念：
CSS技术将HTML中所有的元素都认为是一个“盒子”，并把这个“盒子”分为了三个组成部分，这三个组成部分分别叫做“填充”、“边界”、“边框”。顾名思义，盒子的主要功能就是盛放东西，CSS的意思是将各个HTML标记对看做了容器，而标记对内部存放的文本、图片、列表、表格、表单等都被看做了容器所盛放的内容。
一个装有地球的盒子
CSS技术为盒子的三个组成部分下了明确的定义：
- 填充：指盒子边框与盒子内容之间的距离。
- 边界：指盒子与盒子之间的距离。
- 边框：指填充与边界之间的部分。
CSS的盒模型
盒子的三个组成部分中，“填充”和“边界”只提供了相关的距离属性，而“边框”提供了相关的距离属性、颜色属性和样式属性。
二、调整盒子的填充距离：
CSS技术利用padding系列属性来调整盒子的填充距离。
CSS技术利用padding系列属性来调整盒子的填充距离
padding属性的取值为四个数值，按照“上、右、底、左”的顺序排列书写，之间用空格隔开。
padding属性的使用格式：
padding:top right bottom left;
padding属性的取值：
- 带有单位的长度值。
- auto
- 百分比
padding属性还派生出下列四个子属性，用于调整四个方向上单独的填充距离：
- padding-top，设置盒子顶部填充的距离。
- padding-right，设置盒子右侧填充的距离。
- padding-bottom，设置盒子底部填充的距离。
- padding-left，设置盒子左侧填充的距离。
注意：盒子的填充具备了数值后，为了保证盒子的大小不发生变化，必须修改盒子的宽度和高度。
- 盒子的实际高度=盒子的期望高度-盒子的顶部填充距离-盒子的底部填充距离
- 盒子的实际宽度=盒子的期望宽度-盒子的左侧填充距离-盒子的右侧填充距离
例如：希望创建一个宽度为500，高度为300的盒子。同时顶部填充距离为10像素，左侧填充距离为20像素，右侧和底部填充均不设置，则padding属性取值如下：
padding:10px 0 0 20px;
因此，计算盒子的实际宽高：
- 盒子的实际高度=300px-10px-0px=290px
- 盒子的实际宽度=500px-20px-0px=480px
所以，该盒子的CSS代码应设置为如下所示：
width:480px; height:290px;
padding:10px 0 0 20px;
当然，有开发经验的人一定知道，CSS3技术提供了一个名为box-sizing的属性，避免了这类填充相减的复杂操作。在后续的文章中，我会为大家全面介绍CSS3技术的使用。
三、调整盒子的边界距离：
CSS技术利用margin系列属性来调整盒子的边界距离。
CSS技术利用margin系列属性来调整盒子的边界距离
margin属性的取值为四个数值，按照“上、右、底、左”的顺序排列书写，之间用空格隔开。
margin属性的使用格式：
margin:top right bottom left;
margin属性的取值：
- 带有单位的长度值（可以取负值）。
- auto
- 百分比
margin属性还派生出下列四个子属性，用于调整四个方向上单独的边界距离：
- margin-top，设置盒子顶部边界的距离。
- margin-right，设置盒子右侧边界的距离。
- margin-bottom，设置盒子底部边界的距离。
- margin-left，设置盒子左侧边界的距离。
四、调整盒子的边框
CSS技术利用border系列属性来调整盒子的边框。
CSS技术利用border系列属性来调整盒子的边框
1、调整盒子边框的粗细：
- border-top-width，设置盒子顶部边框的粗细。
- border-right-width，设置盒子右侧边框的粗细。
- border-bottom-width，设置盒子底部边框的粗细。
- border-left-width，设置盒子左侧边框的粗细。
- border-width，设置盒子四个方向边框的粗细。
border-width属性的使用格式：
border-width:top right bottom left;
2、调整盒子边框的颜色：
- border-top-color，设置盒子顶部边框的颜色。
- border-right-color，设置盒子右侧边框的颜色。
- border-bottom-color，设置盒子底部边框的颜色。
- border-left-color，设置盒子左侧边框的颜色。
- border-color，设置盒子四个方向边框的颜色。
border-color属性的使用格式：
border-color:top right bottom left;
3、调整盒子边框的样式：
- border-top-style，设置盒子顶部边框的样式。
- border-right-style，设置盒子右侧边框的样式。
- border-bottom-style，设置盒子底部边框的样式。
- border-left-style，设置盒子左侧边框的样式。
- border-style，设置盒子四个方向边框的样式。
border-style属性的使用格式：
border-style:top right bottom left;
border-style属性有如下所示的取值：
- none，盒子无边框。
- solid，盒子边框为实线。
- dashed，盒子边框为虚线。
- dotted，盒子边框为点边框。
- double，盒子边框为双实线边框。
- groove，盒子边框为沟槽状。
- ridge，盒子边框为脊状。
- inset，盒子边框为凹陷状。
- outset，盒子边框为凸出状。
4、设置盒子一个位置的边框效果：
CSS还提供了可以设置盒子单个位置边框效果的属性。
- border-top，设置盒子顶部边框的效果。
- border-right，设置盒子右侧边框的效果。
- border-bottom，设置盒子底部边框的效果。
- border-left，设置盒子左侧边框的效果。
使用格式：
border-top:style width color;
例如：border-top:solid 1px #ff0000;
5、设置盒子所有边框具有相同的效果：
CSS技术还提供了可以调整盒子所有边框都具有相同外观的属性。
- border，设置盒子四个方向所具备边框外观效果。
使用格式：
border:style width color;
例如：border:solid 1px #ff0000;
