Css盒子大小的基础理解

一个盒子由宽和高组成，

盒子的宽度=左右padding、border、margin+内容的宽度(width)

盒子的高度=上下padding、border、margin+内容的高度(height)

一个盒子(display: block) 没有设置宽度，宽度为父元素的宽度，没有设置高度，高度为它的内容的高度

想要理解盒子的大小，应该理解padding/margin两个属性的参数

• padding及margin的4种参数写法
  • 1个参数：padding/margin: 5px; 上下左右都为5px
  • 2个参数：padding/margin: 5px 10px; 上下: 5px 左右: 10px
  • 3个参数：padding/margin: 30px auto 20px; 上、左右、下
  • 4个参数：padding/margin: 15px 5px 10px 20px; 上、右、下、左