怎样才算一个盒子？
页面上的每个元素都可以看做一个盒子，但display为inline的内联元素，宽高由内容决定，无法设置宽和高。
盒子最重要的5个属性
- width：内容的宽度（不是盒子的宽度）
- height: 内容的高度（不是盒子的高度）
- padding：内边距。
- border：边框。
- margin：外边距。
浏览器给<body>默认的外边距margin大小是8个像素
上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
CSS 盒模型 （标准盒模型）默认
标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。
background-color将填充所有border以内的区域。
一些元素，默认带有padding，比如ul标签，不加任何样式的ul，也是有40px的padding-left。
将标准盒模型修改为IE盒模型的方法： 给元素添加样式
box-sizing:border-box;
IE 盒模型
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
将IE盒模型修改为标准盒模型的方法： 给元素添加样式
box-sizing:content-box;
盒子占据的空间大小
宽度/高度 = content+padding+border+margin
