弹性布局

答案：Flexbox与绝对定位结合可实现弹性布局中的精准局部控制。利用Flexbox构建整体结构，通过为Flex项目设置position: relative创建定位上下文，使内部绝对定位元素能精确叠加在特定位置，常用于卡片标签、关闭按钮等场景，需注意溢出、层叠上下文及响应式适配问题。 在CSS布局的…

使用Flexbox可轻松实现垂直列表居中对齐。将父容器设为display: flex并配合align-items: center或justify-content: center，即可在交叉轴或主轴上居中子元素；传统margin: auto在垂直方向无效因块级元素缺乏明确高度参考；替代方案包括Grid…

通过使用属性选择器、伪类和现代布局模型，可高效构建响应式图片画廊。首先利用[class^=”gallery-“]统一应用Flexbox布局，实现自动排列与间隙控制；再通过:nth-child(4n)清除每行末项边距，避免错位；结合[data-layout=”mas…

flex-wrap属性用于控制Flexbox子元素是否换行及方向，其值为nowrap（默认不换行）、wrap（允许换行，首行在上）和wrap-reverse（首行在下）；通过设置display: flex与flex-wrap: wrap可实现多行布局，适用于响应式卡片、标签组等场景；结合justif…

使用相对单位和媒体查询可实现响应式Grid间距。推荐用rem、em或%定义gap，结合auto-fit与minmax()弹性布局，小屏设0.5rem~1rem紧凑间距，大屏逐步增至1.5rem，避免内容挤压或留白过多，提升多设备可读性与视觉平衡。 在使用 CSS Grid 布局时，单元格之间的间距（…

使用媒体查询、相对单位和弹性布局可动态调整grid-gap。例如通过@media设置不同屏幕下的间距，用rem使间距随字体缩放，结合minmax与auto-fit实现自适应列数，提升响应式体验。 在响应式设计中，grid-gap 用于控制 CSS Grid 布局中行与列之间的间距。随着屏幕尺寸变化，…

响应式设计中文字溢出省略需结合CSS文本截断、弹性布局与媒体查询。1. 单行省略通过white-space:nowrap、overflow:hidden、text-overflow:ellipsis实现；2. 多行省略使用display:-webkit-box、-webkit-line-clamp限…

display属性决定元素布局方式，常用值包括：1. block用于独占一行的块级布局；2. inline实现文本内同行显示；3. inline-block兼具行内与块特性，可设宽高且同行排列；4. none使元素不渲染并脱离文档流；5. flex实现一维弹性布局，适用于导航与居中；6. grid支…

答案：CSS Flexbox通过设置display: flex启用，可灵活控制子元素排列、对齐与尺寸。使用flex-direction定义主轴方向，justify-content和align-items分别控制主轴与交叉轴对齐，flex-grow、flex-shrink和flex-basis调节项目…

flex-shrink是控制flex项目在空间不足时收缩比例的属性，默认值为1，表示等比缩小；设为0则不收缩。它适用于弹性盒子子元素，常用于避免文本溢出、固定侧边栏+自适应主内容等场景。例如导航栏中左侧logo区设flex-shrink:0保持原尺寸，右侧标题文字默认可缩，确保布局不被撑开。该属性仅…