对于一个网页来说首要要解决：
- 最大宽度: max-w-7xl
- 水平居中：mx-auto
各个区块的垂直边距:
- mt 上边距
- mb 下边距
devtools 探查标记，很容易发现当前元素宽度为选中的浅蓝色、内边距为浅绿色、外边距为浅橙色。
响应式最大宽度
- max-w-screen-sm 640px
- max-w-screen-md 768px
- max-w-screen-lg 1024px
- max-w-screen-xl 1280px = max-w-7xl
- max-w-screen-2xl 1536px
以下是 Tailwind CSS 默认的最大宽度比例尺（theme.maxWidth）的部分值，供参考：
- max-w-xs: 20rem (320px)
- max-w-sm: 24rem (384px)
- max-w-md: 28rem (448px)
- max-w-lg: 32rem (512px)
- max-w-xl: 36rem (576px)
- max-w-2xl: 42rem (672px)
- max-w-3xl: 48rem (768px)
- max-w-4xl: 56rem (896px)
- max-w-5xl: 64rem (1024px)
- max-w-6xl: 72rem (1152px)
- max-w-7xl: 80rem (1280px)
- max-w-full: 100%
- max-w-screen-sm: 640px（引用 screens.sm）
- max-w-screen-md: 768px
- max-w-screen-lg: 1024px
- max-w-screen-xl: 1280px
- max-w-screen-2xl: 1536px
当你又一个父区块，里面放着两个子区块，想让其一个在左，一个在右时
在中等及以上屏幕尺寸（宽度 ≥ 768px）时，md:flex-row 将子元素的排列方式改为水平排列，并且使用了 md:justify-between，使得子元素在水平方向上分散，分别对齐到容器的左右两端。因此，justify-between 会把第一个子元素推到左边，第二个子元素推到右边。
简单来说，md:flex-row 使元素水平排列，md:justify-between 会将它们分开，分别放到容器的两侧，这就是为什么你看到一个元素在左侧，另一个在右侧。
但右侧的子内容又希望他右对齐时，还需要为右侧的父容器添加 justify-end。
当 devtools 指向网页元素时，显示的元素宽度是带内边距的？
是的，当 DevTools（开发者工具）指向网页元素时，默认显示的元素宽度通常是包含内边距（padding）的，即显示的是 “元素的总宽度”。
具体来说：
- 内容区域（content box）：这是元素实际的内容区域，不包括边框、内边距或外边距。
- 内边距（padding）：内边距会在内容区域的外部增加空间，但不影响内容本身的大小。它会被包括在计算宽度和高度时。
- 边框（border）：边框也会增加在元素的内容和内边距外，属于元素的 “总尺寸” 部分。
- 外边距（margin）：外边距位于元素的外围，不会影响元素的实际大小，但会影响元素在页面上的位置。
DevTools 显示的宽度
在 Chrome DevTools 或其他浏览器的开发者工具中，当你选择一个元素时，通常会看到以下几种尺寸信息：
- Content：内容区域的宽度。
- Padding：内边距的宽度。
- Border：边框的宽度。
- Margin：外边距的宽度。
在 元素（Elements）面板 中，浏览器通常会显示的是 "元素的总宽度"，即 内容宽度 + 左右内边距 + 左右边框。
例如，如果你的一个 div 元素的宽度设置为 300px，内边距为 20px，边框为 5px，那么 DevTools 中显示的宽度通常是 300px（内容宽度） + 20px（左内边距） + 20px（右内边距） + 10px（左边框） + 10px（右边框） = 360px。
如何查看不同部分的尺寸？
如果你希望查看 仅内容的宽度（不包括内边距、边框和外边距），你可以启用 box-sizing: content-box，这会让宽度和高度只考虑内容区域的尺寸，不包括内边距和边框。
反之，使用 box-sizing: border-box 时，元素的宽度和高度会包括内边距和边框，通常是开发中更常见的做法，因为它让布局更加易于控制。
总结：
- 默认情况下，浏览器 DevTools 显示的是 带内边距和边框的元素总宽度。
- 如果你希望看到内容区域的宽度，可以通过
box-sizing属性来调整元素的盒模型行为。
查看鼠标在元素上浮动时的计算后样式
在 Chrome DevTools 中，当你将鼠标悬停在某个元素上时，浏览器会实时显示该元素的样式变化，包括悬停状态（hover）下的计算样式。如果你想保存这些计算后的属性（比如悬停状态下的宽度、颜色等），你有几个选择：
1. 使用 DevTools 的 "Computed" 面板保存计算后的样式
当你选中一个元素并查看其 "Computed" 面板时，它会显示当前元素的所有计算样式，包括鼠标悬停时的样式。
步骤：
- 打开 DevTools：右键点击网页，选择 “检查”（或按 F12）打开 DevTools。
- 选择元素：点击左上角的元素选择工具（或按
Ctrl+Shift+C），然后点击你想要查看的元素。 - 查看计算样式：
- 在 Elements 面板中，选择你想要查看的元素。
- 切换到 "Computed" 面板，它会显示所有计算后的样式。
- 模拟悬停状态：
- 在 Elements 面板中，右击选中的元素，选择 “Force state”（强制状态） > “:hover”。
- 这样，DevTools 会强制该元素处于悬停状态，并显示悬停状态下的样式。
- 复制样式：你可以手动复制计算出的样式（右键点击并选择复制，或者直接手动复制到你的代码中）。但是 DevTools 并没有提供一键保存计算样式的功能，你需要复制这些信息。
2. 保存悬停状态的样式为文件
如果你希望将元素的计算样式保存到本地文件中，你可以使用以下方式：
方法 1: 从 DevTools 复制计算后的样式到外部文件
- 在 "Computed" 面板中，右键点击你感兴趣的计算属性（例如
width,height,color），选择 "Copy rule"。 - 将复制的样式粘贴到你喜欢的文本编辑器中，保存为
.css文件。
方法 2: 使用 console 打印计算的样式
你也可以通过 JavaScript 在 DevTools 的 Console 中打印出计算的样式，并将其保存为文件。
- 在 Console 面板中输入以下代码来获取计算后的样式：
const element = document.querySelector('你的元素选择器'); const styles = window.getComputedStyle(element); console.log(styles);例如，如果你想查看悬停状态下的样式，可以首先强制元素悬停（通过 "Force state" 选择
:hover），然后执行此脚本。 - 这将在 Console 中输出该元素的所有计算样式，你可以将它们手动复制到文件中。
3. 使用屏幕录制或截图工具保存样式
如果你只是想保存元素的状态（比如包括样式变化），也可以考虑使用截图工具或者屏幕录制来捕捉 DevTools 中的元素显示和样式。
总结
- "Computed" 面板：可以查看并复制计算后的样式。
- "Force state"：可以强制将元素设置为
:hover或其他状态，查看样式变化。 - Console：通过 JavaScript 获取并输出计算样式，方便查看和保存。
虽然 DevTools 没有直接提供保存悬停状态的样式到文件的功能，但通过上述方法，你可以轻松获取并保存你所需要的样式。
<!-- 页眉部分，设置全宽、堆叠顺序，并启用平滑过渡效果 -->
<header class="w-full z-30 transition-all duration-300 ease-in-out">
<!-- w-full: 宽度占满父容器 -->
<!-- z-30: 设置 z-index 为 30，确保页眉在其他元素之上 -->
<!-- transition-all: 为所有 CSS 属性启用过渡效果 -->
<!-- duration-300: 过渡持续 300 毫秒 -->
<!-- ease-in-out: 过渡速度曲线为缓入缓出 -->
<!-- 内容容器，设置最大宽度、水平居中，并添加内边距 -->
<div class="max-w-7xl mx-auto p-4 sm:px-6">
<!-- max-w-7xl: 最大宽度为 1280px（Tailwind 默认值），限制内容宽度 -->
<!-- mx-auto: 左右外边距自动，水平居中 -->
<!-- p-4: 所有方向内边距为 1rem（16px） -->
<!-- sm:px-6: 小屏幕（≥640px）时，水平内边距为 1.5rem（24px） -->
<!-- Flex 容器，包含页眉内容，垂直居中，子元素两端对齐，响应式高度 -->
<div class="flex items-center justify-between h-16 md:h-20">
<!-- flex: 设置为 Flexbox 容器 -->
<!-- items-center: 子元素垂直居中对齐 -->
<!-- justify-between: 子元素水平两端对齐 -->
<!-- h-16: 高度为 4rem（64px） -->
<!-- md:h-20: 中等屏幕（≥768px）时，高度为 5rem（80px） -->
<!-- Logo 部分的 Flex 容器，垂直居中 -->
<div class="flex items-center">
<!-- flex: 设置为 Flexbox 容器 -->
<!-- items-center: 子元素垂直居中对齐 -->
<!-- Logo 链接，禁止缩小，带右边距，支持悬停效果 -->
<a class="shrink-0 mr-4 relative group" href="/">
<!-- shrink-0: 防止在 Flex 容器中缩小，确保 Logo 尺寸不变 -->
<!-- mr-4: 右外边距为 1rem（16px） -->
<!-- relative: 设置相对定位，为伪元素提供定位上下文 -->
<!-- group: 启用 group-* 类，控制子元素的悬停样式 -->
<!-- Logo 图片，带响应式加载和定位 -->
<img
alt="商标"
loading="lazy" <!-- 延迟加载图片 -->
width="260"
height="200"
decoding="async" <!-- 异步解码图片 -->
data-nimg="1"
class="relative" <!-- 相对定位，相对于父容器 -->
srcset="
/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogonew-black.27e79e1b.png&w=384&q=75 1x,
/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogonew-black.27e79e1b.png&w=640&q=75 2x
" <!-- 响应式图片源 -->
src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogonew-black.27e79e1b.png&w=640&q=75"
style="color: transparent" <!-- 图片加载失败时隐藏 alt 文本颜色 -->
_mstalt="44941"
_msthash="1072" <!-- Microsoft Translator 添加的翻译相关属性 -->
/>
</a>
</div>
<!-- 导航栏，小屏幕隐藏，中等屏幕及以上显示为 Flex 容器并占据剩余空间 -->
<nav class="hidden md:flex md:grow">
<!-- hidden: 默认隐藏元素 -->
<!-- md:flex: 中等屏幕（≥768px）时显示为 Flex 容器 -->
<!-- md:grow: 中等屏幕时占据剩余可用空间 -->
<!-- 导航项的无序列表，Flex 布局，支持换行，右对齐，垂直居中 -->
<ul class="flex grow justify-end flex-wrap items-center">
<!-- flex: 设置为 Flex 容器 -->
<!-- grow: 占据剩余可用空间 -->
<!-- justify-end: 子元素靠右对齐 -->
<!-- flex-wrap: 空间不足时允许换行 -->
<!-- items-center: 子元素垂直居中 -->
<!-- 下拉菜单的列表项 -->
<li class="relative">
<!-- relative: 相对定位，为伪元素或下拉内容提供定位上下文 -->
<!-- 下拉按钮，粗体文本，悬停变色，平滑过渡 -->
<button
class="font-bold text-slate-800 hover:text-orange-600 px-5 py-3 flex items-center transition duration-150 ease-in-out relative group"
aria-expanded="false" <!-- 指示下拉菜单未展开，供屏幕阅读器使用 -->
>
<!-- font-bold: 字体加粗 -->
<!-- text-slate-800: 文本颜色为深灰 -->
<!-- hover:text-orange-600: 悬停时文本变为橙色 -->
<!-- px-5: 水平内边距为 1.25rem（20px） -->
<!-- py-3: 垂直内边距为 0.75rem（12px） -->
<!-- flex: 设置为 Flex 容器 -->
<!-- items-center: 子元素垂直居中 -->
<!-- transition: 启用过渡效果 -->
<!-- duration-150: 过渡持续 150 毫秒 -->
<!-- ease-in-out: 过渡速度曲线为缓入缓出 -->
<!-- relative: 相对定位，为伪元素提供上下文 -->
<!-- group: 启用 group-* 类，控制子元素悬停样式 -->
<!-- 按钮文本，带下划线动画效果 -->
<span
class="relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-orange-600 group-hover:after:w-full after:transition-all after:duration-300"
_msttexthash="9400469"
_msthash="1073"
>
创建一个...
<!-- relative: 相对定位，为伪元素提供上下文 -->
<!-- after:absolute: 使用 ::after 伪元素，绝对定位 -->
<!-- after:bottom-0 after:left-0: 伪元素位于底部左侧 -->
<!-- after:h-0.5: 伪元素高度为 0.5 单位（约 2px） -->
<!-- after:w-0: 初始宽度为 0 -->
<!-- after:bg-orange-600: 伪元素背景色为橙色 -->
<!-- group-hover:after:w-full: 父元素悬停时，伪元素宽度变为 100% -->
<!-- after:transition-all: 伪元素的所有属性启用过渡 -->
<!-- after:duration-300: 伪元素过渡持续 300 毫秒 -->
</span>
<!-- 下拉箭头图标 -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-chevron-down w-5 h-5 ml-1 text-slate-400 transition-transform duration-200"
>
<path d="m6 9 6 6 6-6"></path>
<!-- w-5 h-5: 图标宽高为 1.25rem（20px） -->
<!-- ml-1: 左外边距为 0.25rem（4px） -->
<!-- text-slate-400: 图标颜色为浅灰 -->
<!-- transition-transform: 变换属性启用过渡 -->
<!-- duration-200: 过渡持续 200 毫秒 -->
</svg>
</button>
</li>
<!-- 导航链接：网站示例 -->
<a
class="font-medium text-slate-900 hover:text-orange-600 px-5 py-3 flex items-center transition duration-150 ease-in-out relative group"
href="/showcase"
>
<!-- font-medium: 字体中等粗细 -->
<!-- text-slate-900: 文本颜色为深灰 -->
<!-- hover:text-orange-600: 悬停时文本变为橙色 -->
<!-- px-5 py-3: 水平内边距 1.25rem，垂直内边距 0.75rem -->
<!-- flex items-center: Flex 容器，子元素垂直居中 -->
<!-- transition duration-150 ease-in-out: 过渡效果 -->
<!-- relative group: 相对定位，支持悬停效果 -->
<span
class="relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-orange-600 group-hover:after:w-full after:transition-all after:duration-300"
_msttexthash="12514827"
_msthash="1074"
>
网站示例
<!-- 下划线动画效果，同上 -->
</span>
</a>
<!-- 导航链接：联盟 -->
<a
class="font-medium text-slate-900 hover:text-orange-600 px-5 py-3 flex items-center transition duration-150 ease-in-out relative group"
href="https://wondersites.lemonsqueezy.com/affiliates"
>
<span
class="relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-orange-600 group-hover:after:w-full after:transition-all after:duration-300"
_msttexthash="24846419"
_msthash="1075"
>
联盟 （50%）
</span>
</a>
<!-- 导航链接：定价 -->
<a
class="font-medium text-slate-900 hover:text-orange-600 px-5 py-3 flex items-center transition duration-150 ease-in-out relative group"
href="/pricing"
>
<span
class="relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-orange-600 group-hover:after:w-full after:transition-all after:duration-300"
_msttexthash="4236310"
_msthash="1076"
>
定价
</span>
</a>
<!-- 导航链接：登录 -->
<a
class="font-medium text-slate-900 hover:text-orange-600 px-5 py-3 flex items-center transition duration-150 ease-in-out relative group"
href="https://app.wondersites.co"
>
<span
class="relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-orange-600 group-hover:after:w-full after:transition-all after:duration-300"
_msttexthash="5298241"
_msthash="1077"
>
登录
</span>
</a>
<!-- 创建免费账户按钮 -->
<li>
<a
target="_blank" <!-- 新窗口打开链接 -->
class="btn-sm text-white bg-slate-900 hover:bg-slate-800 ml-3 flex items-center justify-between px-4 py-2 rounded-md transition duration-150 ease-in-out group overflow-hidden relative"
href="https://app.wondersites.co"
>
<!-- btn-sm: 自定义类，定义小型按钮样式 -->
<!-- text-white: 文本颜色为白色 -->
<!-- bg-slate-900: 背景颜色为深灰 -->
<!-- hover:bg-slate-800: 悬停时背景变为稍浅灰色 -->
<!-- ml-3: 左外边距为 0.75rem（12px） -->
<!-- flex items-center justify-between: Flex 容器，子元素两端对齐，垂直居中 -->
<!-- px-4 py-2: 水平内边距 1rem，垂直内边距 0.5rem -->
<!-- rounded-md: 中等圆角 -->
<!-- transition duration-150 ease-in-out: 过渡效果 -->
<!-- group overflow-hidden relative: 支持悬停效果，隐藏溢出内容 -->
<span
class="relative z-10"
_msttexthash="18942144"
_msthash="1078"
>
创建免费帐户
<!-- relative z-10: 文本相对定位，z-index 10 确保在伪元素之上 -->
</span>
<!-- 悬停时的背景滑动效果 -->
<div
class="absolute bg-orange-500 w-0 h-full left-0 top-0 group-hover:w-full transition-all duration-300 ease-in-out -z-0"
>
<!-- absolute: 绝对定位 -->
<!-- bg-orange-500: 背景色为橙色 -->
<!-- w-0 h-full: 初始宽度为 0，高度占满 -->
<!-- left-0 top-0: 定位于左上角 -->
<!-- group-hover:w-full: 悬停时宽度变为 100% -->
<!-- transition-all duration-300 ease-in-out: 过渡效果 -->
<!-- -z-0: z-index 为 -1，确保在文本下方 -->
</div>
<!-- 右箭头图标 -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-right w-4 h-4 ml-2 relative z-10 transform group-hover:translate-x-1 transition-transform"
>
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
<!-- w-4 h-4: 图标宽高为 1rem（16px） -->
<!-- ml-2: 左外边距为 0.5rem（8px） -->
<!-- relative z-10: 相对定位，z-index 10 确保在伪元素之上 -->
<!-- transform group-hover:translate-x-1: 悬停时向右平移 1 单位 -->
<!-- transition-transform: 变换属性启用过渡 -->
</svg>
</a>
</li>
</ul>
</nav>
<!-- 移动端汉堡菜单按钮，仅小屏幕显示 -->
<div class="flex md:hidden" _msthidden="1">
<!-- flex: Flex 容器 -->
<!-- md:hidden: 中等屏幕及以上隐藏 -->
<!-- _msthidden="1": Microsoft Translator 隐藏属性 -->
<!-- 汉堡菜单按钮 -->
<button
class="hamburger"
aria-controls="mobile-nav" <!-- 关联移动端导航 -->
aria-expanded="false" <!-- 指示导航未展开 -->
_msthidden="1"
>
<!-- hamburger: 自定义类，定义汉堡菜单样式 -->
<span
class="sr-only"
_msttexthash="45591"
_msthidden="1"
_msthash="1079"
>
Menu
<!-- sr-only: 仅屏幕阅读器可见，隐藏视觉内容 -->
</span>
<!-- 汉堡菜单图标 -->
<svg
class="w-6 h-6 fill-current text-slate-900"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<rect y="4" width="24" height="2" rx="1"></rect>
<rect y="11" width="24" height="2" rx="1"></rect>
<rect y="18" width="24" height="2" rx="1"></rect>
<!-- w-6 h-6: 图标宽高为 1.5rem（24px） -->
<!-- fill-current: 填充颜色继承父元素 -->
<!-- text-slate-900: 图标颜色为深灰 -->
</svg>
</button>
<!-- 移动端导航覆盖层 -->
<div
class="fixed inset-0 z-50 md:hidden"
style="visibility: hidden; pointer-events: none"
>
<!-- fixed inset-0: 固定定位，覆盖整个视口 -->
<!-- z-50: 高 z-index，确保在其他元素之上 -->
<!-- md:hidden: 中等屏幕及以上隐藏 -->
<!-- visibility: hidden; pointer-events: none: 初始隐藏且禁用交互 -->
<!-- 半透明背景模糊层 -->
<div
class="absolute inset-0 bg-slate-900/30 backdrop-blur-sm transition-opacity opacity-0"
>
<!-- absolute inset-0: 绝对定位，覆盖整个父容器 -->
<!-- bg-slate-900/30: 深灰背景，30% 不透明 -->
<!-- backdrop-blur-sm: 小范围背景模糊 -->
<!-- transition-opacity: 不透明度启用过渡 -->
<!-- opacity-0: 初始完全透明 -->
</div>
</div>
</div>
</div>
</div>
</header>