overflow

通过伪元素与选择器结合，可在不增加HTML标签的情况下实现动态装饰效果。利用::before和::after插入内容，配合属性选择器为不同链接添加图标，使用状态选择器触发悬停动画，结合嵌套选择器精确控制首字母下沉等样式，提升视觉表现力与用户体验。 在现代网页设计中，CSS的伪元素与选择器结合使用，能…

使用CSS Grid的auto-fit与minmax结合实现响应式卡片布局，容器通过display: grid和repeat(auto-fit, minmax(250px, 1fr))自动调整列数，小屏用media query设1fr单列，中屏增大最小宽度至300px，大屏限制max-width居中…

使用 position: sticky 实现固定导航栏，通过 JavaScript 监听 scroll 事件，当页面滚动距离大于 0 时为导航栏添加 scrolled 类，结合 CSS 过渡效果动态显示 box-shadow，提升视觉层次与用户体验。 实现一个带有滚动效果的导航栏（Sticky He…

不能直接用 height + transition 是因为 height: auto 无法参与动画计算，导致过渡失效。解决方案是使用 max-height 配合 overflow: hidden 实现展开收起效果：初始状态设 max-height: 0，展开时设为足够大的值（如 500px），并通过…

overflow属性控制内容溢出行为，hidden隐藏溢出内容并可清除浮动，scroll始终显示滚动条确保交互一致，auto按需智能显示滚动条节省空间，应根据布局与用户体验需求选择适用场景。 当容器内的内容超出其设定的宽度或高度时，CSS中的 overflow 属性就变得非常关键。它决定了溢出内容的…

Flexbox 能更高效地替代 float 实现布局，因其专为布局设计，支持对齐、伸缩和响应式，而 float 存在塌陷、居中难等问题；通过将容器设为 display: flex，并用 flex 属性替代 width 与 float，可简洁实现多列、侧边栏、居中等效果，且避免混合使用 float，以…

使用 position: sticky 结合 Flexbox 和 CSS Grid 可实现响应式固定导航栏。首先通过 position: sticky + top: 0 使导航栏滚动时吸附顶部，z-index 确保层级优先；接着用 Flexbox 布局实现桌面端 Logo 左对齐、导航链接居中、菜单…

使用float属性可实现图文环绕，通过设置float和margin控制布局与间距。例如img{float:left;margin-right:15px;margin-bottom:10px;}使文本环绕图片并保持适当距离。需注意父容器包裹浮动元素，可用overflow:hidden触发BFC，避免高…

合理使用CSS的width、height和max-width属性，结合盒模型原理，可有效控制图片尺寸与响应式表现。首先设置width或height调整内容区域大小，配合height:auto保持宽高比，避免失真；通过max-width:100%确保图片在小屏幕不溢出容器，实现自适应显示；同时利用bo…

使用clearfix结合伪元素可解决浮动导致的父容器塌陷问题，通过为父元素添加包含display: table和clear: both的::before与::after伪元素，触发BFC并清除浮动，保证布局正常。 在使用 CSS 浮动布局时，父容器无法自动包含其内部浮动元素，导致布局错乱。为解决这一…