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

CSS从入门到精通：全面解析CSS核心知识体系

article 2025/9/29 5:32:50

引言

CSS（层叠样式表）是前端开发的基石，掌握其核心知识能显著提升页面设计与布局能力。本文基于系统化学习资料，深入讲解CSS语法、选择器优先级、盒子模型、定位等核心概念，结合代码示例与实用技巧，助你从入门到进阶！

引言

一、CSS基础与历史

1.1 CSS简介

1.2 CSS版本演进

二、CSS引入方式与基础语法

2.1 三种引入方式

三、引入CSS的三种方式及最佳实践

3.1 行间样式

3.2 内部样式

3.3 外部样式（推荐）

最佳实践：

四、CSS选择器详解与高效使用

4.1 基础选择器

4.2 组合选择器

4.3 伪类与伪元素

五、CSS布局核心：传统与现代方案

5.1 传统布局方案

浮动布局：

定位布局：

5.2 现代布局方案

六、深入CSS盒子模型

6.1 盒子模型组成

切换盒模型：

6.2 外边距合并问题

七、行内、块级与行内块元素对比

转换元素类型：

八、总结与资源推荐

一、CSS基础与历史

1.1 CSS简介

CSS用于描述HTML/XML文档的呈现样式，实现了结构与样式的分离。通过CSS，开发者可轻松控制字体、颜色、布局等，提升代码可维护性。

1.2 CSS版本演进

版本	发布时间	特点
CSS1	1996年12月	基础样式功能
CSS2	1998年5月	支持定位与媒体查询
CSS2.1	2004年6月	修正版，广泛兼容
CSS3	未正式发布	模块化设计，功能增强

二、CSS引入方式与基础语法

2.1 三种引入方式

行间样式：通过标签的style属性直接添加。

<div style="width: 100px; height: 100px; background: red;"></div>

内部样式：在<style>标签中定义样式。

<style>  div { width: 100px; height: 100px; }  
</style>

外部样式：通过<link>引入外部CSS文件（推荐）。

<link rel="stylesheet" href="style.css">

三、引入CSS的三种方式及最佳实践

3.1 行间样式

直接在HTML标签中通过style属性定义样式，适用于快速调试或局部样式覆盖，但会导致HTML与CSS耦合，不推荐大规模使用。

<div style="color: red; font-size: 16px;">行间样式示例</div>

3.2 内部样式

在HTML的<style>标签内编写CSS，适合单页面开发，但复用性差。

<head>  <style>  .title {  color: blue;  text-align: center;  }  </style>  
</head>

3.3 外部样式（推荐）

通过<link>引入外部CSS文件，实现样式与结构分离，便于维护和复用。

<head>  <link rel="stylesheet" href="styles.css">  
</head>

最佳实践：

模块化拆分：按功能或组件拆分CSS文件（如header.css、footer.css）。
预处理器：使用Sass/Less增强CSS功能，如变量、嵌套等。

四、CSS选择器详解与高效使用

4.1 基础选择器

类型	语法	示例	用途
元素选择器	`tag`	`p { color: red; }`	选中所有指定标签
类选择器	`.class`	`.btn { padding: 8px; }`	复用样式类
ID选择器	`#id`	`#header { height: 60px; }`	唯一元素样式（慎用）

4.2 组合选择器

后代选择器：div p { }（选中div内所有p标签）。
子选择器：div > p { }（仅选中直接子元素）。
相邻兄弟选择器：h1 + p { }（选中紧接h1后的第一个p）。

4.3 伪类与伪元素

伪类：定义元素特殊状态，如:hover、:nth-child(n)。

