盒子模型

作用：盒子模型是用来描述一个元素的宽高，边框，内容，距离，边框的大小以及元素与元素的距离

从内到外盒子模型有这几个属性组成

• width 内容宽度 height 内容高度
• padding-top、padding-right、padding-bottom、padding-left
  ==padding是内边距，内容距离盒子内边缘的距离==
• border 边框 边框只有厚度（高度），没有宽高，border也分别为四个方向
• margin-top、margin-right、margin-bottom、margin-left
  ==margin是位边距 元素元素之间的距离==

image

• widht/height 内容的宽度和高度，和整个盒子的宽高四两个概念

• padding 内容边缘距离盒子边框内边缘的距离，有四个方向，有不同的写法

  • padding-top、padding-right、padding-bottom、padding-left
  • padding: 10px 20px 30px 40px; 上 右 下 左
  • padding: 10px 20px 30px; 上 左右 下
  • padding: 10px; 四个方向都是10px;

• border 边框 由宽度 样式 颜色，默认一个盒子的边框宽度为3px，样式为无，颜色为黑色

这三个属性如果没有设置样式，边框也不会出现