伪元素

Grid 是现代二维布局，float 主要用于图文环绕；避免在 grid 容器内对子元素使用 float，因其无效；可在 grid 区域内部用 float 处理文字绕图；清除浮动推荐用 overflow:hidden；逐步替换 float 为 Grid 布局，实现更简洁维护。 浮动（float）和 …

clear属性用于控制元素两侧是否允许浮动元素，其常用值为left、right、both和none；设置clear:left可避开左侧浮动，clear:right避开右侧，clear:both同时清除两侧浮动，最常用；实际布局中推荐使用clear:both或clearfix伪元素方法，确保元素避开所…

通过::selection伪元素可自定义文本选中样式，支持color和background-color等属性，如设置白色文字蓝色背景；需注意兼容性可添加::-moz-selection前缀，且仅限特定CSS属性使用，避免影响可读性。 在网页中，当用户选中文本时，默认的选中样式通常是蓝色背景。通过 C…

利用CSS伪元素可高效创建提示图标，无需额外HTML。首先为容器设置relative定位，通过::before或::after添加content内容，结合position绝对定位将图标置于元素右上角；可使用文字或Font Awesome等字体图标（需指定font-family和Unicode），并用…

p::first-letter 可设置段落首字母样式，实现首字下沉或放大效果。通过 font-size、float 等属性使首字母变大并左浮动，结合 line-height 和 margin 优化布局，常用于提升文本美观性与可读性。 使用 CSS 的 ::first-letter 伪元素可以轻松为段…

高度塌陷由子元素脱离文档流导致，解决方法包括：1. 使用clearfix类通过伪元素清除浮动；2. 触发父元素BFC，如设置display: flow-root或overflow: hidden；3. 采用flex或grid布局，自动包裹子元素；4. 避免使用固定高度。推荐优先使用display: …

答案：通过CSS的:hover与::before可实现下划线伸缩等悬停效果，核心是用::before创建隐藏装饰元素，结合定位与transition实现平滑动画，如宽度展开、图标浮现，需注意父元素relative定位及content属性设置。 通过 CSS 的 :hover 与 ::before，可…

::after伪元素通过content属性在元素后插入装饰性内容，常用于添加图标、动画下划线、气泡三角等视觉效果，提升页面美观与可维护性。 在CSS中，::after 伪元素用于在选定元素的内容之后插入生成内容，常用于添加装饰性元素而不影响HTML结构。它本身不会创建真实的DOM节点，而是通过样式渲…

引入顺序影响同权重选择器的覆盖效果，但不改变优先级计算规则。特异性按(内联,id,class/伪类/属性,标签/伪元素)四维计算，如#nav .link为(0,1,1,0)；当特异性相同时，后引入的样式生效，如b.css覆盖a.css的同名规则；开发中应避免依赖引入顺序，推荐用高特异性选择器或BEM…

浮动布局通过float属性实现元素左或右排列，常用于图文混排与多列布局；需用clear属性、BFC或伪元素清除浮动，防止父容器塌陷，虽被Flexbox和Grid取代，但在旧项目和特定场景仍具实用价值。 浮动布局（Float Layout）是CSS中一种传统的网页布局方式，主要用于实现文本环绕图片、多…