简单盒模型

1、什么是盒模型？

所有的元素都具有盒模型，盒模型又叫做框模型，盒模型包含：内容区域（content）、内填充 （padding）、边框（border）和外边距（margin）。

盒子的总宽度 = width + 左右的padding + 左右的border + 左右的margin

盒子的总高度 = height + 上下的padding + 上下的border + 上下的margin

2、盒模型的相关属性 

（1）内容区域

width 宽度

常见单位：px、auto、%

width:100% 父元素有多宽它就有多宽

height 高度

常见单位：px、auto、%

最大宽与最小宽

max-width 最大宽

min-width 最小宽

最大高与最小高

max-height 最大高

min-height 最小高

（2）内填充padding

元素内容到边框之间的距离就是padding的区域 内填充会撑开盒子

单边内填充：

padding-top 上内填充

padding-bottom 下内填充

padding-left 左内填充

padding-right 右内填充

复合写法：

padding: 一个值 | 两个值 | 三个值 | 四个值

注意：

如果盒子设置了width属性，那么padding会撑开盒子

如果没有设置width属性，设置padding不会使盒子变大

padding设置百分比时，是相对于父元素的宽度来进行计算的 

（3）边框border

边框属性：

border-width 设置边框的宽度

可以设置一个值、两个值、三个值及四个值

border-width单独设置时没有效果，需要配合border-style使用（且border-style的值不为none）

border-style 设置边框的样式

常用的属性值：

solid 实线

double 双线

dotted 点状虚线

dashed 线型虚线

none 没有

border-color 设置边框的颜色

颜色关键词

十六进制

rgb()

rgba()

单边边框的设置：

border-top 设置上边框

border-top-width border-top-style border-top-color

border-bottom 设置下边框

border-left 设置左边框

border-right 设置右边框

边框的复合写法：

去掉边框：

border:none

border:0

边框的应用——制作三角形

给盒子的宽高设为0像素

给盒子添加边框

留下想要的三角形的边框颜色，其余的边框颜色设为背景的颜色/透明色

（4）外边距margin

盒子与盒子之间的距离是margin的区域

单边外边距的设置：

margin-top 设置上外边距

margin-bottom 设置下外边距

margin-left 设置左外边距

margin-right 设置右外边距

复合写法：

margin:一个值 | 两个值 | 三个值 |四个值；

margin的应用——盒子水平居中

盒子必须得有宽度才可以使用margin:0 auto实现水平居中