伪元素

当使用 float 进行CSS布局时，浮动元素会脱离文档流，导致其父容器无法正确感知高度，从而发生父容器塌陷。为避免这一问题，有几种常用的清除浮动技巧。 1. 使用 clear 属性清除浮动 在浮动元素的末尾添加一个空元素，并设置 clear: both 来闭合浮动： HTML 示例： 左浮动 右浮…

使用 :first-letter 和 :first-line 可提升网页段落视觉效果。1. :first-letter 实现首字下沉，通过放大、浮动首字母并调整间距与颜色，模拟印刷品风格；2. :first-line 设置首行样式，常用于加粗或变色以增强开头吸引力；3. 组合使用两者可创造丰富层次，…

清除浮动的核心是恢复文档流秩序，常用方法包括伪元素clearfix、触发BFC（如overflow或display: flow-root）、父元素设高或浮动，以及现代布局Flexbox/Grid。其中，伪元素法兼容性好且无副作用，是最推荐的传统方案；display: flow-root语义明确但兼容…

CSS引入方式有内联、内部、外部和导入四种，优先级为内联 > 内部/外部（依顺序） > 默认样式；优先级规则按特殊性计算：!important > 内联 > ID > 类/属性/伪类 > 元素/伪元素 > 通配符，特殊性高者胜出，相同则后定义覆盖先定义。 C…

使用::-webkit-scrollbar可自定义滚动条样式，适用于WebKit浏览器，通过设置width、background等属性美化滚动条，结合类选择器限定作用范围，并注意Firefox兼容性处理。 自定义滚动条样式可以让网页看起来更美观，尤其在现代网页设计中越来越常见。CSS 提供了一些专有…

使用clearfix或display: flow-root可解决浮动导致的高度塌陷。clearfix通过伪元素清除浮动，兼容性好；display: flow-root触发BFC，现代浏览器推荐。 当容器内的子元素全部为浮动时，容器会因为失去正常文档流的支持而发生高度塌陷。解决这个问题的核心是让父容器…

可通过属性选择器、伪元素和结构选择器间接控制文本样式。例如，[title*=”错误”]匹配含“错误”的title属性，.warning::before插入警告图标，p:first-of-type定位首个段落，结合text-overflow实现文本省略，从而在限制下实现文本相关…

清除浮动影响的方法包括：使用clear属性、伪元素清除法（推荐）、overflow触发BFC，以及采用Flexbox或Grid现代布局。最常用的是为父容器添加clearfix类，通过::after伪元素实现清除；新项目建议使用Flex或Grid布局以避免浮动问题。 当元素使用了 float 属性（如…

使用-webkit-line-clamp可实现多行文本溢出省略，需配合display:-webkit-box、-webkit-box-orient:vertical、overflow:hidden和text-overflow:ellipsis使用，适用于现代主流浏览器，但不支持IE及部分老版本浏览器…

清除浮动可解决父元素高度塌陷问题，常用方法有：添加空元素并设置clear: both；父容器设overflow: hidden触发BFC；推荐使用伪元素after结合clear: both，兼容且不污染结构。 当使用 CSS 的浮动（float）进行布局时，父元素常常无法正确包裹住浮动的子元素，导致…