css中你不得不知道的一些坑

逃离我推掉我的手 2022-03-27 03:08 448阅读 0赞

**一.元素的分类**  
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.为第一个子元素设置上外边距  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMzE5MA_size_16_color_FFFFFF_t_70]  
解决方案：  
1.为父元素添加上边框 弊端：影响了父元素的实际高度  
2.为父元素添加上内边距 弊端：影响了父元素的实际高度  
3.在父元素第一个子元素的位置，添加一个空的table标签

**三.理解浮动**  
1,默认文档流  
元素按照从左到右，从上往下排列  
2.浮动  
当元素设置浮动之后，该元素脱离默认文档流，**后面的非浮动元素会上前补位。**  
当前元素会在当前行，向左或者向右排列  
**也就是说浮动元素浮动到了垂直的上一层，而默认文档流中的元素，依然会根据默认方式排列。**

**四.高度坍塌**  
块级元素的高度如果不设置，高度以内部元素内容为准  
但是如果内部元素都是浮动元素，浮动元素不占据页面控件  
父元素的高，没有了  
![在这里插入图片描述][20190111210354879.png]  
解决方案：  
1.直接为父元素设置高度  
弊端：不知道父元素的高度  
2.父元素也浮动  
弊端：浮动会影响后续元素  
3.overflow:hidden  
弊端：当元素真的需要显示溢出内容的时候，就显示不出来了  
4.在父元素中追加一个空的块级元素，并设置clear:both

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMzE5MA_size_16_color_FFFFFF_t_70]: /images/20220327/99b99ed891544ef4826b7e5a08e18a28.png
[20190111210354879.png]: /images/20220327/1ba9219b1bd14c32b8e95633ff712119.png