css布局

粘性定位通过设置position: sticky和偏移量实现元素在滚动时的吸附效果，常用于导航栏和表格表头。必须指定top、bottom等偏移值，且父容器不能有overflow: hidden，否则失效。典型应用包括顶部导航固定（top: 0）、表头跟随滚动及多层级sticky布局，通过z-inde…

使用百分比、vw、Flexbox和Grid等响应式技术可实现容器宽度自适应屏幕变化。通过设置width: 90%或width: 100vw配合max-width限制，使容器随视口调整；利用Flexbox的flex: 1或Grid的repeat(auto-fit, minmax(250px, 1fr)…

justify-items控制网格项在行内轴（水平）的对齐，align-items控制块轴（垂直）对齐，两者分别处理横向和纵向布局。 justify-items 和 align-items 是 CSS Grid 布局中的两个对齐属性，用于控制网格容器中子元素（网格项）在不同轴上的对齐方式。虽然名称相…

grid-auto-flow用于控制未定位网格项的排列方式，默认按行填充，可设为按列或启用稠密模式填补空隙。其值包括row、column、row dense和column dense，适用于不同布局场景。例如，grid-auto-flow: column实现垂直流布局，适合时间轴或导航面板；dens…

浮动元素会脱离文档流并影响盒模型布局，其边框计入总尺寸可能导致换行或溢出；使用box-sizing:border-box可统一尺寸计算，配合clearfix解决高度塌陷，现代布局推荐Flexbox或Grid以避免传统问题。 浮动元素在CSS布局中曾广泛用于多列排版，而盒模型决定了元素的尺寸与边距计算…

掌握CSS盒模型是理解网页布局的基础，其由content、padding、border、margin四层构成，默认content-box下width仅含内容，推荐使用border-box以包含padding和border，避免布局溢出，该模型影响margin折叠、inline元素对齐及浮动定位等行为…

flex-wrap控制换行方向，flex-flow是flex-direction与flex-wrap的简写。flex-wrap有nowrap、wrap、wrap-reverse三个值，决定子元素是否换行及换行方向；flex-flow可同时设置主轴方向和换行行为，如row wrap或column wr…

绝对定位子元素不受父级浮动影响，需为父级设置position: relative才能使其成为定位参照，否则将相对于视口定位。 当在CSS布局中同时使用浮动（float）和绝对定位（position: absolute）时，需要理解它们的行为差异以及如何相互影响。虽然两者都可以用来控制元素的位置，但结…

合理搭配CSS的border与padding可提升布局稳定性与视觉层次，需统一box-sizing为border-box以准确控制尺寸，在按钮和卡片中结合内边距与边框增强可读性与交互体验，避免溢出问题，并通过响应式单位如rem或媒体查询适配多端显示效果。 在CSS布局中，边框（border）与内边距…

响应式设计需结合媒体查询与流式布局，通过断点适配不同设备，使用百分比、flex和grid实现弹性布局，并优化移动端体验。 响应式设计是现代网页开发的核心要求。要在CSS项目中实现良好的响应式效果，关键在于灵活运用媒体查询（Media Queries）和流式布局（Fluid Layouts）。这两者结…