CSS 基础：选择器、盒模型与布局

<p style="color: red; font-size: 16px;">这段文字是红色的</p>

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      line-height: 1.8;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>蓝色文字</p>
  <p class="highlight">高亮文字</p>
</body>
</html>

<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

/* style.css */
body {
  margin: 0;
  font-family: sans-serif;
}

/* 1. 元素选择器：选中所有该元素 */
p {
  color: #333;
}

/* 2. 类选择器：选中 class 属性包含该值的元素（最常用） */
.highlight {
  background-color: yellow;
}

/* 3. ID 选择器：选中特定 ID 的元素（页面中应唯一） */
#header {
  height: 60px;
}

/* 4. 通配符选择器：选中所有元素 */
* {
  box-sizing: border-box;
}

/* 5. 属性选择器：选中具有特定属性的元素 */
input[type="text"] {
  border: 1px solid #ccc;
}
a[href^="https"]::after {
  content: " 🔒";  /* 给外部链接添加锁图标 */
}

/* 后代选择器：选中 .article 内所有 p（无论层级多深） */
.article p {
  margin-bottom: 1em;
}

/* 子元素选择器：只选中直接子元素 */
.nav > li {
  display: inline-block;
}

/* 相邻兄弟选择器：选中紧接在 h2 后的第一个 p */
h2 + p {
  font-weight: bold;
}

/* 通用兄弟选择器：选中 h2 后所有 p */
h2 ~ p {
  color: gray;
}

/* 状态伪类 */
a:hover { color: red; }        /* 鼠标悬停 */
a:visited { color: purple; }   /* 已访问链接 */
input:focus { outline: 2px blue solid; }  /* 获得焦点 */

/* 结构伪类 */
li:first-child { font-weight: bold; }  /* 第一个子元素 */
li:last-child { border-bottom: none; }
li:nth-child(odd) { background: #f5f5f5; }   /* 奇数行 */
li:nth-child(even) { background: #fff; }      /* 偶数行 */
li:nth-child(3n+1) { color: red; }            /* 每3个选第1个 */

/* :not 否定伪类 */
button:not(.disabled) { cursor: pointer; }

!important  >  行内样式  >  #id  >  .class  >  元素选择器  >  通配符

/* 特异性计算示例 */
#nav .item a { color: blue; }    /* 100 + 10 + 1 = 111 */
.nav a { color: red; }           /* 10 + 1 = 11，上面的优先级更高 */

┌─────────────────────────────────┐
│           margin（外边距）        │
│  ┌───────────────────────────┐  │
│  │     border（边框）          │  │
│  │  ┌─────────────────────┐  │  │
│  │  │   padding（内边距）   │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │ content（内容） │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

.box {
  /* content：内容区域 */
  width: 200px;        /* 内容宽度 */
  height: 100px;       /* 内容高度 */

  /* padding：内边距，内容与边框之间的距离 */
  padding: 20px;               /* 四边都是 20px */
  padding: 10px 20px;          /* 上下 10px，左右 20px */
  padding: 10px 20px 15px 5px; /* 上 右 下 左（顺时针） */

  /* border：边框 */
  border: 2px solid #333;      /* 宽度 样式 颜色 */
  border-radius: 8px;          /* 圆角 */

  /* margin：外边距，与其他元素的距离 */
  margin: 30px auto;           /* 上下 30px，左右自动（居中） */
}

/* 默认：content-box —— width 只包括内容宽度 */
.box-content {
  box-sizing: content-box;     /* 默认值 */
  width: 200px;
  padding: 20px;
  border: 5px solid red;
  /* 实际占用宽度 = 200 + 20*2 + 5*2 = 250px */
}

/* 推荐：border-box —— width 包括内容+padding+border */
.box-border {
  box-sizing: border-box;      /* 推荐使用！ */
  width: 200px;
  padding: 20px;
  border: 5px solid blue;
  /* 实际占用宽度 = 200px（内容自动压缩为 150px）*/
}

.static {
  position: static;  /* 默认值，可以不写 */
}

.relative {
  position: relative;
  top: 10px;    /* 向下移动 10px（相对于原位置） */
  left: 20px;   /* 向右移动 20px */
  /* 原位置仍然被占据，不会影响其他元素布局 */
}

.parent {
  position: relative;  /* 成为子元素的定位参照 */
  width: 400px;
  height: 300px;
}

.child {
  position: absolute;
  top: 20px;
  right: 20px;
  /* 相对于 .parent 的右上角定位 */
}

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 10px 15px;
  background: #333;
  color: white;
  border-radius: 50%;
  cursor: pointer;
}

.sticky-header {
  position: sticky;
  top: 0;  /* 当元素距离视口顶部 0px 时，变为 fixed */
  background: white;
  z-index: 10;
}

.modal {
  position: fixed;
  z-index: 1000;       /* 模态框在最上层 */
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
}