width 宽度： 指的是真实内容的宽度，不是盒模型的宽度。
height 高度： 盒子里面内容的高度，不是指盒子的高度。
padding 内边距（盒子里面的留白）。
border 指的是盒子边框的大小。
margin 盒子外边距。（一个盒子和另外一个盒子的关系）
width和height 描述的是真实内容的宽和真实内容的高。
盒子的宽度和真实的占有度不是一回事。
以上图为例：
盒子的内容width：200px height:200px 但真实的宽高却是302*302 ，这是因为还要加上内边距（padding），还有边框（border）大小。
如果要求一个盒子的真实占有像素 公式为 左border+右border+width+左padding+右padding.
如果想保持一个盒子的真实占有不变，那么加width就要减padding（width +2 padding-1），加了padding就要减width。 （padding+1 width-2）
一、关于padding。
padding区域都是有背景颜色的，也就是说backgroud-color将填充所有boder以内的区域！！
padding 是有四个方向的，分别可以描述四个方向的padding。
在css中有两种定义padding的方式，分别是直接用小属性，或者用空格隔开，例如：
padding-left: 100px;
pandding-right: 20px;
padding-top: 30px;
padding-bottom: 40px;
或者用以下方式定义，通过空格分开，上右下左：
padding：30px 20px 40px 100px；
其实有一些html元素标签默认就带有padding，比如ul标签。所以在编写html代码的时，默认都会加一个默认的选择器，把margin和padding都清除。
*{
margin: 0;
padding: 0;
}
二、border边框。
border有三个要素，分别是粗细，线形，颜色。
例：
boder: 10px ridge red;
另外一种写法就是：
border-width: 10px;
border-style: solid;
border-color: red;
按照方向拆分：
border-top：10px solid red;
border-right:10px solid bule;
border-left: 10px solid yellow;
border-bottom: 10px solid green;
甚至可以拆的更详细：
将每个方向的每个元素都拆开。
如果想让边框消失，可以使用border:none 或者boder:0，他们两个作用一样。
如果想让某一个方向的边框消失border-left:none；或者border-left:0；。