一个盒子分为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 隐藏溢出的内容