overf

CSS文本换行通过white-space、word-break、overflow-wrap和hyphens属性协同控制，white-space处理空白符和换行行为，word-break强制字符级断行，overflow-wrap在溢出时才断词，hyphens添加连字符提升美观；应对长单词溢出，优先用o…

CSS文本对齐方式有left、right、center、justify、start、end，通过text-align属性设置；换行由word-wrap、word-break和white-space控制，应对长单词可用break-word或break-all，响应式中结合媒体查询与相对单位优化显示。 …

使用overflow-wrap: break-word可防止长单词或URL溢出容器，仅在必要时断行，避免布局破坏，兼容性良好，常用于处理长URL、长单词及移动端适配，结合hyphens等属性可优化显示效果。 控制长单词或URL地址在容器边界内的换行行为。 解决方案 overflow-wrap 属性允…

答案：CSS通过text-indent控制段落首行缩进，常用值包括px、em、rem和百分比，其中em和rem更利于响应式设计；结合媒体查询可实现不同设备下的自适应缩进；影响段落排版与换行的其他关键属性有line-height、white-space、word-break、text-align和ma…

gap负责容器内部统一间距，margin处理外部或特定间距，两者互补。在Flexbox和Grid中，gap避免边缘多余空白、简化代码、适应布局方向变化，优于margin；结合使用时，gap提升内部布局简洁性，margin灵活控制组件间宏观距离，响应式下更易维护与调整。 CSS gap 和 margi…

答案：通过flex-grow、flex-shrink和flex-basis控制子元素的伸缩行为，其中flex-grow分配多余空间，flex-shrink处理空间不足，flex-basis设定初始尺寸，三者可简写为flex属性，如flex: 1等同于flex: 1 1 0%，常用于实现等分布局或响应…

CSS animation 比 transition 更适合复杂动画，通过 @keyframes 定义多步关键帧，实现背景色、缩放、阴影等属性的精细控制，配合 ease-out 缓动和 forwards 填充模式，使悬停动画流畅自然；结合伪元素与 transform 可创造滑入、浮动等创意效果，但需…

浮动布局源于文本环绕图片的需求，后被用于多列布局但存在高度塌陷、清除浮动等维护难题；2. 弹性盒子（Flexbox）是专为一维布局设计的现代方案，通过父容器控制子元素排列、对齐与伸缩，逻辑清晰且响应式友好；3. Flexbox在响应式设计中优势显著，支持自动换行、空间分配和顺序调整，避免媒体查询冗余…

固定侧边栏可通过position: fixed实现始终可见，但需处理遮挡问题；限制固定范围可用JavaScript监听滚动动态切换class实现仿“吸顶”效果；内容较多时推荐设置固定容器并启用内部滚动；现代方案可使用position: sticky结合容器查询，更自然且不脱离文档流，提升可访问性。 …

不能直接用 height + transition 实现折叠动画，因 auto 无法参与数值插值。解决方案是通过 max-height（如 0 到 200px）结合 overflow: hidden 和 transition 模拟展开收起效果，确保动画流畅且兼容性好。 在CSS中实现导航菜单的折叠过…