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

【CSS】样式与效果

news 来源：原创 2025/6/30 9:20:50

在这里插入图片描述

个人主页：Guiat
归属专栏：HTML CSS JavaScript

在这里插入图片描述

文章目录

1. CSS盒模型
- 1.1 盒模型基础
- 1.2 盒模型类型
- - 1.2.1 标准盒模型
  - 1.2.2 IE盒模型
2. CSS选择器
- 2.1 基本选择器
- 2.2 组合选择器
- 2.3 伪类和伪元素
3. CSS布局技术
- 3.1 Flexbox布局
- 3.2 Grid布局
- 3.3 定位
4. CSS过渡与动画
- 4.1 过渡
- 4.2 动画
5. 响应式设计
- 5.1 媒体查询
- 5.2 视口单位
6. CSS变量
7. CSS预处理器
- 7.1 Sass/SCSS
- 7.2 Less
8. CSS优化技巧
- 8.1 选择器优化
- 8.2 简写属性
- 8.3 减少重绘和回流

正文

1. CSS盒模型

1.1 盒模型基础

盒模型是CSS布局的基础，由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。

.box {width: 300px;height: 200px;padding: 20px;border: 1px solid black;margin: 30px;
}

1.2 盒模型类型

1.2.1 标准盒模型

在标准盒模型中，元素的宽度和高度只包括内容区域。

.standard-box {box-sizing: content-box; /* 默认值 */width: 300px; /* 仅内容区域宽度 */
}

1.2.2 IE盒模型

在IE盒模型中，元素的宽度和高度包括内容、内边距和边框。

.ie-box {box-sizing: border-box;width: 300px; /* 包括内容区域、内边距和边框 */
}

2. CSS选择器

2.1 基本选择器

/* 元素选择器 */
p { color: blue; }/* 类选择器 */
.highlight { background-color: yellow; }/* ID选择器 */
#header { font-size: 24px; }/* 通用选择器 */
* { margin: 0; padding: 0; }

2.2 组合选择器

/* 后代选择器 */
article p { line-height: 1.6; }/* 子元素选择器 */
ul > li { list-style-type: square; }/* 相邻兄弟选择器 */
h2 + p { font-weight: bold; }/* 通用兄弟选择器 */
h2 ~ p { color: gray; }

2.3 伪类和伪元素

/* 伪类 */
a:hover { text-decoration: underline; }
li:first-child { font-weight: bold; }/* 伪元素 */
p::first-line { font-variant: small-caps; }
p::before { content: "➤ "; }

3. CSS布局技术

3.1 Flexbox布局

Flexbox提供了一种更有效的方式来布局、对齐和分配容器中项目之间的空间。

.container {display: flex;justify-content: space-between;align-items: center;
}.item {flex: 1;margin: 5px;
}

3.2 Grid布局

Grid布局允许开发者创建二维网格布局系统。

.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px;
}.grid-item {grid-column: span 2;
}

3.3 定位

CSS定位允许你精确控制元素的位置。

.relative {position: relative;top: 20px;left: 30px;
}.absolute {position: absolute;top: 50px;right: 10px;
}.fixed {position: fixed;bottom: 0;width: 100%;
}

4. CSS过渡与动画

4.1 过渡

CSS过渡允许元素在不同状态之间平滑地改变。

.button {background-color: blue;transition: background-color 0.3s ease;
}.button:hover {background-color: darkblue;
}

4.2 动画

CSS动画使用@keyframes规则来创建动画序列。

@keyframes slide-in {0% {transform: translateX(-100%);}100% {transform: translateX(0);}
}.animated {animation: slide-in 1s ease forwards;
}

5. 响应式设计

5.1 媒体查询

媒体查询允许根据设备特性应用不同的样式。

/* 桌面设备 */
@media (min-width: 992px) {.container {width: 970px;}
}/* 平板设备 */
@media (min-width: 768px) and (max-width: 991px) {.container {width: 750px;}
}/* 移动设备 */
@media (max-width: 767px) {.container {width: 100%;}
}

5.2 视口单位

视口单位基于视口的尺寸，适合响应式设计。

.hero {height: 100vh; /* 视口高度的100% */width: 100vw; /* 视口宽度的100% */
}.text {font-size: 5vw; /* 视口宽度的5% */
}

6. CSS变量

CSS变量(自定义属性)提供了在整个文档中重用值的能力。

