在HTML页面中相当于一个大仓库，盒子和盒子之间的间距是外边距(margin)，盒子内有白色泡沫相当于内边距(padding)，盒子内的物品有宽高(width/height),盒子的厚度是边框(border)

    • width 宽度
    • height 高度
    • border 边框
      • border:1px solid red;
      • border-top:1px solid red; 上边框线
      • border-bottom:1px solid red; 下边框线
      • border-left:1px solid red; 左边框线
      • border-width:1px; 边框的宽度
      • border-style:solid; 边框的样式(风格)
      • border-color:red; 边框的颜色
    • margin 外边距
      • 第一种写法：当设置多个值时
        • margin:1px 2px 3px 4px;上 右 下 左(顺时针)
        • margin：1px 2px 3px;上 左右 下
        • margin:1px 2px; 上下 左右
        • margin:1px;代表四个方向的值
      • 第二种写法：当设置一个值或两个值
        • margin-left:1px;左外边距
        • margin-top:1px;上外边距
        • margin- right:1px;右外边距
        • margin-bottom:1px;下外边距
    • padding 内边距
      • 第一种写法：当设置多个值时
        • padding:1px 2px 3px 4px;上 右 下 左(顺时针)
        • padding：1px 2px 3px;上 左右 下
        • padding:1px 2px; 上下 左右
        • padding:1px;代表四个方向的值
      • 第二种写法：当设置一个值或两个值
        • padding-left:1px;左内边距
        • padding-top:1px;上内边距
        • padding- right:1px;右内边距
        • padding-bottom:1px;下内边距


    什么情况下使用margin外边距
    一般常用在盒子与盒子之间的间距，块级标签与块级标签之间的间距，这时候可以使用margin外边距

    什么情况下使用padding内间距边距
    一般常用在盒子内(里面)的间距，行内标签与行内标签之间的间距，这时候可以使用padding内边距

    盒模型的计算公式
    allwidth = 本身内容的宽度 + 左右padding + 左右border
    allheight = 本身内容的高度 + 上下padding + 上下border