一个盒子分为4个部分：
- content 内容区
- border 边框
- padding 内边距
-
margin 外边距
盒子模型
内容区：
存放内容也就是元素
通过width和height设置内容区块大小
内边距：
padding:10px 20px 30px 40px; 指定内边距大小上→右→下→左的顺序
padding:10px 20px 30px; 指定内边距大小上→左右→下的顺序
padding:10px 20px; 指定内边距大小上下→左右的顺序
padding:10px; 同时指定内边距大小的四个方向
边框：
border:1px red solid; 指定了宽，颜色和样式
边框的样式： - none 没有边框
- dotted 点状虚线
- dashed 虚线
- solid 实线
- double 双实线
- groove 槽线
- ridge 脊线
- inset 凹边
- outset 凸边
外边距：
margin设置元素边框与周围元素相距的空间 - top 上边距
- right 右边距
- bottom 下边距
- left 左边距
- auto 自动
- margin:0 auto 可以使元素居中
display：
我们不能为内联元素设置width、height、margin-top、margin-bottom但是我们可以通过disply来修改内联元素的性质 - block 设置元素为块
- inline 设置元素为行内元素
- inline-block 设置元素为行内块
- none 隐藏元素
visibility：
主要用于元素是否可见
与display的区别：display隐藏元素，隐藏后的元素所站位置不存在；visibility隐藏元素，但是元素所占位置还在 - visible 可见的
- hidden 不可见的
overflow：
当相关元素中的内容溢出后可以通过overflow来控制溢出情况 - visible 默认值
- scroll 添加滚动条
- auto 根据需要自动添加滚动条
- hidden 隐藏溢出的内容