:root {--primary-color: #3498db;--secondary-color: #2ecc71;--font-size-base: 16px;
}.button {background-color: var(--primary-color);font-size: var(--font-size-base);
}.highlight {color: var(--secondary-color);
}

7. CSS预处理器

7.1 Sass/SCSS

Sass为CSS添加了变量、嵌套、混合等高级功能。

$primary-color: #3498db;.navbar {background-color: $primary-color;ul {display: flex;li {margin: 0 10px;a {color: white;&:hover {text-decoration: underline;}}}}
}

7.2 Less

Less是另一种流行的CSS预处理器，语法与CSS更接近。

@primary-color: #3498db;.button {background-color: @primary-color;&:hover {background-color: darken(@primary-color, 10%);}
}

8. CSS优化技巧

8.1 选择器优化

/* 避免 */
body .content article .title { color: red; }/* 推荐 */
.content-title { color: red; }

8.2 简写属性

/* 避免 */
.element {margin-top: 10px;margin-right: 20px;margin-bottom: 10px;margin-left: 20px;
}/* 推荐 */
.element {margin: 10px 20px;
}

8.3 减少重绘和回流

/* 避免 */
.box {width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;border: 1px solid black;
}/* 推荐 */
.box {transform: translate(50px, 50px);width: 100px;height: 100px;position: absolute;border: 1px solid black;
}

结语
感谢您的阅读！期待您的一键三连！欢迎指正！

在这里插入图片描述

【CSS】样式与效果

个人主页：Guiat 归属专栏：HTML CSS JavaScript 文章目录 1. CSS盒模型1.1 盒模型基础1.2 盒模型类型1.2.1 标准盒模型1.2.2 IE盒模型 2. CSS选择器2.1 基本选择器2.2 组合选择器2.3 伪类和伪元素 3. CSS布局技术3.1 Flexbox布局3.2 Grid布局3.3 定位 4. …...

编程日记 2025/6/30 9:20:50

Python中常用网络编程模块

学习籽料在下方自拿一、网络基础网络由下往上分为：物理层、数据链路层、网络怪、传输层、会话层、表示层和应用层。 TCP/IP协议是传输层协议，主要解决数据如何在网络中传输；socket则是对TCP/IP协议的封装，它本身不是协议&…...

编程日记 2025/6/29 16:33:09

1.定时任务的时候一定要加--preload，防止 --preload gunicorn --config gunicorn-conf.py --preload index:app 2.source /usr/local/nginx/html/prod/pypd/venv/bin/activate 启动linux的python环境 3.pip freeze > requirements.txt 生成所有依赖 4.p…...

编程日记 2025/6/28 7:17:04

OpenIPC开源FPV之Adaptive-Link信号干扰

OpenIPC开源FPV之Adaptive-Link信号干扰 1. 源由2. 现象3. 分析3.1 冲突弃包3.2 传输丢包 4. 逻辑4.1 可调整参数4.2 可监测参数4.3 逻辑思路 5. 总结6. 参考资料 1. 源由虽然，OpenIPC作为FPV图传在延时方面使用广播wfb-ng，性能上已经非常棒了。在权…...

编程日记 2025/6/28 3:36:17

C++ 结构体与函数

一.结构体 1.概念： 结构体（struct）是一种用户自定义复合数据类型，其中可以包含不同类型的不同成员 2.结构体的应用场景： 我们在使用多个变量描述一个对象时，虽然也可以做到，但是难免显得杂乱…...

编程日记 2025/6/28 4:48:02

【Java全栈】Java + Vue 项目框架与运行流程详解

文章目录 ⭐前言⭐一、框架介绍🌟1、后端框架（Java Spring Boot）🌟2、前端框架（Vue 3 Element Plus） ⭐二、项目结构🌟1、后端目录（Spring Boot）🌟2、前端目…...

编程日记 2025/6/30 1:36:57

JAVA：利用 JSONPath 操作JSON数据的技术指南

1、简述 JSONPath 是一种强大的工具，用于查询和操作 JSON 数据。类似于 SQL 的语法，它为处理复杂的 JSON 数据结构提供了简单且高效的解决方案。✨ 代码样例：https://gitee.com/lhdxhl/springboot-example.git 本文将介绍 JSONPath 的基本…...

编程日记 2025/6/30 8:49:29

5.2.1 WPF 通过ItemControl自己做柱状图

