overflow

外边距合并是指两个垂直相邻的块级元素的外边距会合并为一个外边距，其大小取两者中的较大值。该现象常见于兄弟元素、父子元素及空元素自身上下边距之间，如两个div的上下margin分别为20px和30px时，实际间距为30px而非50px；可通过添加border、padding，触发BFC（如overfl…

浮动未清除会导致父容器高度塌陷、后续元素错位等问题，正确做法是使用伪元素clearfix或触发BFC；排查时需检查类名遗漏、样式覆盖及宽度溢出，并借助开发者工具验证布局。 浮动（float）曾是网页布局的重要手段，但使用不当容易引发容器高度塌陷、元素错位等问题。虽然现代布局更多依赖 Flexbox …

通过CSS动画与背景图片结合可实现动态视觉效果，利用background-size和background-position控制渐变移动，或多层背景叠加错位动画，配合伪元素opacity变化模拟图片淡入淡出切换，最终在无JavaScript情况下完成专业级动效。 在现代网页设计中，CSS动画与背景图片…

答案：实现响应式弹出框动画需结合transition、opacity、transform和@media query。首先构建含遮罩层与内容区的HTML结构，用CSS设置初始隐藏及居中样式，并通过transition定义opacity淡入淡出与transform缩放动画；添加active类触发视觉变化…

使用 transform 和 transition 实现 Flexbox 子元素高性能动画，避免修改 layout 属性，结合 flex、opacity 和 max-width 控制布局与视觉效果，保持排列稳定。 在使用 Flexbox 布局时，若想对子元素实现平滑的动画效果（如缩放、位移或尺寸变化…

答案：通过float实现导航栏左右布局，Logo左浮、菜单右浮，配合清除浮动和响应式调整。使用float:left和float:right分离元素，父容器触发BFC或伪元素clear:both防止塌陷，导航项用inline-block排列，移动端取消浮动改为垂直堆叠，兼顾兼容性与响应式需求。 在CS…

使用float属性可实现侧边栏与主内容并排布局，通过HTML结构与CSS样式设置完成基础排版，.sidebar设为左浮动，.content用margin留出间距；为提升可读性，优化字体大小、行高、最大宽度及留白；响应式设计通过媒体查询在小屏下取消浮动，改为上下排列；同时需处理浮动导致的父容器塌陷问题…

sticky定位结合relative与fixed特性，元素在滚动至特定阈值时固定于视口。需设置top等偏移量，且父容器无overflow:hidden限制，常用于导航栏、表格头悬浮效果。 sticky定位是CSS中一种特殊的定位方式，它结合了relative和fixed定位的特点。元素在正常文档流中…

min-height设置元素内容区最小高度，结合box-sizing:border-box和padding可实现自适应布局，避免溢出需检查父级约束，在响应式中推荐使用vh单位与媒体查询优化显示效果。 在CSS中，min-height 用于设置一个元素的最小高度，确保内容即使很少也能撑开到指定高度，同…

通过position: relative与position: absolute配合，可精准定位卡片内的角标、遮罩等元素。首先设置.card为relative以创建定位上下文，再将.badge或.overlay设为absolute，使其相对于卡片定位；利用top、right等属性精确控制位置，实现右上…