overflow

CSS混合模式通过mix-blend-mode和background-blend-mode实现元素间或背景图层间的颜色融合，前者用于元素内容与下层元素的混合，如文字与背景图叠加；后者用于同一元素多背景图之间的混合，如纹理与渐变融合。常用模式包括normal、multiply、screen、overl…

overflow-x和overflow-y分别控制盒子内容横向与纵向溢出行为，常用值为visible、hidden、scroll、auto；固定高度文本容器推荐overflow-y:auto，横向长内容使用overflow-x:auto，避免冗余滚动条可设overflow-x:hidden，全向滚动…

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

使用Flexbox布局使容器垂直排列，页眉固定高度，内容区域flex:1占满剩余空间；2. 通过position: sticky结合top:0实现页眉滚动时固定；3. 添加padding-top避免内容被遮挡，设置z-index防止层级覆盖，确保父容器无overflow:hidden以保证stick…

清除浮动影响的方法包括：使用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）进行布局时，父元素常常无法正确包裹住浮动的子元素，导致…

使用伪类clearfix或overflow属性可解决浮动导致的父容器背景显示异常，推荐通过正确清除浮动使父容器包含子元素，或将背景色设于外层容器；更优方案是采用Flex或Grid布局，避免浮动带来的高度塌陷问题，提升背景样式控制的稳定性和布局语义化。 当使用CSS浮动（float）布局时，经常会遇到…

sticky定位结合相对与固定定位，元素滚动到阈值后固定在视口；常用于导航栏、表格表头、标签页及侧边目录，提升用户体验，但需避免父容器设置overflow:hidden或transform导致失效。 Sticky 定位（position: sticky）是 CSS 中一种特殊的定位方式，结合了相对定…

浮动可用于实现横向导航菜单，通过给li元素设置float: left使其并排显示，需清除浮动避免布局塌陷，常配合overflow: hidden处理，适用于旧项目维护或简单布局。 浮动（float）在早期网页布局中被广泛使用，虽然现在更推荐使用 Flexbox 或 Grid 布局，但在一些旧项目或简…