css盒子模型组成:内填充，外边距，边框
内填充padding:
左内填充: padding-left
右内填充: padding-right
上内填充: padding-top
下内填充: padding-bottom
简写:
padding: 30px; -上下左右的内填充都是30px
padding: 20px 50px; 上下20px, 左右50px
padding: 10px 20px 30px 40px; 上右 下左
引发的问题:
内填充会将元素撑大
解决办法:
1、元素的宽度-左右内填充/元素的高度-上下内填充
2、box-sizing: border-box;
外边距margin:
左外边距: margin-left
右外边距: margin-right
上外边距: margin-top
下外边距: margin-bottom
简写:
margin: 30px; 上下左右的外边距都是30px
margin: 20px 50px; 上下20px, 左右50px
margin: 10px 20px 30px 40px; 顺时针上右下左
margin: auto; 上下为0，左右居中
margin: 20px auto; 上下20px,左右居中
引发的问题：
子元素设置上外边距，父元素也会增加上外边距，
解决办法：
1、父元素设置属性，overflow：hidden
边框：border
左边框：border-left
右边框：border-right
上边框：border-top
下边框：border-bottom
简写：
border : 10px solid yellow 上下左右都有的实线边框
边框类型：
solid: 实线
dashed: 虚线
dotted: 圆点虚线
double: 双实线
ridge: 3d边框
inset: 内边框
引发的问题:
边框会将元素撑大
解决办法:
1、元素的宽度-左右填充/元素的高度-上下填充
2、box-sizing: border-box;
