当前位置： 首页 > article >正文

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

article 2026/4/5 14:22:57

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

目录

一、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选择器生效）
  • 行内样式背景色被覆盖
五、学习要点总结

  1. 优先级黄金法则：

    • !important > 行内样式 > ID > 类 > 元素
    • 权重计算不采用十进制进位制
    • 相同优先级时后定义的生效

  2. 盒模型要点：

    • 总宽度 = width + padding + border + margin
    • box-sizing改变计算方式
    • 负margin的特殊应用场景

  3. 开发建议：

    • 避免过度使用ID选择器
    • 谨慎使用!important
    • 统一使用border-box模型

    CSS

    * { box-sizing: border-box;margin: 0; padding: 0; 
}

六、扩展阅读推荐

  1. 官方文档：

    • MDN CSS选择器
    • W3C盒模型规范

  2. 深度文章：

    • CSS选择器性能优化指南
    • 现代CSS盒模型最佳实践

  3. 可视化工具：

    • CSS选择器测试沙盒
    • 交互式盒模型演示

建议通过Chrome开发者工具的Elements面板实时调试选择器匹配情况和盒模型计算细节，这是掌握这些概念的最佳实践方式。

相关文章：

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

欢迎来到编程星辰海的博客讲解 目录 一、CSS 核心概念 1. 三种引入方式 2. CSS 注释 3. 常见单位系统 二、CSS选择器核心知识 1. 基础选择器类型 2. 组合选择器 3. 伪类选择器&#xff08;部分示例&#xff09; 4. 优先级计算规则 三、盒模型深度解析 1. 标准盒模型图…...

编程日记 2026/4/5 14:22:57

分享httprunner 结合django实现平台接口自动化方案

说明&#xff0c;可以直接在某个视图集定义自定义接口来验证。 调试1&#xff1a;前端界面直接编写yaml文件. 新增要实现存数据到mysql&#xff0c;同时存文件到testcase下, 如test.yaml 更新yaml数据&#xff0c;同时做到更新 testcase下的文件&#xff0c;如test.yaml acti…...

编程日记 2026/4/2 21:38:59

本地大模型编程实战(22)用langchain实现基于SQL数据构建问答系统(1)

使 LLM(大语言模型) 系统能够查询结构化数据与非结构化文本数据在性质上可能不同。后者通常生成可在向量数据库中搜索的文本&#xff0c;而结构化数据的方法通常是让 LLM 编写和执行 DSL&#xff08;例如 SQL&#xff09;中的查询。 我们将演练在使用基于 langchain 链 &#x…...

编程日记 2026/3/22 15:54:32

速通HTML

目录 HTML基础 1.快捷键 2.标签 HTML进阶 1.列表 a.无序列表 b.有序列表 c.定义列表 2.表格 a.内容 b.合并单元格 3.表单 a.input标签 b.单选框 c.上传文件 4.下拉菜单 5.文本域标签 6.label标签 7.按钮标签 8.无语义的布局标签div与span 9.字符实体 HTML…...

编程日记 2026/4/5 0:52:36

算法（四）——动态规划

文章目录 基本思想适用条件最优子结构子问题重叠状态转移方程 解题步骤应用斐波那契数列背包问题最大子数组和 基本思想 动态规划的核心思想在于将一个复杂的问题分解为一系列相互关联的子问题&#xff0c;通过求解子问题并保存其解&#xff0c;避免对相同子问题的重复计算&am…...

编程日记 2026/2/22 1:03:19

博客系统完整开发流程

前言 通过前⾯课程的学习, 我们掌握了Spring框架和MyBatis的基本使用, 并完成了图书管理系统的常规功能开发, 接下来我们系统的从0到1完成⼀个项⽬的开发. 企业开发的流程 1. 需求评审(产品经理(PM)会和运营(想口号),UI,测试,开发等沟通) ,会涉及到背景/目标/怎么做,可能会有多…...

编程日记 2026/4/5 12:42:37

【C语言】指针笔试题

前言&#xff1a;上期我们介绍了sizeof与strlen的辨析以及sizeof&#xff0c;strlen相关的一些笔试题&#xff0c;这期我们主要来讲指针运算相关的一些笔试题&#xff0c;以此来巩固我们之前所学的指针运算&#xff01; 文章目录 一&#xff0c;指针笔试题1&#xff0c;题目一…...

编程日记 2026/4/6 7:17:24

大数据开发平台的框架

根据你的需求&#xff0c;以下是从 GitHub 推荐的 10 个可以实现大数据开发平台的项目&#xff1a; 1. Apache Spark Apache Spark 是一个开源的分布式计算框架&#xff0c;适用于大规模数据处理和分析。它提供了强大的数据处理能力&#xff0c;支持实时数据处理、机器学习和…...

编程日记 2026/2/15 19:42:19