1. 最终效果如下图： 1.1 准备数据 ViewModel public class PrimaryItemModel{public double Value { get; set; }public string XLabel { get; set; }}public class MainViewModel{public ObservableCollection<PrimaryItemModel> PrimaryList { get; set; }…...

编程日记 2025/6/27 13:41:22

3.31 代码随想录第三十一天打卡

1049.最后一块石头的重量II (1)题目描述: (2)解题思路: class Solution { public:int lastStoneWeightII(vector<int>& stones) {vector<int> dp(15001, 0);int sum 0;for (int i 0; i < stones.size(); i) sum stones[i];int target sum / 2;for (in…...

编程日记 2025/6/29 18:22:54

基于网启PXE服务器的批量定制系统平台

一.项目背景公司新购了一批服务器和台式机，需要为台式机和服务器安装系统，一部分需要安装国产OpenEuler，一部分要求安装CentOS 7.9，同时也要满足定制化需求，即按要求分区安装相应软件。二.项目环境安装win10/11 …...

编程日记 2025/6/30 8:52:08

Unity光线传播体积(LPV)技术实现详解

一、LPV技术概述光线传播体积(Light Propagation Volumes)是一种实时全局光照技术，通过将场景中的间接光信息存储在3D网格中，实现动态物体的间接光照效果。核心优势： 实时性能：相比传统光照贴图，支持动态场景硬件…...

编程日记 2025/6/29 23:00:55

蓝桥杯备考---》贪心算法之矩阵消除游戏

我们第一次想到的贪心策略一定是找出和最大的行或者列来删除，每次都更新行和列比如如图这种情况，这种情况就不如直接删除两行的多，所以本贪心策略有误 so我们可以枚举选的行的情况，然后再贪心的选择列和最大的列来做 #include …...

编程日记 2025/6/28 1:21:24

python+playwright 学习-93 结合pands 抓取网页表格数据

playwright 结合 pands 抓取网页表格数据 pandas 直接抓取网页表格数据 web 网页表格数据 """ 上海 202501 天气抓取 """ import pandas as pddf = pd.read_html(fhttp://www.tianqihoubao.com/lishi/shanghai/month/202501.html,encoding...

编程日记 2025/6/30 8:16:55

MVC编程

MVC基本概述例子——显示本地文件系统结构先分别拖入ListView,TableView,TreeView 然后在进行布局在widget.cpp 结果 mock测试 1，先加入json测试对象 2.创建后端目录 3，在src添加新文件在models文件夹里在mybucket.h,添加测试用例的三个字段 4.在…...

编程日记 2025/6/30 1:59:17

51单片机总结

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难，但我还是想去做！ 本文写于：2025.03.31 51单片机学习总结（有感而发） 一、总结结语一、总结一路…...

编程日记 2025/6/30 8:59:02

端到端语音识别案例

《DeepSeek大模型高性能核心技术与多模态融合开发（人工智能技术丛书）》(王晓华)【摘要书评试读】- 京东图书语音识别这一技术正如其名，是通过精密地解析说话人的语音来识别并准确转写出其所说的内容。它不仅仅是一个简单的转录过程&#…...

编程日记 2025/6/30 4:38:30

iOS自定义collection view的page size(width/height)分页效果

前言想必大家工作中或多或少会遇到下图样式的UI需求吧像这种cell长度不固定，并且还能实现的分页效果UI还是很常见的实现我们这里实现主要采用collection view，实现的方式是自定义一个UICollectionViewFlowLayout的子类，在这个类里对…...

编程日记 2025/6/30 9:15:40

CI/CD基础知识

什么是CI/CD CI：持续集成，开发人员频繁地将代码集成到主干（主分支）中每次集成都通过自动化构建和测试来验证，从而尽早发现集成错误，常用的CI工具包括Jenkins、Travis CI、CircleCI、GitLab CI等 CD&#…...

编程日记 2025/6/30 9:09:59

MySQL 的 SQL 语句执行顺序

MySQL 的 SQL 语句执行顺序并不完全按照代码的书写顺序执行，而是遵循一套固定的逻辑流程 1. FROM 和 JOIN 作用：确定查询的数据来源，包括表和它们的连接方式（如 INNER JOIN, LEFT JOIN 等）。细节： 先执行…...

编程日记 2025/6/27 7:28:00

Dubbo（21）如何配置Dubbo的注册中心？

在分布式系统中，注册中心是一个关键组件，用于服务的注册和发现。Dubbo 支持多种注册中心，包括 ZooKeeper、Nacos、Consul、Etcd 等。下面详细介绍如何配置 Dubbo 的注册中心，以 ZooKeeper 为例。配置步骤引入依赖：…...

编程日记 2025/6/29 11:39:50

AISEO中的JSON 如何部署？

一、JSON 是什么？ JSON（JavaScript Object Notation） 是一种轻量级的数据格式，用于在不同系统之间传递结构化信息。它的核心特点是： 易读：用简单的 {键: 值} 对表示数据，例如： json…...

编程日记 2025/6/28 1:22:46

力扣hot100——最长连续序列（哈希unordered_set）

题目链接：最长连续序列 1、错解：数组做哈希表（内存超出限制） int longestConsecutive(vector<int>& nums) {vector<bool> hash(20000000010, false);for(int i0; i<nums.size();i){hash[1000000000nums[i]]t…...

编程日记 2025/6/30 1:13:48

几种常见的.NET单元测试模拟框架介绍

目录 1. Moq 2. NSubstitute 3. AutoFixture 4. FakeItEasy 总结对比单元测试模拟框架是一种在软件开发中用于辅助单元测试的工具。它的主要作用是创建模拟对象来替代真实对象进行测试。在单元测试中，被测试的代码可能依赖于其他组件或服务，如数…...

编程日记 2025/6/28 6:20:05

装饰器模式与模板方法模式实现MyBatis-Plus QueryWrapper 扩展

pom <dependency><groupId>com.github.yulichang</groupId><artifactId>mybatis-plus-join-boot-starter</artifactId>  </dependency>MPJLambdaWrapperX /*** 拓展 MyBatis Plus Join QueryWrapper 类&…...

编程日记 2025/6/28 4:04:30

11-SpringBoot3入门-整合aop

1、概念（个人理解） AOP（Aspect Oriented Programming），面向切面编程。 1）切面（Aspect）：提供切入连接点的方法 2）连接点（Joinpoint）…...

编程日记 2025/6/30 8:42:58

naive_admin项目实战03 基于Go语言的后端

01.使用Goland打开项目 02.使用Goland连接MySQL 03.执行SQL脚本 set names utf8mb4; set foreign_key_checks 0;-- ---------------------------- -- table structure for permission -- ---------------------------- drop table if exists permission; create table permiss…...

编程日记 2025/6/29 6:32:21

基于卷积神经网络的眼疾识别系统，resnet50，efficentnet（pytorch框架，python代码）

更多图像分类、图像识别、目标检测、图像分割等项目可从主页查看功能演示： 眼疾识别系统resnet50，efficentnet，卷积神经网络（pytorch框架，python代码）_哔哩哔哩_bilibili （一）简介…...

编程日记 2025/6/28 1:22:15

Python数据可视化-第1章-数据可视化与matplotlib

环境开发工具 VSCode库的版本 numpy1.26.4 matplotlib3.10.1 ipympl0.9.7教材本书为《Python数据可视化》一书的配套内容，本章为第1章数据可视化与matplotlib 本文主要介绍了什么是数据集可视化，数据可视化的目的，常见的数据可视化方式…...

编程日记 2025/6/28 3:17:46

Ansible playbook-ansible剧本

一.playbook介绍便于功能的重复使用本质上就是文本文件，一般都是以.yml结尾的文本文件。 1.遵循YAML语法 1.要求同级别代码要有相同缩进，建议4个空格。【同级别代码是同一逻辑的代码】在计算机看来空格和Tob键是两个不同的字符。 2.一个键对应一…...

编程日记 2025/6/28 5:58:28

UDP网络通信

UDP网络通信： 步骤1 创建套接字： #include <sys/types.h> #include <sys/socket.h>int socket(int domain, int type, int protocol);参数一 domain： AF_UNIX Local communication unix(7) 本地通信 AF_INET IPv4 Inte…...

编程日记 2025/6/29 8:34:01

【学习笔记】计算机网络（六）

第6章应用层文章目录第6章应用层6.1 域名系统DNS6.1.1 域名系统概述6.1.2 互联网的域名结构6.1.3 域名服务器域名服务器的分区管理DNS 域名服务器的层次结构域名服务器的可靠性域名解析过程-两种查询方式DNS 高速缓存机制 6.2 文件传送协议6.2.1 FTP 概述6.2.2 FTP 的基本工作…...

编程日记 2025/6/28 7:08:13

RK3588使用笔记：系统算法依赖库安装

一、前言嵌入式设备随着需求的提升，不再仅仅只只运行个单机程序那么简单了，社会发展设备升级，都会逐步引用人工智能，涉及到算法模型，这里基础的部分就是算法环境的安装，有的算法是C，大部分算法…...

编程日记 2025/6/28 4:04:48

数据结构C语言练习(单双链表)

本篇练习题(单链表)： 1.力扣 203. 移除链表元素 2.力扣 206. 反转链表 3.力扣 876. 链表的中间结点 4.力扣 21. 合并两个有序链表 5. 牛客链表分割算法详解 6.牛客链表回文结构判断 7. 力扣 160. 相交链表 8. 力扣 141 环形链表 9. 力扣 142 环形链表 II…...

编程日记 2025/6/28 2:54:57

Linux驱动开发中断处理

目录序言 1.中断的概念 2.如何使用中断中断处理流程中断上下文限制屏蔽中断/使能关键区别与选择上半部中断下半部中断软中断（SoftIRQ） 小任务(Tasklet) 工作队列（Workqueue） 线程 IRQ（Threaded IRQ…...

编程日记 2025/6/28 3:13:24

C++ set map

1.set和map是什么 set和map是 C STL 提供的容器，用于高效的查找数据，底层采用红黑树实现，其中set是Key模型，map是Key-Value模型 set和map的基本使用较为简单，这里不再叙述，直接进入实现环节 2.set和map的…...

编程日记 2025/6/28 1:22:27

Vue2和Vue3响应式的基本实现

目录简介Vue2 响应式Vue2 响应式的局限性 Vue3 响应式Vue3 响应式的优点 Vue2 和 Vue3 响应式对比简介在 Vue 框架中，数据的响应式是其核心特性之一。当页面数据发生变化时，我们希望界面能自动更新，而不是手动操作 DOM。这就需要对数据进…...

编程日记 2025/6/27 18:53:06

PyQt6实例_批量下载pdf工具_界面开发

目录前置： 代码： 视频： 前置： 1 本系列将以 “PyQt6实例_批量下载pdf工具”开头，放在【PyQt6实例】专栏 2 本系列涉及到的PyQt6知识点： 线程池：QThreadPool,QRunnable； 信号…...

编程日记 2025/6/28 5:31:15

FOC 控制笔记【三】磁链观测器

一、磁链观测器基础 1.1 什么是磁链磁链（magnetic linkage）是电磁学中的一个重要概念，指导电线圈或电流回路所链环的磁通量。单位为韦伯（Wb），又称磁通匝。公式为： 线圈匝数穿过单匝数的…...

编程日记 2025/6/28 6:20:27

前端Material-UI面试题及参考答案

目录 Material-UI 的设计理念与 Material Design 规范的关系是什么？如何通过 npm/yarn/pnpm 安装 Material-UI 的核心依赖？ Material-UI 的默认主题系统如何实现全局样式管理？如何在项目中配置自定义字体和颜色方案？什么是 emotion 和 styled-components，它们在 Ma…...

编程日记 2025/6/27 15:30:42

【LeetCode基础算法】链表所有类型

1. 遍历链表二进制链表转整数找出临界点之间的最小和最大距离 2. 删除节点移除链表元素从链表中移除在数组中存在的节点删除排序链表中的重复元素删除排序链表中的重复元素 II 3. 插入节点在链表中插入最大公约数计算最大公约数的内置函数gcd(a,b)，也可以m…...

编程日记 2025/6/27 15:31:03

备赛蓝桥杯之第十六届模拟赛第1期职业院校组第五题：回忆画廊

提示：本篇文章仅仅是作者自己目前在备赛蓝桥杯中，自己学习与刷题的学习笔记，写的不好，欢迎大家批评与建议由于个别题目代码量与题目量偏大，请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题&#xff0…...

编程日记 2025/6/28 5:50:33

51 驱动 INA219 电流电压功率测量

文章目录一、INA219简介二、引脚功能三、寄存器介绍1.配置寄存器 0x002.分流电压寄存器 0x013.总线电压寄存器 0x024.功率寄存器 0x035.电流寄存器 0x046.基准寄存器 0x05 四、IIC 时序说明1.写时序2.读时序五、程序六、实验现象1.线路图2.输出数据一、INA219简介 INA219是…...

编程日记 2025/6/29 8:39:59

JavaScript弹出框的使用：对话框、确认框、提示框、弹窗操作

关于 Window对象和 Document 对象的详细使用，系列文章：《Window对象的常用属性和方法》《Document对象的常用属性和方法：getElementById()、getElementsByName()、createElement()方法》《Document获取元素并修改内容：getElementById()方法、value属性、innerHTML属性、…...

编程日记 2025/6/28 5:29:23

【设计模式】深入解析设计模式：门面模式（外观模式）的定义、优点和代码实现

门面模式（外观模式） SLF4J是门面模式的典型应用（但不仅仅使用了门面模式）。门面模式定义门面模式（Facade Pattern）又称为外观模式，提供了一个统一的接口，用来访问子系统中的一群…...

编程日记 2025/6/28 4:02:43

UE5学习笔记 FPS游戏制作34 触发器切换关卡

文章目录搭建关卡制作触发器传送门显示加载界面搭建关卡首先搭建两个关卡，每个关卡里至少要有一个角色制作触发器传送门 1 新建一个蓝图，父类为actor，命名为portal（传送门） 2 为portal添加一个staticMesh&#…...

编程日记 2025/6/30 1:13:48

UE5学习笔记 FPS游戏制作26 UE中的UI

文章目录几个概念创建一个UI蓝图添加UI获取UI的引用切换设计器和UI蓝图将UI添加到游戏场景锚点轴点slotSizeToContent三种UI数据更新方式(Text、Image)函数绑定属性绑定事件绑定九宫格分割图片按钮设置图片绑定按下事件下拉框创建添加数据修改样式常用函数滚动框创建添加数…...

编程日记 2025/6/28 4:39:39

Spring Boot分布式项目重试实战：九种失效场景与正确打开方式

在分布式系统架构中，网络抖动、服务瞬时过载、数据库死锁等临时性故障时有发生。本文将通过真实项目案例，深入讲解Spring Boot项目中如何正确实施重试机制，避免因简单粗暴的重试引发雪崩效应。以下是使用Mermaid语法绘制的重试架构图和决策…...

编程日记 2025/6/28 5:09:29

首个物业plus系列展 2025上海国际智慧物业博览会开幕

AI赋能服务升级！首个“物业plus”系列展 2025上海国际智慧物业博览会盛大开幕 3月31日，2025上海国际智慧物业博览会（简称“上海物博会”）在上海新国际博览中心N4馆隆重开幕。本届展会由广州旭杨国际展览有限公司主办&#xff0c…...

编程日记 2025/6/28 4:20:45

《C++多线程下单例 “锁钥” 法则》

一、概述本文章介绍了一段 C 代码，该代码实现了在多线程环境下的单例模式。单例模式确保一个类只有一个实例，并提供全局访问点。在多线程场景中，需要额外的同步机制来保证单例对象创建的线程安全性。单例模式在许多场景中都有重要应用&#…...

编程日记 2025/6/28 6:31:48

WEB或移动端常用交互元素及组件 | Axure / 元件类型介绍（表单元件、菜单和表格、流程元件、标记元件）

文章目录引言I Axure / 元件类型介绍基本元件表单元件菜单和表格流程元件标记元件II Axure 基础Axure / 常用功能介绍Axure / 常用元素实例Axure / 动态交互实例Axure / 常用设计分辨率推荐III Axure / 创建自己的元件库元件库作用元件库的创建及使用引言 I Axure / 元件类型介…...

编程日记 2025/6/27 11:05:26

文章目录

1. CSS盒模型

1.1 盒模型基础

1.2 盒模型类型

1.2.1 标准盒模型

1.2.2 IE盒模型

2. CSS选择器

2.1 基本选择器

2.2 组合选择器

2.3 伪类和伪元素

3. CSS布局技术

3.1 Flexbox布局

3.2 Grid布局

3.3 定位

4. CSS过渡与动画

4.1 过渡

4.2 动画

5. 响应式设计

5.1 媒体查询

5.2 视口单位

6. CSS变量

7. CSS预处理器

7.1 Sass/SCSS

7.2 Less

8. CSS优化技巧

8.1 选择器优化

8.2 简写属性

8.3 减少重绘和回流

相关文章：