盒模型：所有的html元素在浏览器里面都会被一个盒子所包裹起来
认识padding
width跟height只是内容区的宽高并不是盒子的真实占有宽高
padding内边距可不可以有内容？
内边距不能有内容
内边距有没有背景色？
可以有背景色和背景图
padding的坑
使用内边距将内容挤到盒子中间，padding会撑大整个盒子
如果增加了内边距，又不希望整个盒子被撑大，那么就可以减小内容区的宽高
padding的特殊情况
如果一个盒子的宽高是从父元素那边继承过来的，这时候增加盒子的内边距并不会撑大整个盒子的宽度，而是自动挤压内容区。
行级元素的内边距
行级元素的padding-top和padding-bottom无效
CSS边框
边框也是可以撑大整个盒子的
盒子的真实大小 = 内容区 + 内边距 + 边框
border综合属性
按方向拆 可以拆成四个小属性
border-top/bottom；
border-left/right;
按要素拆 可以拆成三个小属性
border- 20px 30px 10px 15px; /**上 右 下 左**/
border-style: solid / double / dotted / dashed; /**实线 / 双线 / 点 / 虚线**/
border-color: #eee; /**设置边框颜色**/
边框在按方向拆完后，还可以按要素拆。
外边距
margin综合属性
按方向可以拆分成四个小属性
margin的坑
外边距合并
注意：只有在html标准文档流里，两个上下排列的块级元素才会出现外边距合并的现象。
外边距塌陷
解决方案：
1、给父元素加边框
2、给父元素加一个overflow: hidden
3、脱标（脱离标准文档流）
行级元素的外边距
对于行级元素来说，左右边距可以使用，但是上下边距完全无效。
html元素默认的内外边距
有很多html元素都有默认的内外边距
比如body就有默认的外边距
h1~h6有默认的上下外边距
ul有默认的上下外边距以及左边的内边距
清除浏览器默认的内外边距
*{ margin: 0; padding: 0; }
让一个块级元素在页面居中显示
margin: 0 auto;