【Python爬虫(53)】从入门到精通：Scrapy Spider开发全攻略

【Python爬虫】专栏简介&#xff1a;本专栏是 Python 爬虫领域的集大成之作&#xff0c;共 100 章节。从 Python 基础语法、爬虫入门知识讲起&#xff0c;深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑&#xff0c;覆盖网页、图片、音频等各类数据爬取&#xff…...

编程日记 2026/4/5 13:59:06

《Keras 3 ： 使用迁移学习进行关键点检测》：此文为AI自动翻译

《Keras 3 ：使用迁移学习进行关键点检测》 作者：Sayak Paul，由 Muhammad Anas Raza 转换为 Keras 3 创建日期：2021/05/02 最后修改时间：2023/07/19 描述：使用数据增强和迁移学习训练关键点检测器。 （i） 此示例使用 Keras 3 在 Colab 中查看 GitHub 源 关键点检测包…...

编程日记 2026/2/20 5:30:01

CentOS停服后的替代选择：openEuler、Rocky Linux及其他系统的未来展望

CentOS停服后的替代选择&#xff1a;openEuler、Rocky Linux及其他系统的未来展望 引言CentOS停服的背景华为openEuler&#xff1a;面向未来的开源操作系统1. 简介2. 特点3. 发展趋势 Rocky Linux&#xff1a;CentOS的精神继承者1. 简介2. 特点3. 发展趋势 其他可选的替代系统1…...

编程日记 2026/3/4 22:44:29

【Qt】桌面应用开发 ------ 绘图事件和绘图设备 文件操作

文章目录 9、绘图事件和绘图设备9.1 QPainter9.2 手动触发绘图事件9.3 绘图设备9.3.1 QPixmap9.3.2 QImage9.3.3 QImage与QPixmap的区别9.3.4 QPicture 10、文件操作10.1 文件读写10.2 二进制文件读写10.3 文本文件读写10.4 综合案例 9、绘图事件和绘图设备 什么时候画&#x…...

编程日记 2026/4/3 2:39:44

python与C系列语言的差异总结（3）

与其他大部分编程语言不一样&#xff0c;Python使用空白符&#xff08;whitespace&#xff09;和缩进来标识代码块。也就是说&#xff0c;循环体、else条件从句之类的构成&#xff0c;都是由空白符加上冒号(:)来确定的。大部分编程语言都是使用某种大括号来标识代码块的。下面的…...

编程日记 2026/4/2 13:46:31

OpenCV（9）：视频处理

1 介绍 视频是由一系列连续的图像帧组成的&#xff0c;每一帧都是一幅静态图像。视频处理的核心就是对这些图像帧进行处理。常见的视频处理任务包括视频读取、视频播放、视频保存、视频帧处理等。 视频分析: 通过视频处理技术&#xff0c;可以分析视频中的运动、目标、事件等。…...

编程日记 2026/4/4 4:25:43

【C++设计模式】观察者模式（1/2）：从基础到优化实现

1. 引言 在 C++ 软件与设计系列课程中，观察者模式是一个重要的设计模式。本系列课程旨在深入探讨该模式的实现与优化。在之前的课程里，我们已对观察者模式有了初步认识，本次将在前两次课程的基础上，进一步深入研究，着重解决观察者生命周期问题，提升代码的安全性、灵活性…...

编程日记 2026/4/5 10:12:40

2025年华为手机解锁BL的方法

注&#xff1a;本文是我用老机型测试的&#xff0c;新机型可能不适用 背景 华为官方已经在2018年关闭了申请BL解锁码的通道&#xff0c;所以华为手机已经无法通过官方获取解锁码。最近翻出了一部家里的老手机华为畅玩5X&#xff0c;想着能不能刷个系统玩玩&#xff0c;但是卡…...

编程日记 2026/3/30 16:32:17

在 CentOS 7.9上部署 Oracle 11.2.0.4.0 数据库

目录 在 CentOS 7.9上部署 Oracle 11.2.0.4.0 数据库引言安装常见问题vim粘贴问题 环境情况环境信息安装包下载 初始环境准备关闭 SELinux关闭 firewalld 安装前初始化工作配置主机名安装依赖优化内核参数限制 Oracle 用户的 Shell 权限配置 PAM 模块配置swap创建用户组与用户,…...

编程日记 2026/3/27 14:00:23

idea里的插件spring boot helper 如何使用，有哪些强大的功能，该如何去习惯性的运用这些功能

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…...

编程日记 2025/11/27 11:27:23

Docker 搭建 Redis 数据库

Docker 搭建 Redis 数据库 前言一、准备工作二、创建 Redis 容器的目录结构三、启动 Redis 容器1. 通过 redis.conf 配置文件设置密码2. 通过 Docker 命令中的 requirepass 参数设置密码 四、Host 网络模式与 Port 映射模式五、检查 Redis 容器状态六、访问 Redis 服务总结 前言…...

