css盒子模型:内填充，外边距，边框及引发的问题

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;