第三部分：盒模型与文本属性

3. 盒模型

盒模型是CSS布局的核心概念，它定义了元素的内容、填充、边框和边距之间的关系。

边框（border）
  • 作用：设置元素的边框样式、宽度和颜色。
  • 语法：
  .box {
    border: 2px solid #000; /* 宽度 | 样式 | 颜色 */
  }
  • 细分属性：
    • border-width：边框宽度。
    • border-style：边框样式（如solid, dashed, dotted）。
    • border-color：边框颜色。
填充（padding）
  • 作用：设置元素内容与边框之间的空间。
  • 语法：
  .box {
    padding: 10px; /* 上下左右 */
    padding: 10px 20px; /* 上下 | 左右 */
    padding: 10px 20px 30px 40px; /* 上 | 右 | 下 | 左 */
  }
  • 注意：填充会增加元素的尺寸。
边距（margin）
  • 作用：设置元素与其他元素之间的空间。
  • 语法：
  .box {
    margin: 10px; /* 上下左右 */
    margin: 10px 20px; /* 上下 | 左右 */
    margin: 10px 20px 30px 40px; /* 上 | 右 | 下 | 左 */
  }
  • 注意：负边距可用于重叠元素。
盒模型计算
  • 标准盒模型：width和height仅包含内容区域。
  • 替代盒模型：width和height包含内容、填充和边框。
  .box {
    box-sizing: border-box; /* 启用替代盒模型 */
  }

4. 文本属性

文本属性用于控制文本的样式和布局。

字体系列（font-family）
  • 作用：设置文本的字体。
  • 语法：
  body {
    font-family: "Arial", sans-serif;
  }
  • 注意：提供备用字体以确保兼容性。
字体大小（font-size）
  • 作用：设置文本的大小。
  • 语法：
  h1 {
    font-size: 24px;
  }
  • 常用单位：px, em, rem, %。
字体粗细（font-weight）
  • 作用：设置文本的粗细。
  • 语法：
  .bold-text {
    font-weight: bold; /* 或数值如700 */
  }
文字颜色（color）
  • 作用：设置文本的颜色。
  • 语法：
  p {
    color: #333;
  }
行高（line-height）
  • 作用：设置文本行之间的间距。
  • 语法：
  p {
    line-height: 1.5; /* 无单位表示倍数 */
  }
文本对齐方式（text-align）
  • 作用：设置文本的水平对齐方式。
  • 语法：
  .center-text {
    text-align: center;
  }
文本装饰（text-decoration）
  • 作用：设置文本的装饰线（如下划线、删除线）。
  • 语法：
  a {
    text-decoration: none; /* 去除下划线 */
  }
文本转换（text-transform）
  • 作用：控制文本的大小写。
  • 语法：
  .uppercase {
    text-transform: uppercase; /* 大写 */
  }