盒模型基础

盒模型属性

盒模型有五个属性分别为：
1、Width 内容宽度
2、Height 内容高度
3、Border 边框
4、Padding 内边距（即边框到内容之间的距离）
5、Margin 外边距（即一个盒子到另一个盒子之间的距离）
一、Width与Height
指盒子的宽和高（盒子的体积或者容积，显示内容位置大小）
例：
Width：500px （盒子宽为500像素）
Height：300px （盒子高为300像素）

二、Border
指设置盒子的边框样式
边框属性中有三个属性值分别为：粗细 样式 颜色，并且有两种写法
第一种是指定属性进行设置
例：
Border-width：1px （设置边框大小）
Border-style：solid （设置边框样式）
Border-color：red （设置边框颜色）
其中边框样式有四种分别为：
Solid 实线
Double 双实线
Dotted 点线
Dashed 虚线
第二种可以简写为
Border：1px solid red （中间用空格隔开）

三、Padding
指内容到边框之间的距离
一般标签都有默认padding值，所以我们一般都会在CSS中加入个通配符
*{margin：0；padding：0}（清除所有margin与padding值）

Padding是有盒子内的背景色的，也就是background-color的属性回填充盒子内的所有区域
Padding属性有四个方向，分别设置四个方向的距离，也有两种描述方法

第一种是指定一个方向的分别设置属性
例：
Padding-top:10px （上边距为10像素）
Padding-right：20px （右边距为20像素）
Padding-bottom：30px （下边距为30像素）
Padding-left：40px （左边距为40像素）

第二种是综合属性，中间要用空格隔开
例：
Padding：10px 20px 30px 40px 属性为上右下左的数值
其次设置1-4个值的分别代表不同属性
设置一个值为：上下左右
设置两个值为：上下、左右
设置三个值为：上、左右、下
设置四个值为：上、右、下、左

四、Margin
指当前盒子到最近盒子的距离
Margin与padding差不多只是一个设置盒子内边距一个设置盒子外边距，设置方法与padding类似
例：
Margin：10px （上下左右各移动10像素，即四周边距各为10）
Margin-left：20px （盒子向右移动20像素，即左边距为20）
Margin-top:30px （盒子向下移动30像素，即上边距为30）