CSS 探究

CSS 介绍

• CSS 指的是层叠样式表（Cascading Style Sheet）

• 核心的作用的是进行设置我们网页的基本的样式吧，以及美化我们的网页吧，核心就是做美化的讷

• 以及CSS的书写方式

  • 嵌入式的书写形式

  • style 内部书写的形式

  • 外部链接引入的实现吧

CSS 创建

• CSS 的话核心分为三类吧

  • 外部样式表（External Style Sheet）

    • 核心是通过我们的 link 标签实现引入的讷，以及实现对应的其他额外的操作的实现的讷

  • 内部样式表（Internal Style Sheet）

    • 核心就是通过我们的 head 标签中的 style 实现书写我们的内部的样式表吧

  • 内联样式表（Inline Style Sheet）

    • 核心就是通过我们的元素标签中指定 style 属性实现的指定元素的样式吧

• 多重样式表

  • 核心的话就是通过我们的其他方式实现吧

  • 核心遵循的就是我们的解析的先后顺序吧，文档的解析流程吧，后的样式覆盖以前的样式吧

  • 核心还是解析规则决定了谁生效谁不生效吧

CSS 背景background

• CSS 的属性含有

  • background-color 实现的是指定我们背景的颜色吧

    • 可以设置的值有：字符串形式的颜色，十六进制的颜色，rgb|rgba

  • background-image 实现的就是指定我们背景的图片吧

    • 可以设置的是我们的 url 图片资源链接吧，以及我们的后面的渐变色这些吧

  • background-repeat 决定的就是背景是否重复吧

  • background-attachment 决定的就是背景是否固定吧

  • background-position 背景相对于的位置吧

/* 开始实现书写我们的样式吧 */
.container {
  background-color: red;  /* 设置的是背景的颜色吧 */
  background-image: url("./image.png");  // 设置的就是背景图片吧
  background-repeat: no-repeat;  // 背景不实现平铺吧
  background-position:right top;
}

• 背景的混合书写实现吧

  • background: bg-color bg-image bg-repeat bg-attachment bg-position

    • 这个就是混合属性的时候书写的顺序吧

      • 颜色

      • 图片

      • 是否平铺

      • 是否固定

      • 相对位置吧

