关于css的一些坑

一.元素的分类

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