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

CSS知识总结

news 来源：原创 2025/8/25 0:13:19

一、CSS核心概念解析

1.1 选择器体系（重点）

基础选择器：

/* ID选择器 */
#header { background: #333; }/* 类选择器 */
.btn-primary { color: white; }/* 属性选择器 */
input[type="text"] { border: 1px solid #ccc; }

组合选择器（难点）：

/* 后代选择器 */
article p { line-height: 1.6; }/* 子元素选择器 */
ul > li { list-style: none; }/* 相邻兄弟选择器 */
h2 + p { margin-top: 0; }

重点提示：选择器优先级计算规则（ID(100) > Class(10) > Element(1)）

1.2 盒模型（核心考点）

.box {width: 300px;padding: 20px;border: 5px solid #f00;margin: 10px;box-sizing: border-box; /* 切换盒模型 */
}

标准盒模型（W3C Box Model）

┌──────────────────────────────┐
|          margin-top          |
| ┌──────────────────────────┐ |
| |        border-top        | |
| | ┌──────────────────────┐ | |
| | |      padding-top     | | |
| | | ┌──────────────────┐ | | |
| | | |                  | | | |
| | | |     CONTENT      | | | |
| | | |                  | | | |
| | | └──────────────────┘ | | |
| | |      padding-bottom  | | |
| | └──────────────────────┘ | |
| |       border-bottom      | |
| └──────────────────────────┘ |
|         margin-bottom        |
└──────────────────────────────┘

计算公式：
元素总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

IE盒模型（传统盒模型）

┌──────────────────────────────┐
|          margin-top          |
| ┌──────────────────────────┐ |
| |        border-top        | |
| | ┌──────────────────────┐ | |
| | |      padding-top     | | |
| | | ┌──────────────────┐ | | |
| | | |                  | | | |
| | | |  CONTENT(width)  | | | |
| | | |                  | | | |
| | | └──────────────────┘ | | |
| | |      padding-bottom  | | |
| | └──────────────────────┘ | |
| |       border-bottom      | |
| └──────────────────────────┘ |
|         margin-bottom        |
└──────────────────────────────┘

计算公式：
元素总宽度 = width（已包含padding和border） + margin-left + margin-right

关键差异对照表

特性	标准盒模型	IE盒模型
width定义范围	仅内容区域	内容+padding+border
元素实际尺寸	width+padding+border	直接等于width值
常用场景	现代浏览器默认	旧版IE浏览器
切换方式	`box-sizing: content-box`	`box-sizing: border-box`

代码验证示例

/* 标准盒模型 */
.standard-box {box-sizing: content-box;width: 200px;padding: 20px;border: 5px solid red;margin: 10px;/* 总宽度 = 200 + 20*2 + 5*2 + 10*2 = 270px */
}/* IE盒模型 */
.ie-box {box-sizing: border-box;width: 200px;padding: 20px;border: 5px solid blue;margin: 10px;/* 总宽度 = 200 + 10*2 = 220px */
}

易错点警示

1.尺寸计算陷阱
现代浏览器默认使用标准盒模型，若未显式设置box-sizing，当添加padding/border时会导致元素意外膨胀

2.全局重置建议
最佳实践常在CSS初始化时设置：

* {box-sizing: border-box; /* 统一使用IE盒模型 */margin: 0;padding: 0;
}

3.百分比计算基准
在标准盒模型中，子元素的width: 50%基于父级内容区域计算，在IE盒模型中则基于父级border-box区域

调试技巧

1.浏览器开发者工具中，通过盒模型可视化工具检查各层尺寸：

[开发者工具示例图描述]
Elements面板 -> Computed选项卡 -> Box Model示意图
（蓝色：content | 绿色：padding | 棕色：border | 橙色：margin）

2.快速检测代码：

.debug-box {outline: 1px solid red; /* 不占空间的边框 */background-clip: content-box;background-color: rgba(0,0,255,0.1);
}

1.3 定位体系

.position-demo {position: relative; /* 相对定位 */top: 10px;left: 20px;
}.fixed-header {position: fixed; /* 固定定位 */top: 0;z-index: 100;
}

布局难点：

绝对定位元素的包含块判定
z-index层叠上下文创建条件

二、现代布局技术深度解析

2.1 Flex布局（重点）

.container {display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;
}.item {flex: 1 0 200px;order: 2; /* 调整显示顺序 */
}

典型应用场景：

等分布局
垂直居中
响应式导航栏

2.2 Grid布局（未来趋势）

.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px;grid-template-areas:"header header header""sidebar main main";
}.header { grid-area: header; }

