overflow

相邻块级元素垂直margin会合并取较大值，如兄弟元素、空元素自身margin及父子无分隔时；设置border、padding、BFC、flex/grid布局等可阻止合并。 在CSS中，盒模型的外边距（margin）合并（Margin Collapse）是一个常见的布局现象，主要发生在块级元素的垂直…

overflow与position结合使用时需注意裁剪和定位规则：1. overflow:hidden会裁剪absolute元素，影响下拉菜单显示；2. overflow:clip限制fixed元素范围，使其相对祖先而非视口定位；3. absolute容器可通过overflow-y:auto实现内部…

推荐使用Flex布局实现两栏，代码简洁且易维护；2. Grid适合复杂或未来项目，一行定义列宽；3. Float为传统方法，兼容老浏览器但需清除浮动。 实现两栏布局在CSS中有多种方式，以下是几种简单且常用的方法，适合不同场景快速上手。 1. 使用 float 布局（传统方法） 通过浮动让两个元素并…

box-shadow是CSS中用于添加阴影的属性，它渲染在border box外但不影响布局，不改变元素尺寸或位置，也不参与盒模型计算，仅作为视觉效果存在。 box-shadow 不会影响 CSS 盒模型中盒子的布局大小。 box-shadow 是什么 box-shadow 用于给元素添加阴影效果，…

使用 Grid 布局结合 repeat(auto-fill, minmax()) 可实现响应式网格，根据屏幕尺寸自动调整列数并均匀分布子元素；.container 设置 display: grid 和 grid-template-columns: repeat(auto-fill, minmax(2…

height: auto 由内容决定高度，适合弹性布局；固定高度强制设定尺寸，需处理溢出。前者自适应内容变化，后者用于结构固定区域。 在CSS中，height: auto 和 固定高度（如 height: 200px）最根本的区别在于元素高度如何被计算和表现。它们影响布局、内容适应性和响应式行为。 …

overflow属性用于控制内容溢出容器的行为，其常用取值包括visible、hidden、scroll和auto，可分别处理溢出显示、裁剪或滚动需求；通过overflow-x和overflow-y可独立控制水平与垂直方向的溢出行为，适用于文本区域、弹窗、轮播图等场景；实际应用中应根据内容特性选择合…

overflow: hidden用于裁剪溢出内容、清除浮动和实现图像裁剪，而overflow: scroll则始终显示滚动条以确保可滚动区域、防止页面跳动并创建独立滚动区域，应根据内容可见性需求选择，推荐在需要时用auto替代scroll以提升体验。 在CSS盒模型中，overflow 属性用于控制…

sticky定位是relative与fixed的结合，元素在滚动到设定阈值（如top:0）时固定于视口，常用于侧边栏或表头；在flex布局中，sticky子项可保持弹性容器结构的同时实现局部吸顶效果，例如两栏布局中侧边栏随滚动固定，需注意父容器避免overflow:hidden并确保足够滚动高度，且…

使用CSS浮动可实现响应式卡片布局，通过float、width和媒体查询控制排列；设置card-container容器并用伪元素清除浮动，避免塌陷；为适配不同屏幕，桌面端三列（width:30%）、平板二列（width:46%）、手机单列（width:96%, float:none）；需注意卡片高度…