一.元素的分类
1.块级元素:
默认占一行，可以设置宽高，可以设置内外边距，会继承父级元素的宽度
如：div,h1-h6,p,ul,ol,li…
2.行内元素:
横排显示，不可以设置宽高，上下外边距无效，可以设置上下内边距，但不会因此撑大父容器的文档流。
如：a，select，span，i，em
所以想给a标签设置宽高要设置display:inline-block;
3.行内块元素:
横排显示，可以设置宽高，可以设置内外边距，两个并排显示的行内块元素，它们上下的间隔距离，以其中最大的间距为主
如：img，input
二.外边距的特殊效果
1.外边距合并
当两个垂直外边距相遇时，他们将合并成一个，最终的距离取决于较大值
2.行内元素对外边距表现
行内元素垂直外边距无效（img 除外）
行内块对外边距的表现
同一行中，一个行内块设置了外边距，其他同行的行内块会跟着发生变化
3.外边距溢出
在特殊的条件下，为子元素设置上外边距，会作用到父元素
条件：
1.父元素没有上边框
2.为第一个子元素设置上外边距
解决方案：
1.为父元素添加上边框 弊端：影响了父元素的实际高度
2.为父元素添加上内边距 弊端：影响了父元素的实际高度
3.在父元素第一个子元素的位置，添加一个空的table标签
三.理解浮动
1,默认文档流
元素按照从左到右，从上往下排列
2.浮动
当元素设置浮动之后，该元素脱离默认文档流，后面的非浮动元素会上前补位。
当前元素会在当前行，向左或者向右排列
也就是说浮动元素浮动到了垂直的上一层，而默认文档流中的元素，依然会根据默认方式排列。
四.高度坍塌
块级元素的高度如果不设置，高度以内部元素内容为准
但是如果内部元素都是浮动元素，浮动元素不占据页面控件
父元素的高，没有了
解决方案：
1.直接为父元素设置高度
弊端：不知道父元素的高度
2.父元素也浮动
弊端：浮动会影响后续元素
3.overflow:hidden
弊端：当元素真的需要显示溢出内容的时候，就显示不出来了
4.在父元素中追加一个空的块级元素，并设置clear:both