定位、Flex 与 Grid 布局
HTML、CSS 与 JavaScript 基础#Python全栈#第七阶段#HTML、CSS 与 JavaScript 基础#定位、Flex 与 Grid 布局约 645 字 · 2 分钟阅读
追问显示点击任意追问卡片可收起 / 展开
普通文档流与定位布局是什么关系？
追问 使用绝对定位后，其他元素为什么可能不为它预留空间？
relative、absolute、fixed 与 sticky 各适合什么场景？
追问 定位参照与滚动容器如何影响结果？为什么 sticky 有时看起来没有生效？
z-index 为什么不是设得越大就一定越靠前？
追问 层叠上下文怎样限制比较范围？如何排查下拉菜单被相邻区域遮挡的问题？
Flex 的主轴与交叉轴如何确定？
追问 改变
flex-direction 后，justify-content 与 align-items 的作用方向如何变化？flex-grow、flex-shrink 与 flex-basis 分别影响什么？
追问 容器剩余空间为正或为负时如何分配？为什么相同 shrink 值不一定缩小相同像素？
Flex 子项为什么有时无法缩到容器内？
追问 长文本与自动最小尺寸怎样影响布局？何时需要检查
min-width、换行或溢出策略？如何用 Flex 实现可换行的卡片列表和统一间距？
追问 卡片基础宽度、
flex-wrap 与 gap 怎样配合？最后一行是否应自动拉伸？Grid 与 Flex 的布局思路有什么区别？
追问 二维卡片网格和单行工具栏分别如何选择？二者是否可以嵌套使用？
Grid 的轨道、网格线与单元格分别是什么？
追问 如何设置列宽和跨列元素？内容最小宽度怎样影响
fr 轨道的实际表现？怎样实现“页头、侧栏、主内容、页脚”的页面布局？
追问 桌面端与窄屏端怎样调整结构？为什么不宜依赖大量固定坐标？
核对资料： W3C CSS Flexbox 规范。