/* 正确：低饱和度渐变 + 深灰文字，高对比度，背景弱化 */
.good-card {
  width: 300px;
  padding: 2rem;
  /* 低饱和蓝紫渐变，柔和不刺眼 */
  background: linear-gradient(45deg, #e0e7ff, #f3e8ff);
  color: #1f2937; /* 深灰文字，对比度 7.2:1，达标 */
  font-size: 1rem;
  border-radius: 8px;
}

/* 进阶：深色背景 + 半透明遮罩，确保文字清晰 */
.dark-card {
  width: 300px;
  padding: 2rem;
  background: 
    /* 黑色遮罩（降低背景图亮度） */
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    /* 背景图（风景图，复杂度高） */
    url("scenery.jpg") center/cover no-repeat;
  color: #fff; /* 白色文字，对比度 14:1，达标 */
  font-size: 1rem;
  border-radius: 8px;
}

/* 成功提示：绿色系（语义：安全、成功） */
.alert-success {
  padding: 1rem;
  background-color: #ecfdf5; /* 浅绿背景，柔和不刺眼 */
  border-left: 4px solid #10b981; /* 深绿边框，强化语义 */
  color: #065f46; /* 深绿文字，高对比度 */
}

/* 警告提示：黄色系（语义：注意、警示） */
.alert-warning {
  padding: 1rem;
  background-color: #fefce8; /* 浅黄背景 */
  border-left: 4px solid #f59e0b; /* 深黄边框 */
  color: #92400e; /* 深黄文字 */
}

/* 错误提示：红色系（语义：危险、错误） */
.alert-error {
  padding: 1rem;
  background-color: #fee2e2; /* 浅红背景 */
  border-left: 4px solid #ef4444; /* 深红边框 */
  color: #991b1b; /* 深红文字 */
}

/* 信息提示：蓝色系（语义：专业、信息） */
.alert-info {
  padding: 1rem;
  background-color: #eff6ff; /* 浅蓝背景 */
  border-left: 4px solid #3b82f6; /* 深蓝边框 */
  color: #1e40af; /* 深蓝文字 */
}

/* 全屏背景图，适配所有设备，核心图案不丢失 */
.hero-section {
  height: 100vh; /* 占满视口高度 */
  background: 
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), /* 遮罩，确保文字清晰 */
    url("hero-background.jpg") center/cover no-repeat; /* 中心定位+覆盖容器 */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 移动设备优化：简化背景（去掉图案，保留渐变），减少加载压力 */
@media (max-width: 768px) {
  .hero-section {
    background: linear-gradient(135deg, #3b82f6, #1e40af); /* 纯色渐变替代背景图 */
  }
}

/* 卡片背景图，自适应卡片大小，不拉伸 */
.feature-card {
  width: 100%;
  max-width: 350px;
  height: 200px;
  background: url("card-pattern.jpg") center/cover no-repeat; /* 中心定位+覆盖容器 */
  border-radius: 8px;
  overflow: hidden; /* 隐藏裁剪部分 */
}

/* 另一种需求：背景图完整显示，不裁剪（用 contain） */
.avatar-card {
  width: 120px;
  height: 120px;
  background: url("avatar.jpg") center/contain no-repeat; /* 完整显示图片，不拉伸 */
  background-color: #f3f4f6; /* 背景图周围的填充色，避免空白 */
  border-radius: 50%;
}


/* 正确1：用 CSS 渐变替代纹理图片（性能最优） */
.texture-background {
  /* 用渐变模拟纹理，无加载成本 */
  background: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
              linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 20px 20px; /* 纹理密度 */
}

/* 正确2：优化背景图（压缩为 WebP 格式，体积 < 200KB）+ 背景色占位 */
.optimized-background {
  /* 背景色占位，避免加载前空白 */
  background-color: #f3f4f6;
  /* 压缩后的 WebP 图片，加载快 */
  background-image: url("optimized-background.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 正确3：按需加载背景图（滚动时加载） */
.lazy-background {
  background-color: #f9fafb;
  /* 初始用占位图（小尺寸模糊图），滚动时替换为高清图 */
  background-image: url("placeholder-blur.jpg");
  background-position: center;
  background-size: cover;
}
/* JS 滚动加载逻辑（简化） */
document.addEventListener('scroll', () => {
  const elem = document.querySelector('.lazy-background');
  if (elem.getBoundingClientRect().top < window.innerHeight) {
    elem.style.backgroundImage = 'url("high-res-background.webp")';
  }
});


/* CSS：符合所有设计哲学的背景设计 */
.product-card {
  /* 1. 内容优先：低饱和背景+高对比度文字 */
  background: 
    /* 弱化背景图（遮罩+低透明度） */
    linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
    /* 2. 氛围匹配：科技感图案，传递产品属性 */
    url("tech-pattern.webp") center/cover no-repeat; /* 3. 性能优化：压缩后的 WebP 图片 */
  /* 4. 响应式适配：卡片宽度自适应，背景覆盖容器 */
  width: 100%;
  max-width: 380px;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.product-title {
  color: #111827; /* 深灰文字，对比度 8:1 */
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.product-desc {
  color: #4b5563; /* 中灰文字，对比度 5.2:1 */
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.product-btn {
  /* 1. 语义匹配：蓝色=信任、购买 */
  background: linear-gradient(45deg, #3b82f6, #2563eb); /* 2. 渐进增强：渐变+纯色降级 */
  background-color: #3b82f6; /* 降级方案 */
  color: #fff; /* 对比度 14:1 */
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.product-btn:hover {
  background: linear-gradient(45deg, #2563eb, #1d4ed8);
  background-color: #2563eb;
}

/* 响应式适配：小屏幕优化 */
@media (max-width: 768px) {
  .product-card {
    padding: 1.5rem;
    /* 简化背景：去掉图案，保留纯色，减少性能消耗 */
    background: #f9fafb;
  }
}

CSS 文本

• 文本可以设置的属性含有

  • 文本的颜色值，通过 color 属性来设置和指定吧

    • 一般可以设置：颜色字符串，rgb或者rgba值，十六进制值

  • 文本的对齐方式，通过我们的 text-align 进行设置实现吧

    • 一般可以设置的为：center，left，right

  • 文本修饰符的值：text-decoration

    • 一般可以设置的值为：none，overline，line-throngth，underline

  • 文本转换试下：text-transform

    • 可以设置的值有：uppercase，lowercase，capitalize

  • 文本的缩进设置：text-indient

    • 设置的是文本的缩进属性吧，标准化一些吧

  • 文本排布的方向指定：direction

  • 文本的字符间距：letter-spacing

  • 文本阴影：text-shadow

  • 文本的垂直对其：vertical-align

  • 文本空白区域对其：white-space

  • 字间距：word-sapcing

字体全局设计

字体族设置思考

• 对于我们的字体的设置的话，一般使用的是我们的 font-family 进行设置吧，以及设置的规则是

  • font-family: [首选字体], [...]

  • 优先使用的是系统的默认字体吧，然后指定通用字体

/* 网页正文字体栈：无衬线字体（现代清晰），兼容不同系统 */
body {
  font-family: 'Inter', 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', 
               Helvetica, Arial, sans-serif;
}

/* 标题字体栈：衬线字体（优雅正式），适配文章/博客标题 */
h1, h2, h3 {
  font-family: 'Georgia', 'Times New Roman', 'SimSun', serif;
}

字体大小设置

• 这个在后期实现了我们的对应的移动端适配的能力实现吧

• 核心使用的属性是 font-size 实现吧

/* 根元素设置基础字体（默认16px，这里重置为18px更易计算） */
html {
  font-size: 18px;
}

/* 正文：1rem = 18px，在任何设备上保持基础可读性 */
p {
  font-size: 1rem;
}

/* 标题：1.8rem = 32.4px，比正文大1.8倍，建立层次 */
h1 {
  font-size: 1.8rem;
}

/* 小文本：0.875rem = 15.75px，用于注释/辅助信息 */
small {
  font-size: 0.875rem;
}

/* 大屏适配：视口宽度>1200px时，标题放大 */
@media (min-width: 1200px) {
  h1 {
    font-size: 2.2rem; /* 39.6px */
  }
}

字体粗细指定

• 核心是通过我们的 font-weight 进行的实现的吧，体现出美感来吧

/* 正文：常规粗细（400），易读 */
.article-content {
  font-weight: 400;
}

/* 小标题：半粗（600），比正文突出但不刺眼 */
.article-subtitle {
  font-weight: 600;
}

/* 大标题：粗体（700），视觉焦点 */
.article-title {
  font-weight: 700;
}

/* 强调文本：极粗（900），用于关键信息（如价格、警告） */
.highlight {
  font-weight: 900;
}

字体的样式指定

• 核心是通过我们的 font-style 实现指定吧

• 常见的可以设置的值有 normal italic oblique

/* blockquote 是 HTML 语义化标签（引用），用斜体区分 */
blockquote {
  font-style: italic;
  color: #666; /* 灰色弱化，不抢正文焦点 */
  border-left: 3px solid #eee;
  padding-left: 1rem;
}

字体间距设置

• 核心的属性就是 line-height word-spacing letter-spacing

  • 一个是行高的设置

  • 一个单词间距的设置

  • 一个字体快的设置吧

/* 正文：1.5-1.6 是黄金行高，兼顾紧凑与呼吸感 */
.article {
  font-size: 1rem;
  line-height: 1.5; /* 实际行高 = 16px * 1.5 = 24px */
}

/* 标题：行高1.2-1.3，更紧凑，突出厚重感 */
h1 {
  font-size: 2rem;
  line-height: 1.2; /* 实际行高 = 32px * 1.2 = 38.4px */
}

/* 按钮文本：行高1，垂直居中（按钮高度=文本高度） */
.btn {
  font-size: 1rem;
  line-height: 1;
  padding: 0.5rem 1rem;
}

/* 多行文本垂直居中：父容器高度 = line-height * 行数 */
.card-title {
  height: 48px; /* 16px * 1.5 * 2 行 */
  line-height: 1.5;
  overflow: hidden; /* 隐藏超出部分 */
}

文本修饰

• white-space、overflow-wrap、word-break、text-overflow

  • white-sapce 设置的空白区域的样式吧

  • overflow-wrap 设置的是我们的间距吧

  • overflow-wrap：优先在单词内部换行（保护单词完整性，推荐）；

  • word-break：强制在任意字符间换行（可能拆分单词，慎用）。

/* 根元素基础字体（手机端 16px） */
html {
  font-size: 16px;
}

/* 正文样式 */
.article {
  max-width: 800px; /* 电脑端最大宽度，避免文本过长（一行超过 80 字符易疲劳） */
  margin: 0 auto; /* 居中 */
  padding: 0 1rem; /* 手机端左右内边距，避免贴边 */
  line-height: 1.5;
}

/* 平板端（768px+）：基础字体放大到 17px */
@media (min-width: 768px) {
  html {
    font-size: 17px;
  }
}

/* 电脑端（1200px+）：基础字体放大到 18px，行高调整为 1.6 */
@media (min-width: 1200px) {
  html {
    font-size: 18px;
  }
  .article {
    line-height: 1.6;
  }
}

CSS 链接

• a:link - 正常，未访问过的链接

• a:visited - 用户已访问过的链接

• a:hover - 当用户鼠标放在链接上时

• a:active - 链接被点击的那一刻

  • a:hover 必须跟在 a:link 和 a:visited后面

  • a:active 必须跟在 a:hover后面

/* 1. 未访问链接：蓝色，下划线 */
a:link {
  color: #2563eb; /* 蓝色（信任、可点击的语义） */
  text-decoration: underline;
}

/* 2. 已访问链接：紫色，保持下划线 */
a:visited {
  color: #7c3aed; /* 紫色（区分未访问） */
  /* 注意：不能修改 underline 样式，浏览器限制 */
}

/* 3. 悬停链接：深蓝，下划线变粗 */
a:hover {
  color: #1d4ed8;
  text-decoration-thickness: 2px; /* 下划线加粗 */
  text-underline-offset: 4px; /* 下划线与文字间距 */
}

/* 4. 点击瞬间：深蓝，下划线变色 */
a:active {
  color: #1e40af;
  text-decoration-color: #1e40af;
}

/* 高级下划线设计：细、偏移、hover 变色 */
a.custom-link {
  text-decoration: none; /* 取消默认下划线 */
  color: #2563eb;
  /* 自定义下划线：底部边框模拟（更灵活） */
  border-bottom: 2px solid #2563eb;
  padding-bottom: 2px; /* 文字与下划线间距 */
  transition: all 0.3s ease; /* 平滑过渡 */
}

a.custom-link:hover {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8; /* 下划线跟随文字变色 */
}

/* 另一种方案：用 text-decoration 原生属性（更简洁） */
a.native-link {
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px; /* 细线条 */
  text-underline-offset: 3px; /* 偏移间距 */
  text-decoration-color: #93c5fd; /* 浅蓝下划线，不抢文字焦点 */
  color: #2563eb;
}

a.native-link:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: #2563eb;
}

/* 全局基础链接样式（所有页面通用） */
a:link,
a:visited {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover,
a:focus {
  color: #1d4ed8;
  text-decoration-thickness: 2px;
}

a:active {
  color: #1e40af;
}

/* 特殊链接：导航链接（基于全局样式扩展） */
.nav-link:link,
.nav-link:visited {
  text-decoration: none; /* 取消下划线 */
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
}

.nav-link:hover,
.nav-link:focus {
  background-color: #eff6ff; /* 增加背景色，替代下划线 */
  color: #1d4ed8;
}

/* 特殊链接：按钮式链接（保持颜色一致） */
.btn-link:link,
.btn-link:visited {
  text-decoration: none;
  background-color: #2563eb;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  display: inline-block;
}

.btn-link:hover,
.btn-link:focus {
  background-color: #1d4ed8;
  color: #fff;
}

CSS 盒子模型

• 核心的话是四个区域吧

  • margin 外边距

  • border 边框

  • padding 内边距

  • content 内容区

盒子模型到底用来做什么讷？

• 核心思想：在网页中实现呈现的任何的东西都是我们的一个一个的盒子而已，不管是什么，核心都是用来做的是进行吧元素进行包裹起来以及进行对应的排列布局一下吧

• 核心模型核心实现规定了我们的盒子到底是如何进行排布和实现的讷

• 核心的作用：统一元素的布局逻辑，实现开发者精准的控制元素的大小、间距和位置等信息吧

• 那么此时就知道了元素的一些核心信息：元素实际占据的大小空间是 = content + padding + border + margin 吧

内容 content 区域

• 盒子最内层，直接存放元素的实际内容（文本、图片、子元素等），是盒子的 “核心区域”

• width：内容区的宽度（默认值 auto，由内容自动撑开）；

• height：内容区的高度（默认值 auto，由内容自动撑开）。

/* 固定尺寸的卡片：内容区宽300px、高200px */
.card {
  width: 300px;
  height: 200px;
  background-color: #f3f4f6;
}

/* 自适应内容的文本框：宽度自动，最大宽度600px（避免过宽） */
.text-box {
  max-width: 600px;
  width: auto;
  background-color: #eff6ff;
  padding: 1rem; /* 后续讲padding，先感受布局 */
}

/* 滚动容器：最小高度100px，最大高度300px（超出滚动） */
.scroll-container {
  min-height: 100px;
  max-height: 300px;
  overflow-y: auto; /* 垂直滚动 */
  background-color: #fefce8;
}

padding 内边距

• 简写：padding: 上 右 下 左（顺时针顺序，支持 1-4 个值）；

• 单独控制：padding-top、padding-right、padding-bottom、padding-left。

/* 1. 简写用法（4个值：上1rem 右1.5rem 下1rem 左1.5rem） */
.card-padding {
  width: 300px;
  background-color: #f3f4f6;
  padding: 1rem 1.5rem; /* 上下内边距1rem，左右1.5rem */
}

/* 2. 简写用法（2个值：上下0.5rem，左右1rem） */
.btn-padding {
  display: inline-block;
  background-color: #2563eb;
  color: #fff;
  padding: 0.5rem 1rem; /* 上下小内边距，左右大内边距（按钮常用） */
  text-decoration: none;
  border-radius: 8px;
}

/* 3. 百分比内边距（响应式卡片：左右内边距占父元素宽度的5%） */
.responsive-padding {
  width: 80%;
  background-color: #fefce8;
  padding: 2% 5%; /* 上下2%，左右5%（父元素宽度越大，内边距越大） */
}

border 边框区域

• 简写：border: 宽度 样式 颜色（三个属性缺一不可，否则边框不显示）；

• 单独控制：

  • 宽度：border-width（可拆分为 border-top-width 等）；

  • 样式：border-style（必须有值，如 solid 实线、dashed 虚线，默认 none 无样式）；

  • 颜色：border-color（默认继承父元素文本颜色）；

• 圆角：border-radius（控制边框圆角，常用 px 或百分比）。

/* 1. 基础边框（黑色实线，1px宽） */
.basic-border {
  width: 300px;
  padding: 1rem;
  border: 1px solid #000; /* 宽度1px + 实线 + 黑色 */
}

/* 2. 自定义边框（不同边不同样式） */
.custom-border {
  width: 300px;
  padding: 1rem;
  border-top: 2px solid #2563eb; /* 上边框：蓝色实线 */
  border-right: 1px dashed #9ca3af; /* 右边框：灰色虚线 */
  border-bottom: 2px solid #2563eb; /* 下边框：蓝色实线 */
  border-left: none; /* 左边框：无 */
}

/* 3. 圆角边框（卡片常用，8px圆角） */
.rounded-border {
  width: 300px;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px; /* 四角圆角，值越大越圆 */
  background-color: #f9fafb;
}

/* 4. 圆形边框（50%圆角，需配合正方形元素） */
.circle-border {
  width: 100px;
  height: 100px;
  border: 2px solid #8b5cf6;
  border-radius: 50%; /* 50% 圆角 = 圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
}

margin 外边距

• 盒子最外层，控制当前盒子与其他盒子之间的间距，相当于快递盒之间的 “空隙”—— 避免盒子挤在一起，提升布局的呼吸感

• 简写：margin: 上 右 下 左（顺时针顺序，支持 1-4 个值）；

• 单独控制：margin-top、margin-right、margin-bottom、margin-left；

• 特殊用法：margin: 0 auto（水平居中，需配合固定宽度或 max-width）。

/* 1. 基础用法：上下间距2rem，左右间距1rem */
.card-margin {
  width: 300px;
  padding: 1rem;
  background-color: #f3f4f6;
  margin: 2rem 1rem; /* 上下2rem，左右1rem */
}

/* 2. 水平居中：margin: 0 auto（上下0，左右自动） */
.center-card {
  width: 300px; /* 必须有固定宽度或max-width */
  padding: 1rem;
  background-color: #eff6ff;
  margin: 0 auto; /* 水平居中，常用在页面主体、卡片 */
}

/* 3. 负值margin：让盒子超出父容器10px */
.negative-margin {
  width: 300px;
  padding: 1rem;
  background-color: #fefce8;
  margin-left: -10px; /* 向左超出父容器10px */
  margin-top: -10px; /* 向上超出父容器10px */
}

/* 4. 百分比margin：左右间距占父元素宽度的5% */
.responsive-margin {
  width: 80%;
  padding: 1rem;
  background-color: #f9fafb;
  margin: 2% auto; /* 上下2%，左右自动居中 */
}

盒子模型分类

（1）W3C 标准盒模型（默认）

• 元素总宽度 = width（内容区宽度） + padding-left + padding-right + border-left + border-right；

• 元素总高度 = height（内容区高度） + padding-top + padding-bottom + border-top + border-bottom；

• 特点：width 和 height 仅控制内容区大小，padding 和 border 会额外增加元素的总尺寸。

（2）IE 怪异盒模型（兼容旧版 IE）

• 元素总宽度 = width（包含内容区 + padding + border）；

• 元素总高度 = height（包含内容区 + padding + border）；

• 特点：width 和 height 控制整个盒子（内容 + padding+border） 的大小，padding 和 border 不会增加总尺寸，而是从内容区中 “挤压” 空间。

/* 全局设置：所有元素和伪元素都用 border-box */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0; /* 可选：重置默认margin/padding，避免浏览器差异 */
}

/* 全局重置（推荐） */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 卡片容器：水平居中，垂直间距 */
.card-container {
  max-width: 1200px;
  margin: 2rem auto; /* 水平居中 */
  padding: 0 1rem; /* 移动端左右内边距 */
}

/* 卡片样式：固定宽度，内边距，边框，外边距 */
.product-card {
  width: 300px;
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #fff;
  margin: 0 auto 2rem; /* 水平居中，垂直间距2rem */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.product-card h3 {
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.product-card p {
  color: #6b7280;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.product-card .btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #2563eb;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

CSS display

display 的核心作用是「定义元素的 “显示行为模式”」—— 它回答了两个关键问题：

1. 这个元素自己如何在页面中显示？（比如是独占一行，还是和其他元素并排？）

2. 这个元素的子元素如何排列？（比如是水平排列、垂直排列，还是网格分布？）

/* 响应式导航栏：大屏两端对齐，小屏垂直排列 */
.navbar {
  display: flex;
  flex-direction: row; /* 大屏：水平排列 */
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #1f2937;
  color: #fff;
}

.navbar .logo {
  font-size: 1.2rem;
  font-weight: 600;
}

.navbar .links {
  display: flex;
  gap: 1.5rem;
}

.navbar a {
  color: #e5e7eb;
  text-decoration: none;
}

/* 小屏幕（768px以下）：垂直排列 */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column; /* 垂直排列 */
    gap: 1rem; /* 上下间距 */
  }
  
  .navbar .links {
    flex-direction: column;
    align-items: center; /* 链接水平居中 */
    gap: 0.5rem;
  }
}

CSS position

1. position 的核心作用：定义元素的定位方式，控制元素的参考物、是否脱离文档流、位置偏移；

2. 五大属性值核心特性：

   • static：默认，遵循文档流，TRBL 无效；

   • relative：不脱离流，相对于自身偏移，保留原始空间；

   • absolute：脱离流，相对于定位祖先偏移，不占空间；

   • fixed：脱离流，相对于视口偏移，不随页面滚动；

   • sticky：未触发时遵循流，触发后固定，结合 relative 和 fixed；

3. 关键规则：

   • 定位元素支持 TRBL 和 z-index；

   • absolute/fixed 会转为 block 特性，支持宽高；

   • sticky 生效需满足特定条件（触发条件、父容器规则）；

4. 核心关联：position 与 display（定位元素会改变 display 特性）、盒子模型（padding/border 仍有效，margin 规则不同）密切相关。

实战最佳实践

1. 精准定位（弹窗、图标）：用 absolute + 父容器 relative；

2. 固定在屏幕（导航栏、悬浮按钮）：用 fixed，记得给内容留空间；

3. 滚动吸顶（表头、标题）：用 sticky，注意父容器规则；

4. 轻微偏移（图标、按钮 hover）：用 relative；

5. 层叠顺序：重要元素（弹窗、导航）设置高 z-index（如 999/9999）；

6. 避免滥用 absolute：过多绝对定位会导致布局混乱，优先用 flex/grid 布局，定位仅用于特殊场景。

window.addEventListener('scroll', () => {
  if (window.scrollY > 500) {
    document.body.classList.add('scroll-active');
  } else {
    document.body.classList.remove('scroll-active');
  }
});

/* 图片容器（relative 定位） */
.img-container {
  position: relative;
  width: 400px;
  height: 250px;
  margin: 2rem auto;
  border-radius: 8px;
  overflow: hidden; /* 隐藏超出容器的内容 */
}

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 文字说明（绝对定位在图片底部） */
.img-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明背景，突出文字 */
  color: #fff;
  font-size: 1.1rem;
}

/* 弹窗遮罩层（覆盖整个视口） */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999; /* 确保在最上层 */
}

/* 弹窗内容（相对遮罩层居中） */
.modal-content {
  position: relative; /* 作为关闭按钮的定位祖先 */
  width: 350px;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* 关闭按钮（绝对定位在弹窗右上角） */
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #6b7280;
  text-decoration: none;
  border-radius: 50%;
  background-color: #f3f4f6;
}

CSS overflow

CSS 选择器

1. 选择器优先级规则（必记）

• 优先级计算：!important（最高，打破规则）> 内联样式（1000）> ID 选择器（100）> 类 / 属性 / 伪类选择器（10）> 元素 / 伪元素选择器（1）> 通配符（0）；

• 优先级叠加：组合选择器的优先级 = 各组成部分优先级之和（如 div#header .nav = 1 + 100 + 10 = 111）；

• 同优先级：后定义的样式覆盖先定义的（或遵循 “就近原则”）；

• 最佳实践：避免滥用 !important 和 ID 选择器，优先用类选择器（复用性强）和结构伪类（减少冗余类名）。

2. 性能优化建议

• 避免过度嵌套：选择器嵌套越深，浏览器匹配效率越低（如 body .container .row .col .card .title 应简化为 .card-title）；

• 避免通配符和复杂属性选择器：* 和 [attr*="val"] 会遍历所有元素，大型项目慎用；

• 优先使用 “精准选择器”：如用 #header 不如用 .header（可复用），用 .btn-primary 不如用 button[data-type="primary"]（语义化更强）；

• 结构伪类性能：nth-child(n) 比 nth-of-type(n) 略快（浏览器无需筛选元素类型）。

3. 兼容性注意事项

• 新特性兼容性：:has()（CSS4）、:user-invalid（CSS4）、::file-selector-button（CSS4）在现代浏览器（Chrome 88+、Firefox 85+、Safari 15.4+）中支持良好，无需兼容旧浏览器时可大胆使用；

• 伪元素前缀：::placeholder 需要加浏览器前缀（::-webkit-input-placeholder for Chrome/Safari，::-moz-placeholder for Firefox）；

• 旧浏览器兼容：若需兼容 IE11，需避免 :nth-child() 的复杂公式、:focus-visible、:has() 等特性。

4. 语义化与可维护性

• 类名语义化：避免 .red、.left 等样式描述类，优先用 .error、.sidebar 等语义类；

• 伪类 / 伪元素复用：用伪元素实现装饰、图标等，减少额外 DOM 节点（如用 ::before 代替 <i class="icon">）；

• 组件化样式：结合 CSS 变量和伪类，实现组件的状态切换（如 .btn 配合 :hover/:active/:disabled 覆盖所有状态）。

总结

1. 选择器：核心是 “精准匹配”，优先使用类选择器和组合选择器，高级选择器（:has()、属性选择器）可大幅提升开发效率，减少冗余 DOM；

2. 伪类：核心是 “状态 / 关系匹配”，无需操作 DOM 即可实现动态样式（如表单验证、hover 效果），:focus-within、:user-invalid 等新特性可优化用户体验；

3. 伪元素：核心是 “创建虚拟元素”，适合实现装饰、图标、清除浮动等功能，减少 DOM 层级，提升页面性能；

4. 最佳实践：优先级合理控制、避免过度嵌套、语义化命名、善用新特性（CSS4+），兼顾性能、可维护性和兼容性。

CSS 媒体查询

CSS3

• grid 布局

• flex 布局

• transition

• keysframe

• media 这些都是比较重要的讷