六十天前端强化训练之第二天CSS选择器与盒模型深度解析

news2025/5/13 13:05:11

=====欢迎来到编程星辰海的博客讲解======

一、CSS 核心概念

1. 三种引入方式

2. CSS 注释

3. 常见单位系统

二、CSS选择器核心知识

1. 基础选择器类型

2. 组合选择器

3. 伪类选择器（部分示例）

4. 优先级计算规则

三、盒模型深度解析

1. 标准盒模型图示

2. box-sizing详解

四、优先级覆盖实战案例

完整可运行代码

效果说明

五、学习要点总结

六、扩展阅读推荐

🚀 CodePen完全指南：从零开始玩转在线代码沙盒
—— 用浏览器就能写代码的神器，前端开发者的创意游乐场！

一、CSS 核心概念

1. 三种引入方式

HTML

<!-- 行内样式 -->
<div style="color: red;">示例文字</div>

<!-- 内嵌样式 -->
<head>
  <style>
    .box { padding: 20px; }
  </style>
</head>

<!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

2. CSS 注释

CSS

/* 单行注释 */
/*
  多行注释
  可跨多行
*/

3. 常见单位系统

单位类型	示例	适用场景
绝对单位	px, pt	固定尺寸元素
相对单位	em, rem, %	响应式布局
视窗单位	vw, vh	全屏布局
颜色单位	#fff, rgb()	颜色定义

CSS（层叠样式表）的基本语法由选择器和声明块组成：

1. 选择器

指定要样式化的HTML元素。常见类型：

元素选择器：p { ... }（选中所有<p>标签）
类选择器：.class { ... }（选中class="class"的元素）
ID选择器：#id { ... }（选中id="id"的元素）

2. 声明块

用大括号 {} 包裹，内部是属性-值对：

CSS

选择器 {
  属性1: 值;
  属性2: 值;
}

示例：

CSS

p {
  color: red;        /* 文字颜色 */
  font-size: 16px;   /* 字号 */
  margin: 10px;      /* 外边距 */
}

3. 属性和值

属性：要修改的样式类型（如 color, width）
值：具体的样式设置（如 blue, 50%, 20px）
每对属性值用 : 连接，结尾用 ; 分隔。

4. 注释

用 /* 注释内容 */ 添加说明。

5. 常见注意点

区分大小写（建议全小写）
分号不可省略（最后一个声明可省，但建议保留）
属性值可用空格、百分比、颜色名称等多种形式。

一句话总结：
通过 选择器 { 属性: 值; } 的格式，精准控制网页元素的样式表现。

二、CSS选择器核心知识

1. 基础选择器类型

CSS

/* 元素选择器 */
div { color: red; }

/* 类选择器 */
.container { width: 1200px; }

/* ID选择器 */
#main-nav { background: #333; }

/* 属性选择器 */
input[type="text"] { border: 1px solid #ccc; }

/* 通配符选择器 */
* { margin: 0; padding: 0; }

2. 组合选择器

CSS

/* 后代选择器 */
article p { line-height: 1.6; }

/* 子选择器 */
ul > li { list-style: none; }

/* 相邻兄弟选择器 */
h2 + p { margin-top: 0; }

/* 通用兄弟选择器 */
h2 ~ p { color: #666; }

3. 伪类选择器（部分示例）

CSS

/* 动态伪类 */
a:hover { color: #f00; }
input:focus { outline: 2px solid blue; }

/* 结构伪类 */
li:nth-child(2n) { background: #f5f5f5; }
tr:first-child { font-weight: bold; }

4. 优先级计算规则

权重等级表：

TEXT

!important > 行内样式(1000) > ID(100) > 类/属性/伪类(10) > 元素/伪元素(1)

计算示例：

CSS

#nav .item:hover  // 100 + 10 + 10 = 120
div#header a.btn  // 1 + 100 + 10 = 111

三、盒模型深度解析

1. 标准盒模型图示

TEXT

+-----------------------------------+
|             margin(40)           |
|  +-----------------------------+  |
|  |          border(2)          |  |
|  |  +-----------------------+  |  |
|  |  |       padding(20)     |  |  |
|  |  |  +-----------------+  |  |  |
|  |  |  |  content(200)   |  |  |  |
|  |  |  +-----------------+  |  |  |
|  |  +-----------------------+  |  |
|  +-----------------------------+  |
+-----------------------------------+

2. box-sizing详解

CSS

.box {
  box-sizing: content-box; /* 默认值 */
  box-sizing: border-box;  /* 现代开发推荐值 */
}

尺寸计算对比：

TEXT

content-box: width = content宽度
border-box: width = content + padding + border

四、优先级覆盖实战案例

完整可运行代码

HTML

<!DOCTYPE html>
<html>
<head>
<style>
  /* 元素选择器（权重：0,0,1） */
  div { 
    width: 200px;
    padding: 20px;
    background: lightblue !important;  /* 强制最高优先级 */
  }

  /* 类选择器（权重：0,1,0） */
  .priority-box {
    background: lightgreen;
    border: 2px solid darkgreen;
  }

  /* ID选择器（权重：1,0,0） */
  #specialBox {
    background: salmon;
    margin: 10px;
  }

  /* 行内样式（权重：1,0,0,0） */
</style>
</head>
<body>
  <div class="priority-box" id="specialBox" 
       style="background: goldenrod">
    优先级实践盒子
  </div>
</body>
</html>

效果说明

最终显示效果：

背景色：lightblue（!important强制覆盖）
边框：darkgreen（类选择器生效）
外边距：10px（ID选择器生效）
行内样式背景色被覆盖

五、学习要点总结

优先级黄金法则：
- !important > 行内样式 > ID > 类 > 元素
- 权重计算不采用十进制进位制
- 相同优先级时后定义的生效
盒模型要点：
- 总宽度 = width + padding + border + margin
- box-sizing改变计算方式
- 负margin的特殊应用场景
开发建议：
- 避免过度使用ID选择器
- 谨慎使用!important
- 统一使用border-box模型
CSS
```
* { 
  box-sizing: border-box;
  margin: 0; 
  padding: 0; 
}
```