伪元素选择器+高度塌陷的解决办法

最新推荐文章于 2023-07-14 08:00:00 发布

原创最新推荐文章于 2023-07-14 08:00:00 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css #css3

web前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了CSS中的伪元素选择器，如:first-line用于修饰文本第一行，:first-letter修饰首字母，:before和:after用于在元素前后添加内容。同时，详细阐述了高度塌陷问题及其解决方案，包括设置最小高度、清除浮动、使用overflow: hidden和万能清除法。这些技术对于前端开发人员理解和解决布局问题至关重要。

伪元素选择器+高度塌陷

伪元素选择器

    伪元素：假的元素，自己创造出来的，让页面显示对应的内容。
    伪类选择器：鼠标的效果，需要配合鼠标的事件才能触发。
    如何查看伪元素的元素类型：通过伪元素选择器加进来的元素是一个行内元素。

修饰文本的第一行，只修饰第一行

       使用方法：：first-line

修饰第一个字符

       使用方法： ：first-letter

向元素内部正前方添加内容

使用方法：
元素:before{/*这个冒号不允许带空格*/
content:"";

}
必须配合出现：content必须携带

向元素内部正后方添加内容

使用方法：
元素:after{/*这个冒号不允许带空格*/
content:"";

}
必须配合出现：content必须携带

高度塌陷

高度塌陷：浮动，父子关系中不设置高度，只给子元素设置宽度，当子元素添加浮动后，会脱离文档流，父元素高度会降低===效果称之为高度塌陷=父元素高度降低了。
解决办法：
1）给父元素添加一个高度，建议使用最小高度。
2）高度塌陷本质原因就是盒子上去补位了。不让补位元素上去补位：清楚浮动就行。clear：both
3）特殊情况：父元素里面有一个子元素的时候。给子元素添加浮动=照样会产生高度塌陷
使用overflow：hidden=触发BFC，触发BFC后会让浮动的元素继续参与高度的计算
4）方便快捷的方法：
万能清楚法：

使用方法：
元素:after{/*这个冒号不允许带空格*/
content:"";
display：block;
clear:both;
}