a:hover { color: orange; }  
li:nth-child(2n) { background: #f0f0f0; }

伪元素：创建虚拟元素，如::before、::after。

.quote::before {  content: "“";  color: gray;  
}

五、CSS布局核心：传统与现代方案

5.1 传统布局方案

浮动布局：

.left { float: left; width: 30%; }  
.right { float: right; width: 70%; }  
.clearfix::after { content: ""; display: block; clear: both; }

定位布局：

.modal {  position: fixed;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  
}

5.2 现代布局方案

Flexbox：单维度布局（行或列），适合组件对齐。

.container {  display: flex;  justify-content: space-between;  align-items: center;  
}

Grid：二维网格布局，适合复杂页面结构。

.grid {  display: grid;  grid-template-columns: 1fr 2fr 1fr;  gap: 20px;  
}

六、深入CSS盒子模型

6.1 盒子模型组成

标准盒模型：width/height仅包含内容区域。
IE盒模型：width/height包含内容+内边距+边框。

切换盒模型：

.box {  box-sizing: border-box; /* 推荐：更易控制尺寸 */  
}

6.2 外边距合并问题

垂直相邻元素：上下外边距会合并为较大值。
解决方案：使用padding或border隔开。

七、行内、块级与行内块元素对比

特性	行内元素（inline）	块级元素（block）	行内块元素（inline-block）
宽高设置	不支持	支持	支持
默认宽度	由内容决定	父元素100%	由内容决定
换行显示	同行显示（除非换行）	独占一行	同行显示
典型标签	`<span>`, `<a>`, `<em>`	`<div>`, `<p>`, `<ul>`	`<img>`, `<input>`

转换元素类型：

.inline-to-block { display: block; }  
.block-to-inline { display: inline; }  
.inline-to-inline-block { display: inline-block; }

八、总结与资源推荐

核心要点：掌握选择器优先级、盒子模型、布局方案是CSS进阶的关键。
学习建议：通过Chrome开发者工具调试样式，理解渲染机制。
扩展阅读：
- Flexbox完全指南
- CSS Grid布局实战

CSS从入门到精通：全面解析CSS核心知识体系

引言 CSS（层叠样式表）是前端开发的基石，掌握其核心知识能显著提升页面设计与布局能力。本文基于系统化学习资料，深入讲解CSS语法、选择器优先级、盒子模型、定位等核心概念，结合代码示例与实用技巧，助你从入…...

编程日记 2025/9/25 9:52:41

基于ESP32控制的机器人摄像头车

DIY Wi-Fi 控制的机器人摄像头车：从零开始的智能探索之旅在当今科技飞速发展的时代，机器人技术已经逐渐走进了我们的生活。今天，我将带你一起探索如何制作一个 Wi-Fi 控制的机器人摄像头车，它不仅可以远程操控，还能通…...

编程日记 2025/9/26 18:01:36

基于STM32的LCD信号波形和FFT频谱显示

一、项目准备主要利用LCD驱动中的画点和画连线函数，驱动是正点原子给我写好了的画点和画线的函数等些相关函数 void LCD_Draw_Circle(u16 x0,u16 y0,u8 r); //画圆 void LCD_DrawLine(u16 x1, u16 y1, u16 x2, u16 y2); //画线二、画波形图函数实…...

编程日记 2025/9/20 1:05:25

（9）被宏 QT_DEPRECATED_VERSION_X_6_0(“提示内容“) 修饰的函数，在 Qt6 中使用时，会被编译器提示该函数已过时

（1）起因是看到 Qt 的官方源代码里有这样的写法： #if QT_DEPRECATED_SINCE(6, 0) //里面的都是废弃的成员函数QT_WARNING_PUSHQT_WARNING_DISABLE_DEPRECATEDQT_DEPRECATED_VERSION_X_6_0("Use the constructor taking a QMetaType inst…...

编程日记 2025/9/21 4:31:15

关于mac配置hdc(鸿蒙)

关于mac配置hdc(鸿蒙) 在最开始配置的hdc -v时候老是出现格式不匹配于是乎在网上找官网也不行，最后在csdn上找到了这篇文章Mac配置hdc才有的头绪环境变量的问题自己做一个简单的总结首先在访达里面打开ide 打开之后输入下面的命令，一步一步的找…...

编程日记 2025/9/20 1:05:08

是 OpenCV 的 CUDA 模块中用于在 GPU 上对图像或矩阵进行转置操作函数cv::cuda::transpose

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 cv::cuda::transpose 是 OpenCV 的 CUDA 模块中的一个函数，用于在 GPU 上对图像或矩阵进行转置操作（Transpose&#xff0…...

编程日记 2025/9/19 7:27:06

SQL常用操作大全：复制表、跨库查询、删除重复数据

大家好，欢迎来到程序视点！我是你们的老朋友.小二！ SQL常用操作精华总结表结构与数据操作复制表结构： SELECT * INTO b FROM a WHERE 1<>1 (SQL Server专用) SELECT TOP 0 * INTO b FROM a (更通用) 拷贝表数据&#…...

编程日记 2025/9/25 11:20:15

服务器中存储空间不足该怎么办？

服务器作为存储数据信息的重要网络设备，随着企业业务的不断拓展，所需要存储的数据信息也在不断增加，最终会导致服务器中存储空间不足，这不仅会影响到服务器系统性能，还会造成业务无法正常执行，那么&#xf…...

编程日记 2025/7/6 3:25:57

PPT图表怎么制作？说5款自己使用过的PPT图表制作工具

PPT图表怎么制作？准备一份吸引人的PPT演示文稿时，图表往往能起到画龙点睛的作用。但是，对于很多人来说，制作既美观又专业的图表却不是一件容易的事情。今天，我们就来聊聊如何利用一些优秀的工具制作PPT图表。 1、亿图图…...

编程日记 2025/9/20 1:04:56

[传输层]TCP协议

文章目录报文格式连接管理可靠传输面向连接的传输层协议每一条TCP连接只能有两个端点，每一条TCP连接只能是点对点的 TCP提供可靠有序，不丢不重 TCP是面向字节流的 TCP工作模型： 发送方有一个缓存，缓存： 1.待发送 2…...

编程日记 2025/9/20 1:04:49

Linux（1）编译链接和gcc

1、gcc分布编译链接 （1）预编译 gcc -E main.c -o main.i （2）编译 gcc -S main.i -o main.s （3）汇编 gcc -c main.s -o main.o （4）链接 gcc main.o -o main 执行&#xff1a…...

编程日记 2025/9/27 20:38:35

视频编解码学习7之视频编码简介

视频编码技术发展历程与主流编码标准详解视频编码技术是现代数字媒体领域的核心技术之一，它通过高效的压缩算法大幅减少了视频数据的体积，使得视频的存储、传输和播放变得更加高效和经济。从早期的H.261标准到最新的AV1和H.266/VVC，视频编码…...

编程日记 2025/9/25 19:55:29

LeetCode 热题 100 19. 删除链表的倒数第 N 个结点

LeetCode 热题 100 | 19. 删除链表的倒数第 N 个结点大家好，今天我们来解决一道经典的链表问题——删除链表的倒数第 N 个结点。这道题在 LeetCode 上被标记为中等难度，要求删除链表的倒数第 n 个结点，并返回链表的头结点。问题描述给你…...

编程日记 2025/6/18 3:09:19

【Java ee初阶】网络编程 UDP socket

网络编程 socket api 是传输层提供的api。 UDP 无连接，不可靠传输，面向数据报，全双工。 TCP 有链接，可靠传输，面向字节流，全双工。 UDP socket api 数据报 DatagrammSocket 代表了操作系统中的socket文…...

编程日记 2025/9/23 4:24:47

旅游推荐数据分析可视化系统算法

旅游推荐数据分析可视化系统算法本文档详细介绍了旅游推荐数据分析可视化系统中使用的各种算法，包括推荐算法、数据分析算法和可视化算法。目录推荐算法基于用户的协同过滤推荐基于浏览历史的推荐主题推荐算法亲子游推荐算法文化游推荐算法自然风光推荐算法…...

编程日记 2025/9/20 1:04:35

贪吃蛇撞墙和想不开咬死自己 #include <curses.h> #include <stdlib.h> struct snake{ int hang; int lie; struct snake *next; }; struct snake food; struct snake *head; struct snake *tail; int key; int dir; #define UP 1 #define DOWN -1 …...

编程日记 2025/9/20 1:04:30

使用PhpStudy搭建Web测试服务器

一、安装PhpStudy 从以下目录下载PhpStudy安装文件 Windows版phpstudy下载 - 小皮面板(phpstudy) (xp.cn) 安装成功之后打开如下界面点击启动Apache 查看网站地址在浏览器中输入localhost:88,出现如下页面就ok了二、与Unity交互 1.配置下载文件路径，点击…...

编程日记 2025/9/20 1:04:27

c语言第一个小游戏：贪吃蛇小游戏06

实现贪吃蛇四方向的风骚走位实现代码 #include <curses.h> #include <stdlib.h> struct snake{ int hang; int lie; struct snake *next; }; struct snake *head; struct snake *tail; int key; int dir; //全局变量 #define UP 1 //这个是宏定义&a…...

编程日记 2025/9/20 1:04:22

Qt应用程序启动时的一些思路：从单实例到性能优化的处理方案

程序启动时优化的价值在桌面软件开发领域，应用程序的启动过程就像音乐的序曲，决定了用户对软件品质的第一印象。比如首次启动等待超过3秒时，会让大多数用户产生负面看法，而专业工具软件的容忍阈值甚至更低。Qt框架作为跨平台开发…...

编程日记 2025/9/20 1:04:17

【前端三剑客】Ajax技术实现前端开发

目录一、原生AJAX 1.1AJAX 简介 1.2XML 简介 1.3AJAX 的特点 1.3.1AJAX 的优点 1.3.2AJAX 的缺点 1.4AJAX 的使用 1.4.1核心对象 1.4.2使用步骤 1.4.3解决IE 缓存问题 1.4.4AJAX 请求状态二、jQuery 中的AJAX 2.1 get 请求 2.2 post 请求三、跨域 3.1同源策略…...

编程日记 2025/6/24 1:56:03

一文详解Spring Boot如何配置日志

一、写在前面对于日志文件，相信大家都并不陌生，通过在关键位置打印相关的日志，有利于快速跟踪和定位软件系统运行中存在的问题。在之前的 Java 实现日志记录的文章中，我们介绍了能实现日志记录的主流框架有 Log4j、Log4j2、Lo…...

编程日记 2025/9/20 1:04:13

Springboot | 如何上传文件

文章目录 1. 核心上传逻辑：FileUploadController2. 使文件系统中的文件可通过 HTTP 访问：WebConfig3. 安全性配置：WebSecurityConfig4. 前端实现（这里用的是Angular） 在许多应用程序开发中，我们经常需要实现…...

编程日记 2025/9/20 1:04:10

axios结合AbortController取消文件上传

<template><div><input type"file" multiple change"handleFileUpload" /><button click"cancelUpload" :disabled"!isUploading">取消上传</button><div>总进度：{{ totalProgress }}…...

编程日记 2025/9/18 18:00:21

spring中的@Async注解详解

一、核心功能与作用 Async 是Spring框架提供的异步方法执行注解，用于将方法标记为异步任务，使其在独立线程中执行，从而提升应用的响应速度和吞吐量。其主要作用包括： 非阻塞调用：主线程调用被标记方法后立即返回&…...

编程日记 2025/9/24 7:13:18

MyBatis 报错：Column count doesn‘t match value count at row 1 详解与解决

本文适用于使用 MyBatis MySQL 开发中出现 “Column count doesnt match value count at row 1” 报错的朋友，尤其是在批量插入或更新数据时，遇到 XML 映射文件中 insert 标签报错的问题。一、遇到的问题： 二、错误原因分析列数与值数量不…...

编程日记 2025/9/24 4:45:16

第四天——贪心算法——种花

1. 题目有一个花坛，其中0 表示该位置是空的，可以种花。1 表示该位置已经有花，不能种花。规则：新种的花不能种在相邻的位置（即如果某个位置已经种了花，它的左右两个相邻位置不能再种花）。给定…...

编程日记 2025/6/25 16:07:32

【人工智能】自然语言编程革命：腾讯云CodeBuddy实战5步搭建客户管理系统，效率飙升90%

CodeBuddy 导读一、产品介绍1.1 **什么是腾讯云代码助手？**1.2 插件安装1.2.1 IDE版本要求1.2.2 注意事项1.2.4 插件安装1.2.4.1 环境安装1.2.4.2 安装腾讯云AI代码助手** 1.2.5 功能介绍1.2.5.1 Craft（智能代码生成）1.2.5.2 Chat&#xff08…...

编程日记 2025/9/25 20:50:08

麦肯锡110页PPT企业组织效能提升调研与诊断分析指南

“战略清晰、团队拼命、资源充足，但业绩就是卡在瓶颈期上不去……”这是许多中国企业面临的真实困境。表面看似健康的企业，往往隐藏着“组织亚健康”问题——跨部门扯皮、人才流失、决策迟缓、市场反应滞后……麦肯锡最新研究揭示：组织健康度…...

编程日记 2025/9/24 4:45:09

【MySQL】第二弹——MySQL表的增删改查(CRUD)初阶

文章目录 🎓一. CRUD🎓二. 新增(Create)🎓三. 查询(Rertieve)📖1. 全列查询📖2. 指定列查询📖3. 查询带有表达式📖4. 起别名查询(as )📖 5. 去重查询(distinct)📖6. 排序…...

编程日记 2025/9/24 4:45:06

内存、磁盘、CPU区别，Hadoop/Spark与哪个联系密切

1. 内存、磁盘、CPU的区别和作用 1.1 内存（Memory） 作用： 内存是计算机的短期存储器，用于存储正在运行的程序和数据。它的访问速度非常快，比磁盘快几个数量级。在分布式计算中，内存用于缓存中间结果、存储…...

编程日记 2025/5/19 17:02:16

引言

一、CSS基础与历史

1.1 CSS简介

1.2 CSS版本演进

二、CSS引入方式与基础语法

2.1 三种引入方式

三、引入CSS的三种方式及最佳实践

3.1 行间样式

3.2 内部样式

3.3 外部样式（推荐）

最佳实践：

四、CSS选择器详解与高效使用

4.1 基础选择器

4.2 组合选择器

4.3 伪类与伪元素

五、CSS布局核心：传统与现代方案

5.1 传统布局方案

浮动布局：

定位布局：

5.2 现代布局方案

六、深入CSS盒子模型

6.1 盒子模型组成

切换盒模型：

6.2 外边距合并问题

七、行内、块级与行内块元素对比

转换元素类型：

八、总结与资源推荐

相关文章：