编程日记 2025/7/1 4:58:39

JAVAweb之过滤器，监听器

文章目录 过滤器认识生命周期FilterConfigFilterChain过滤器执行顺序应用场景代码 监听器认识ServletContextListenerHttpSessionListenerServletRequestListener代码 过滤器 认识 Java web三大组件之一&#xff0c;与Servlet相似。过滤器是用来拦截请求的&#xff0c;而非处…...

编程日记 2025/10/4 19:31:32

计算机毕业设计SpringBoot+Vue.js足球青训俱乐部管理系统(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2026/4/4 2:05:58

基于 DeepSeek LLM 本地知识库搭建开源方案(AnythingLLM、Cherry、Ragflow、Dify)认知

写在前面 博文内容涉及 基于 Deepseek LLM 的本地知识库搭建使用 ollama 部署 Deepseek-R1 LLM知识库能力通过 Ragflow、Dify 、AnythingLLM、Cherry 提供理解不足小伙伴帮忙指正 &#x1f603;,生活加油 我站在人潮中央&#xff0c;思考这日日重复的生活。我突然想&#xff0c…...

编程日记 2026/3/24 4:53:28

QSplashScreen --软件启动前的交互

目录 QSplashScreen 类介绍 使用方式 项目中使用 THPrinterSplashScreen头文件 THPrinterSplashScreen实现代码 使用代码 使用效果 QSplashScreen 类介绍 QSplashScreen 是 Qt 中的一个类&#xff0c;用于显示启动画面。它通常在应用程序启动时显示&#xff0c;以向用户显…...

编程日记 2026/3/25 17:35:46

「软件设计模式」责任链模式（Chain of Responsibility）

深入解析责任链模式&#xff1a;用C打造灵活的请求处理链 引言&#xff1a;当审批流程遇上设计模式 在软件系统中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个请求需要经过多个处理节点的判断&#xff0c;每个节点都有权决定是否处理或传递请求。就像企业的请假审批…...

编程日记 2026/4/5 17:18:01

蓝桥杯嵌入式客观题以及解释

第十一届省赛&#xff08;大学组&#xff09; 1.稳压二极管时利用PN节的反向击穿特性制作而成 2.STM32嵌套向量终端控制器NVIC具有可编程的优先等级 16 个 3.一个功能简单但是需要频繁调用的函数&#xff0c;比较适用内联函数 4.模拟/数字转换器的分辨率可以通过输出二进制…...

编程日记 2026/4/5 1:47:37

你对WebAssembly的看法是什么？

WebAssembly&#xff08;Wasm&#xff09;是一种新兴的技术&#xff0c;旨在通过提供一种新的低级字节码格式来提高 Web 应用程序的性能和效率。它与 JavaScript 互补&#xff0c;使得开发者可以将其他编程语言&#xff08;如 C、C、Rust 等&#xff09;编译为高效的字节码&…...

编程日记 2026/4/2 18:41:50

Qt在Linux嵌入式开发过程中复杂界面滑动时卡顿掉帧问题分析及解决方案

Qt在Linux嵌入式设备开发过程中&#xff0c;由于配置较低&#xff0c;加上没有GPU&#xff0c;我们有时候会遇到有些组件比较多的复杂界面&#xff0c;在滑动时会出现掉帧或卡顿的问题。要讲明白这个问题还得从CPU和GPU的分工说起。 一、硬件层面核心问题根源剖析 CPU&#x…...

编程日记 2026/2/15 8:01:19

vscode 版本

vscode官网 Visual Studio Code - Code Editing. Redefined 但是官网只提供最新 在之前的版本就要去github找了 https://github.com/microsoft/vscode/releases 获取旧版本vscode安装包的方法_vscode 老版本-CSDN博客...

编程日记 2026/2/15 17:56:35

low rank decomposition如何用于矩阵的分解

1. 什么是矩阵分解和低秩分解 矩阵分解是将一个矩阵表示为若干结构更简单或具有特定性质的矩阵的组合或乘积的过程。低秩分解&#xff08;Low Rank Decomposition&#xff09;是其中一种方法&#xff0c;旨在将原矩阵近似为两个或多个秩较低的矩阵的乘积&#xff0c;从而降低复…...

编程日记 2026/3/27 14:00:43

C# string转unicode字符

在 C# 中&#xff0c;将字符串转换为 Unicode 字符&#xff08;即每个字符的 Unicode 码点&#xff09;可以通过遍历字符串中的每个字符并获取其 Unicode 值来实现。Unicode 值是一个整数&#xff0c;表示字符在 Unicode 标准中的唯一编号。 以下是实现方法&#xff1a; 1. 获…...

编程日记 2026/2/24 17:28:07