重点对比：

特性	Flex	Grid
维度	一维	二维
对齐方式	基于轴线	基于单元格
适用场景	线性布局	复杂网格布局

三、响应式设计核心技术

3.1 媒体查询

@media (max-width: 768px) {.container {flex-direction: column;}.sidebar {display: none;}
}

3.2 相对单位系统

.responsive-text {font-size: clamp(1rem, 2vw, 1.5rem);width: min(90%, 1200px);padding: calc(10px + 1%);
}

核心公式：
视窗单位换算：1vw = 1%视窗宽度

四、CSS动画与性能优化

4.1 过渡动画

.btn-hover {transition: all 0.3s ease-in-out;transform: scale(1);
}.btn-hover:hover {transform: scale(1.05);opacity: 0.9;
}

4.2 关键帧动画

@keyframes slideIn {from {transform: translateX(-100%);}to {transform: translateX(0);}
}.slide-element {animation: slideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

性能优化要点：

优先使用transform和opacity
避免触发重排属性
使用will-change预声明

五、实战案例分析

5.1 经典三栏布局

.layout-container {display: grid;grid-template-columns: 200px 1fr 200px;min-height: 100vh;
}@media (max-width: 768px) {.layout-container {grid-template-columns: 1fr;}
}

5.2 瀑布流布局实现

.masonry-grid {column-count: 3;column-gap: 20px;
}.grid-item {break-inside: avoid;margin-bottom: 20px;
}

六、练习题与答案

题目1：实现垂直居中

要求：使用至少3种不同方法实现元素垂直居中

参考答案：

/* 方法1：Flex */
.container {display: flex;align-items: center;justify-content: center;
}/* 方法2：Grid */
.container {display: grid;place-items: center;
}/* 方法3：绝对定位 */
.parent {position: relative;
}
.child {position: absolute;top: 50%;transform: translateY(-50%);
}

七、常见陷阱与最佳实践

7.1 典型错误

/* 错误示例：选择器优先级冲突 */
#content .text {} /* 权重111 */
.text.important {} /* 权重20 */

7.2 代码规范建议

使用BEM命名规范
避免超过3层的选择器嵌套
优先使用简写属性

总结提升路线图

精通盒模型与定位体系
掌握Flex/Grid现代布局
深入理解渲染原理
持续跟进CSS新特性

延伸学习：

CSS自定义属性（变量）
容器查询（Container Queries）
层叠层（@layer）

通过系统学习和持续实践，结合开发者工具的调试分析，逐步建立完整的CSS知识体系。建议每周完成一个综合布局练习，并参与CodePen等平台的代码挑战。

CSS知识总结

一、CSS核心概念解析 1.1 选择器体系（重点） 基础选择器： /* ID选择器 */ #header { background: #333; }/* 类选择器 */ .btn-primary { color: white; }/* 属性选择器 */ input[type"text"] { border: 1px solid #ccc; } 组合…...

编程日记 2025/8/25 0:13:19

CRS 16 slot 设备硬件架构

目录 1. 核心组件 1.1 线路卡与物理接口模块 1.2 交换结构与容量 1.3 控制与管理 1.4 风扇与散热 1.5 电源与告警 2. 插槽编号与机箱布局 2.1 前侧（PLIM 面） 2.2 后侧（MSC 面） 2.3 插槽配对 1. 核心组件 1.1 线路卡与物…...

编程日记 2025/8/25 0:12:44

人工智能浪潮中Python的核心作用与重要地位

在人工智能（Artificial Intelligence，AI）蓬勃发展的时代，Python已然成为推动这一技术进步的关键编程语言。从复杂的机器学习算法实现，到前沿的深度学习模型构建，再到智能系统的部署，Python无处不…...

编程日记 2025/8/25 0:10:18

【了解】数字孪生网络（Digital Twin Network，DTN）

目录一、为什么？二、是什么？三、什么架构？四、如何应用？参考一、为什么？ 一方面，网络负载不断增加,，网络规模持续扩大带来的网络复杂性，使得网络的运行和维护变得越来越复杂。另一…...

编程日记 2025/8/25 0:10:17

[C语言]第一章-初识

目录一.引言二.MinGW 下载与安装 1.什么是 MinGW 2.下载 MinGW 3.安装 MinGW 4.配置 MinGW 环境变量三.VS Code 下载与安装 1.什么是 VS Code 2.下载 VS Code 3.安装 VS Code 4.汉化 5.安装扩展插件 C/C 截图四.编写并运行 Hello World 程序代码解释运行…...

编程日记 2025/8/24 22:30:10

如何用git将项目上传到github

步骤 1.创建仓库 2.记下仓库的url 3.在本地初始化仓库路径要在项目下 cd /path/to/your/vue-project git init 4.创建touch .gitignore文件在项目根目录下创建 .gitignore 文件，用于指定 Git 忽略哪些文件或文件夹 5.添加和提交项目文件将文件提交到版本控…...

编程日记 2025/8/25 0:12:13

C++入门(上)--《Hello C++ World!》（1）(C/C++)

文章目录前言命名空间域命名空间的用法 C的输入和输出缺省参数函数重载auto关键字(C11)范围for 前言 C不是C# C兼容大部分C的东西，但不是完全(98%的样子，除非遇到了不兼容的，那就记一下，不然就认为自己在C里面写的那些可以写到C里…...

编程日记 2025/8/25 0:12:42

架构思维：构建高并发读服务_基于流量回放实现读服务的自动化测试回归方案

文章目录引言一、升级读服务架构，为什么需要自动化测试？二、自动化回归测试系统：整体架构概览三、日志收集1. 拦截方式2. 存储与优化策略3. 架构进化四、数据回放技术实现关键能力五、差异对比对比方式灵活配置六、三种回放模式详解1. 离…...

编程日记 2025/8/25 0:12:44

代码随想录第33天：动态规划6（完全背包基础）

一、完全平方数（Leetcode 279） 本题与“零钱兑换”基本一致。 1.确定dp数组以及下标的含义 dp[j]：和为j的完全平方数的最少数量为dp[j] 2.确定递推公式 dp[j] 可以由dp[j - i * i]推出， dp[j - i * i] 1 便可以凑成dp[j]。 …...

编程日记 2025/8/25 0:12:11

Android控件View、ImageView、WebView用法

一控件清单 View、ImageView、WebView 二控件UI代码 <?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app=&qu…...

编程日记 2025/8/23 1:00:06

关于浏览器页面自动化操作

Selenium 是一个用于自动化浏览器操作的强大框架，广泛应用于Web应用程序的测试自动化。它主要由以下几个核心组件组成： Selenium WebDriver： WebDriver 是 Selenium 的核心组件，它提供了一组API，允许开发者编写程序来…...

编程日记 2025/8/25 0:07:56

P5739 计算阶乘详解

此题目，对于会递归的很简单很简单，但作者是野人不会，只能是边刷边学，且题解比较有意思，所有我这次的重心不是题目，而是题解里面创作者展示的不一样的东西，先看题目题目要求不用for循环&#xf…...

编程日记 2025/8/25 0:07:56

把Android设备变成“国标摄像头”：GB28181移动终端实战接入指南

把Android设备变成“国标摄像头”：GB28181移动终端实战接入指南 ——执法记录仪、巡检终端、布控球，如何通过大牛直播SDK直接挂到GB28181平台？ 在过去，GB28181 通常用于固定摄像头、NVR等“设备端”。但在政务、安防、应急等行业…...

编程日记 2025/8/25 0:09:40

机器学习项目流程极简入门：从数据到部署的完整指南

前言本文将通过一个简单案例（根据水果外观特征判断是否为橘子），逐步拆解机器学习项目的完整流程，帮助读者掌握从数据收集到模型部署的全流程方法论。通常，一个完整的机器学习项目可以分为以下几个步骤： …...

编程日记 2025/8/23 10:20:01

PrivKV: Key-Value Data Collection with Local Differential Privacy论文阅读

文献阅读课需要制作ppt但是感觉选的这篇论文都是公式，决定做点动画直观展示一下。还没有完成会继续更新这个笔记 manim动画代码需要下载ffmpeg下载latex https://docs.manim.org.cn/getting_started/installation.html ffmpeg下载教程 texlive官网但是其实不需要…...

编程日记 2025/8/23 13:40:03

RViz（机器人可视化工具）的配置文件（moveitcpp）

1. Panels（面板设置） 面板是RViz界面中的各个功能区域，用于显示和操作不同的数据。 Displays（显示面板） Class: rviz_common/Displays 指定面板的类型，这里是显示面板。 Help Height: 78 帮助区域的高度…...

编程日记 2025/8/24 16:59:23

kotlin 01flow-StateFlow 完整教程

一 Android StateFlow 完整教程：从入门到实战 StateFlow 是 Kotlin 协程库中用于状态管理的响应式流，特别适合在 Android 应用开发中管理 UI 状态。本教程将带全面了解 StateFlow 的使用方法。 1. StateFlow 基础概念 1.1 什么是 StateFlow? StateF…...

编程日记 2025/8/23 20:40:03

OpenGl实战笔记（1）基于qt5.15.2+mingw64+opengl绘制三角形

一、实现效果二、实现原理 （1）各函数作用与原理 initialize() 作用： 初始化 OpenGL 函数（initializeOpenGLFunctions()） 设置背景清除颜色为 rgba(0.2, 0.3, 0.4, 1.0)。原理： initializeOpenGLFunctio…...

编程日记 2025/8/23 2:30:26

S100平台调试RS485/RS232

提供一个C语言的测试程序Demo #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h>...

编程日记 2025/8/23 13:20:14

蓝桥杯 19. 植树

植树题目描述小明和朋友们一起去郊外植树，他们带了一些在实验室中精心研究出的小树苗。一共有 n 个人，每个人挑选了一个适合植树的位置，一共 n 个位置。每人准备在自己的位置种下一棵树苗。但他们遇到一个问题：有的树苗比…...

编程日记 2025/8/23 19:40:02

Spring Boot 中 @Bean 注解详解：从入门到实践

在 Spring Boot 开发中，Bean注解是一个非常重要且常用的注解，它能够帮助开发者轻松地将 Java 对象纳入 Spring 容器的管理之下，实现对象的依赖注入和生命周期管理。对于新手来说，理解并掌握Bean注解，是深入学习 Spring…...

编程日记 2025/8/22 5:49:59

git项目迁移，包括所有的提交记录和分支 gitlab迁移到gitblit

之前git都是全新项目上传，没有迁移过，因为迁移的话要考虑已有项目上的分支都要迁移过去，提交记录能迁移就好；分支如果按照全新项目上传的方式需要新git手动创建好老git已有分支，在手动一个一个克隆老项目分支代码依次提…...

编程日记 2025/8/21 2:30:03

前端面试每日三题 - Day 25

这是我为准备前端/全栈开发工程师面试整理的第25天每日三题练习，涵盖了： CSS中如何实现一个保持宽高比的自适应正方形元素Angular的变更检测（Change Detection）机制项目实战 - 设计一个微前端架构的前端应用。 ✅ 题目1&#xff…...

编程日记 2025/8/21 18:43:23

基于windows安装MySQL8.0.40

基于windows安装MySQL8.0.40 基于windows 安装 MySQL8.0.40，解压文件到D:\mysql-8.0.40-winx64 在D:\mysql-8.0.40-winx64目录下创建my.ini文件，并更新一下内容 [client] #客户端设置，即客户端默认的连接参数 # 设置mysql客户端连接服务…...

编程日记 2025/8/21 18:43:21

基于机器学习算法预测二手车市场数据清洗与分析平台（源码+定制+讲解）基于Python的数据挖掘与可视化二手车数据处理与分析系统开发 (机器学习算法预测）

博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台…...

编程日记 2025/8/23 5:48:51

【神经网络与深度学习】普通自编码器和变分自编码器的区别

引言自编码器（Autoencoder，AE）和变分自编码器（Variational Autoencoder，VAE）是深度学习中广泛应用的两类神经网络结构，主要用于数据的压缩、重构和生成。然而，二者在模型设计、训练…...

编程日记 2025/8/21 18:43:17

【现代深度学习技术】现代循环神经网络07：序列到序列学习（seq2seq）

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈PyTorch深度学习 ⌋ ⌋ ⌋ 深度学习 (DL, Deep Learning) 特指基于深层神经网络模型和方法的机器学习。它是在统计机器学习、人工神经网络等算法模型基础上，结合当代大数据和大算力的发展而发展出来的。深度学习最重…...

编程日记 2025/8/21 18:43:14

【Linux我做主】进度条小程序深度解析

Linux下C语言进度条程序深度解析进度条小程序GitHub地址前言前置知识回车换行（CR/LF）的深度解析历史渊源与技术规范在进度条/倒计时中的应用缓冲区机制的全面剖析缓冲区引入缓冲类型对比进度条开发中的关键控制进度条实现以小见大——倒计时倒计时最…...

编程日记 2025/8/21 16:45:49

Vue项目安全实践指南：从输入验证到状态管理的全方位防护

一、项目背景在Vue2项目开发过程中，我们遇到了一些需要优化的安全实践问题。本文将分享我们在项目中的一些安全优化经验，希望能帮助到其他开发者。主要优化点： 输入输出安全处理请求安全防护数据存储安全路由访问控制文件上传处理表单数…...

编程日记 2025/8/21 20:08:12

Pinocchio导入URDF关节为continuous的问题及详细解释

视频讲解： Pinocchio导入URDF关节为continuous的问题及详细解释仓库地址：GitHub - LitchiCheng/mujoco-learning 问题背景：打算测试将之前的panda的urdf换成so-arm100的urdf，发现pinocchio的代码不能用，很奇怪&#…...

编程日记 2025/8/21 18:43:12

《Python星球日记》第30天：Flask数据库集成

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏：《Python星球日记》，限时特价订阅中ing 目录一、数据库…...

编程日记 2025/8/22 19:44:03

GAF-CNN-SSA-LSSVM故障诊断/分类预测，附带模型研究报告（Matlab）

GAF-CNN-SSA-LSSVM故障诊断/分类预测，附带模型研究报告（Matlab） 目录 GAF-CNN-SSA-LSSVM故障诊断/分类预测，附带模型研究报告（Matlab）效果一览基本描述程序设计参考资料效果一览基本描述本研究提出的GA…...

编程日记 2025/8/21 12:34:33

轻松养生：让健康融入生活

养生不是负担，而是可以轻松融入日常的生活方式。掌握以下要点，就能开启健康之旅。清晨醒来，先喝一杯常温水，唤醒沉睡的肠胃。早餐选择富含膳食纤维的燕麦片搭配新鲜水果，补充能量又促进消化。午餐和晚餐做到荤素搭配&…...

编程日记 2025/8/24 1:57:06

工业主义与民主的兴衰：历史逻辑与未来危机

一、工业主义催生大众民主的机制经济基础变革非技术工人崛起：工业革命后，机器生产替代传统手工业，非熟练工人（包括妇女、儿童）收入提升，财富分配趋于平等，形成新兴中产阶级。政府财政能力增…...

编程日记 2025/8/23 20:05:01

从代码学习深度学习 - 目标检测前置知识(二) PyTorch版

文章目录前言一、多尺度目标检测1.1 多尺度锚框1.2 绘图工具函数 (`utils_for_huitu.py`)1.3 可视化多尺度锚框1.4 多尺度检测（理论）二、自定义目标检测数据集2.1 读取数据2.2 创建 Dataset 类2.3 创建 DataLoader2.4 验证数据加载2.5 可视化数据集样本总结前言大家好！欢…...

编程日记 2025/8/21 11:45:22

什么是“系统调用”

一、什么是“系统调用”？用生活中的比喻理解可以把“系统调用”比作你（用户）向“管理员”请求帮助完成某件事情的过程。举个例子： 你想借书，去图书馆（操作系统）找管理员（内核&a…...

编程日记 2025/8/21 18:43:04

代码异味（Code Smell）识别与重构指南

1、引言：什么是“代码异味”？在软件开发中，“代码异味（Code Smell）”是指那些虽然不会导致程序编译失败或运行错误，但暗示着潜在设计缺陷或可维护性问题的代码结构。它们是代码演进过程中的“信号灯”，提示我们某段代码可能需要优化。 1.1 ✅ 为什么关注代码异味？预…...

编程日记 2025/8/21 18:43:02

005-nlohmann/json 基础方法-C++开源库108杰

《二、基础方法》：节点访问、值获取、显式 vs 隐式、异常处理、迭代器、类型检测、异常处理……一节课搞定C处理JSON数据85%的需求…… JSON 字段的简单类型包括：number、boolean、string 和 null（即空值）；复杂类型则有…...

编程日记 2025/8/21 18:43:00

java学习之数据结构：四、树（代码补充）

这部分主要是用代码实现有序二叉树、树遍历、删除节点目录 1.构建有序二叉树 1.1原理 1.2插入实现 2.广度优先遍历--队列实现 3.深度优先遍历--递归实现 3.1先序遍历 3.2中序遍历 3.3后序遍历 4.删除 4.1删除叶子节点 4.2删除有一棵子树的节点 4.3删除有两棵子树的节…...

编程日记 2025/8/21 4:20:37