树码科技 | 技术博客

学习目标 理解 Z-index 在网页布局中的作用及其在三维空间中的堆叠顺序概念 掌握 Tailwind CSS 中 z-0 到 z-50 等常用层级工具类的使用方法 学会通过相对定位（relative）与 Z-index 配合解决元素遮挡问题 能够根据实际项目需求选择合适的层级值，避免层级冲突 了

学习目标 理解 visibility 属性与 display 属性的核心区别 掌握 invisible 和 visible 两个工具类的用法及场景 学会在需要保留页面布局结构但暂时隐藏内容时使用正确的工具类 能够识别何时使用 invisible 而非 hidden（display: none） 什么

学习目标 理解 top、right、bottom、left 及 inset 类在 Tailwind CSS 中的作用机制 掌握这些属性必须配合定位属性（如 relative、absolute、fixed）使用的核心原则 学会使用 inset 简写类快速控制元素在四个方向上的偏移 能够利用这些工具类实

学习目标 理解 Tailwind CSS 中 position 相关类与原生 CSS position 属性的对应关系 掌握 static、relative、absolute、fixed、sticky 五种定位模式的核心区别 学会利用定位属性构建复杂的页面布局（如悬浮导航、模态框、吸顶标题） 理解包

学习目标 理解 CSS overflow 属性的核心机制及其在内容布局中的关键作用 掌握 Tailwind CSS 中 overflow-auto, overflow-hidden, overflow-scroll, overflow-visible 等基础类的用法 学会独立控制水平（X 轴）和垂直

学习目标 理解 CSS object-position 属性的作用及其在 Tailwind CSS 中的映射机制 掌握 9 种常用的对象定位类（如 object-center, object-top-left 等）的具体用法 学会结合 object-fit 和容器尺寸控制，实现完美的图片/视频裁剪与

学习目标 理解 CSS clear 属性的核心作用及其在 Tailwind CSS 中的映射关系 掌握 clear-left、clear-right、clear-both 和 clear-none 四个实用类的具体应用场景 学会利用 Clear 类解决浮动元素导致的布局塌陷或内容环绕问题 能够独立编

学习目标 理解 Tailwind CSS 中 object-fit 工具类的核心作用及其与原生 CSS 的对应关系。 掌握五种主要适配模式（contain, cover, fill, none, scale-down）的具体行为差异。 学会在不同布局场景下选择最合适的图片适配策略，避免图片变形或裁剪

学习目标 理解 Tailwind CSS 中 float 工具类的作用及其与传统 CSS float 属性的对应关系 掌握 float-right、float-left 和 float-none 三个核心类的用法与应用场景 学会通过浮动布局实现图文混排效果，并了解其在现代布局中的局限性 能够识别并修

学习目标 理解 Tailwind CSS 中 display 工具类的核心作用及其与原生 CSS 的对应关系 掌握常用显示模式（block, inline, inline-block, flex, grid）的区别与应用场景 学会使用表格相关显示类构建复杂的表格布局 能够根据页面布局需求灵活选择正确