overflow

模态框由遮罩层和弹窗组成，通过CSS的flex布局实现居中，使用display控制显隐；2. 遮罩层覆盖全屏并置于底层，弹窗通过z-index浮于上方；3. JavaScript可触发显示或关闭，支持点击遮罩、按钮或ESC键关闭；4. 可添加过渡动画、背景滚动禁用等优化提升体验。 实现一个简易模态框…

overflow: hidden触发BFC，使父容器包裹浮动子元素，解决高度塌陷；2. 结合float实现两栏自适应布局，兼容性好；3. 兼具隐藏溢出与清除浮动效果，适用于旧式布局，但现代推荐使用Flex或Grid。 浮动元素常导致父容器高度塌陷，而 overflow: hidden 能触发BFC（…

使用float属性可实现元素左右浮动，常用于图文环绕或布局。设置float:left或right使元素左或右对齐，但会脱离文档流导致父容器塌陷，需通过clear:both、overflow:hidden或伪元素::after清除浮动。现代布局推荐使用Flexbox或Grid，但float在简单对齐和…

图片缩放通过transform: scale()与transition结合实现，鼠标悬停时平滑放大；设置transform-origin、固定容器尺寸、提升z-index可优化体验；结合卡片容器并添加阴影变化，使用cubic-bezier调整缓动，能增强交互质感。 图片缩放效果在网页设计中很常见，比…

浮动元素宽高由内容决定，未设尺寸时收缩包裹内容，父容器易高度塌陷；需用clearfix或BFC解决；margin不合并但需防溢出；混用布局时易错位，现代开发推荐Flex或Grid替代。 浮动元素的宽高计算在CSS布局中容易引发意料之外的结果，尤其在未明确设置尺寸或与其他布局方式混用时。掌握其行为特点…

使用 position: sticky 可实现表头吸顶，需设置 thead 中的 tr 或 th 的 top 值，确保父容器无 overflow: hidden，配合 z-index 和背景色保证视觉效果。 要实现表头吸顶效果，可以使用 CSS 的 position: sticky 属性。它能让元素…

margin collapse 是指相邻块级元素的垂直外边距合并为较大者，影响多行文本间距。多行文本常由多个块级元素（如 p 标签）构成，这些元素间的 margin 会合并，导致段落间实际间距小于预期。例如，默认上下 margin 均为 1em 的段落，相邻时仅产生 1em 间距。此外，首段与容器顶…

overflow属性可清除浮动、控制弹性与网格布局溢出、隐藏滚动条。通过触发BFC包裹浮动元素，结合text-overflow实现省略号，设置min-width:0使flex项目收缩，grid中独立滚动，及伪元素或::-webkit-scrollbar隐藏滚动条，提升布局控制力。 在CSS布局中，o…

核心思路是利用CSS浮动使图片列容器自动换行形成瀑布流。通过设置.item向左浮动、固定宽度及外边距，配合overflow:hidden解决父容器高度塌陷，再用min-width限制列宽，结合不同图片尺寸增强错落感，实现兼容老浏览器的简易瀑布流布局。 用CSS浮动实现图片瀑布流效果，核心思路是将每张…

使用Flexbox和CSS Grid结合媒体查询可高效优化移动端菜单布局，通过响应式排列、折叠展开交互及触摸体验增强，提升小屏设备的易用性与美观性。 移动端菜单优化中，CSS布局起到了关键作用。随着移动设备的普及，用户对网页操作的便捷性和视觉体验要求越来越高，合理的CSS布局能让菜单在小屏幕上依然清…