盒模型的border、padding与margin

边框（border）

边框的宽度 border-width

边框的颜色 border-color

边框的样式 border-style

---

边框的宽度

border-width默认值一般为3个像素

值的语法：
		四个值：上 右 下 左 （顺时针）
		
		三个值：上 左右 下
		
		两个值：上下   左右

		一个值：上下左右

---

单独指定某一个边的宽度

border-xxx-width

xxx可以为top（上）、right（右）、bottom（下）、left（左）

---

边框的颜色

border-color可以省略不写，若省略则自动使用color（前景色）的颜色值

---

边框的样式

border-style 指定边框的样式；默认值是none，表示无边框

solid			表示实线

dotted			点状虚线

dashed			虚线

double			双线

---

border的简写属性

border简写属性可以同时设置边框所有的相关样式，且没有顺序要求

例子：

border:1px red solid;

---

单独设置某一边的简写属性

border-top				上边框

border-right			右边框

border-bottom			下边框

border-left				左边框

---

盒子模型内边距（padding）

内容区和边框之间的距离是内边距

四个方向内边距

padding-top

padding-right

padding-bottom

padding-left

a）内边距的设置会影响盒子模型的大小

b）背景颜色会延伸到内边距上

---

可见框

一个盒子的可见框的大小，由内容区、内边距和边框共同决定；因此在计算盒子大小时，需要将这三个区域加到一起计算

---

padding简写属性

padding内边距的简写属性可以同时指定四个方向的内边距，规则和border-width一样

值的语法：
		四个值：上 右 下 左 （顺时针）
		
		三个值：上 左右 下
		
		两个值：上下   左右

		一个值：上下左右

---

外边距（margin）

a）margin不会影响盒子可见框的大小

b）margin会影响盒子的位置

c）margin会影响到盒子实际占用空间

四个方向的外边距

margin-top			//上外边距，设置一个正值，元素会向下移动

margin-right		//右外边距，设置一个正值，
					//默认情况下设置margin-right不会产生任何效果

margin-bottom		//下外边距，设置一个正值，其下边的元素会向下移动

margin-left			//左外边距，设置一个正值，元素会向右移动

注：

元素在页面中是按照自左向右的顺序排列的，
因此默认情况下:
如果我们设置左和上外边距则会移动元素自身（挤自己）
如果我们设置右和下外边距则会移动其他元素（挤别人）
总结：左上外边距挤自身，右下外边距挤别人

margin设置负值，元素会向相反的方向移动

---

margin简写属性

margin可以同时设置四个方向的外边距，用法和padding一样

值的语法：
		四个值：上 右 下 左 （顺时针）
		
		三个值：上 左右 下
		
		两个值：上下   左右

		一个值：上下左右