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

CSS 日常开发常用属性总结

news 来源：原创 2025/9/11 1:20:38

文章目录

CSS 日常开发常用属性总结
- 一、常用 CSS 属性
- - 1、布局相关
  - - （1）display：
    - （2）position：
    - （3）float：
    - （4）clear：
  - 2、尺寸与溢出
  - - （1）width 和 height：
    - （2）max-width 和 max-height：
    - （3）overflow：
  - 3、文本样式
  - - （1）color：
    - （2）font-size：
    - （3）font-weight：
    - （4）text-align：
    - （5）text-decoration：
  - 4、背景与边框
  - - （1）background-color：
    - （2）background-image：
    - （3）background-repeat：
    - （4）background-position：
    - （5）background：
    - （6）border：
    - （7）border-radius：
  - 5、盒模型
  - - （1）padding：
    - （2）margin：
    - （3）box-sizing：
  - 6、图像处理
  - - （1）object-fit：
    - （2）object-position：
  - 7、动画与过渡
  - - （1）transition：
    - （2）animation：
    - （3）keyframes：
- 二、常用 CSS 技巧
- - 1、响应式设计
  - - （1）@media 媒体查询：
    - （2）视口单位：
    - （3）Flexbox 和 Grid：
  - 2、居中布局
  - - - （1）水平居中：
      - （2）垂直居中：
  - 3、Hover 效果
  - - （1）hover 状态：
    - （2）::after 和 ::beforeseudo-elements：
  - 4、视觉优化
  - - （1）阴影效果：
    - （2）圆角边框：
    - （3）文字阴影：
  - 5、CSS 预处理器
  - - （1）Sass/SCSS 和 Less：
    - （2）PostCSS：

CSS 日常开发常用属性总结

一、常用 CSS 属性

1、布局相关

（1）display：

block：元素占据一行，左右排列。
inline：元素在一行内排列，不能设置宽高。
inline-block：结合了 block 和 inline 的特性。
flex：弹性盒子布局，适合响应式设计。
grid：网格布局，适合复杂的二维 layouts。
none：隐藏元素，但空间保留。

（2）position：

static：默认值，元素在正常文档流中。
relative：相对定位，参照自身位置。
absolute：绝对定位，参照最近的绝对定位祖先。
fixed：固定定位，相对于视口。
sticky：粘性定位，结合了 relative 和 fixed。

（3）float：

left 或 right：元素漂浮到指定方向。
none：取消浮动。

（4）clear：

both：清除两边的浮动影响。
left 或 right：分别清除浮动。

2、尺寸与溢出

（1）width 和 height：

设置元素的宽度和高度。
可以使用百分数（%）、像素（px）或视口单位（vw、vh）。

（2）max-width 和 max-height：

设置元素的最大宽度和高度。

（3）overflow：

hidden：隐藏溢出内容。
scroll：显示滚动条。
auto：自动显示滚动条。
visible：显示溢出内容。

3、文本样式

（1）color：

设置文本颜色。
可以使用颜色名称、十六进制（#RRGGBB）或 RGB 值。

（2）font-size：

设置字体大小。
常用单位：px、em、rem。

（3）font-weight：

设置字体粗细。
常见值：400、700、bold（700）。

（4）text-align：

文本对齐方式：left、right、center、justify。

（5）text-decoration：

添加装饰效果：如 underline（下划线）、none（消除链接的默认下划线）。

4、背景与边框

（1）background-color：

设置背景颜色。
可以是颜色名称、十六进制或 RGB 值。

（2）background-image：

设置背景图片。
可以多个图片叠加，使用逗号分隔。

（3）background-repeat：

repeat：平铺。
no-repeat：不平铺。
repeat-x：只横向平铺。
repeat-y：只纵向平铺。

（4）background-position：

设置背景图片的位置。
可以是像素值或百分比。

（5）background：

简写属性，综合以上多个背景相关属性。

（6）border：

简写属性，用于设置边框的宽度、样式和颜色。
示例：border: 1px solid #333;

（7）border-radius：

设置边框圆角。
示例：border-radius: 5px; 或 50%（圆形）。

5、盒模型

（1）padding：

设置内边距。
简写或分开设置：padding-top、padding-right 等。

（2）margin：

设置外边距。
简写或分开设置：margin-top、margin-right 等。

（3）box-sizing：

content-box：默认，尺寸不包含 padding 和 border。
border-box：尺寸包含 padding 和 border。

6、图像处理

（1）object-fit：

fill：填充整个容器，可能变形。
contain：保持比例，适应容器。
cover：填充容器，保持比例，不显示完整图像。

（2）object-position：

设置图像在容器中的位置。

7、动画与过渡

（1）transition：

简写属性，用于设置过渡效果。
示例：transition: all 0.3s ease;

（2）animation：

简写属性，用于设置动画。
示例：animation: slide 3s infinitealternate;

（3）keyframes：

定义动画的具体步骤：

@keyframes slide {from { transform: translateX(0); }to { transform: translateX(100px); }
}

二、常用 CSS 技巧

1、响应式设计

（1）@media 媒体查询：

根据不同设备或屏幕尺寸应用不同的样式。

@media (max-width: 768px) {body {font-size: 14px;}
}

（2）视口单位：

vw：视口宽度的百分比。
vh：视口高度的百分比。
示例：width: 50vw;

（3）Flexbox 和 Grid：

弹性盒子和网格布局，适合响应式设计。

2、居中布局

（1）水平居中：

.container {width: 600px;margin: 0 auto;
}

（2）垂直居中：

.container {display: flex;align-items: center;justify-content: center;height: 100vh;
}

3、Hover 效果

（1）hover 状态：

.button:hover {background-color: #333;color: white;
}

（2）::after 和 ::beforeseudo-elements：

.tooltip:hover::after {content: '这是一个提示';position: absolute;top: 100%;left: 50%;transform: translateX(-50%);
}

4、视觉优化

（1）阴影效果：

.card {box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

（2）圆角边框：

.button {border-radius: 5px;
}

（3）文字阴影：

.title {text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

5、CSS 预处理器

（1）Sass/SCSS 和 Less：

支持变量、嵌套、模块化等功能，提高代码可维护性。
示例：Sass 变量。

$primary-color: #333;
.button {background-color: $primary-color;
}

（2）PostCSS：

通过插件提供更多功能，如自动补充浏览器前缀。

CSS 日常开发常用属性总结

文章目录 CSS 日常开发常用属性总结一、常用 CSS 属性1、布局相关（1）display：（2）position：（3）float：（4）clear： 2、尺寸与溢出&#x…...

编程日记 2025/9/11 1:20:38

Python 绘制迷宫游戏，自带最优解路线

1、需要安装pygame 2、上下左右移动，空格实现物体所在位置到终点的路线，会有虚线绘制。 import pygame import random import math# 迷宫单元格类 class Cell:def __init__(self, x, y):self.x xself.y yself.walls {top: True, right: True, botto…...

编程日记 2025/9/8 5:36:49

了解Java集合的概念和体系：Collection＜T＞、Collections与Stream的使用

学习目标本文知识是对集合层级的介绍，应用开发中实际使用的是他们的子级，感兴趣的小伙伴或者想深入了解有关Java集合知识的朋友可以选择阅读！ Stream的方法使用使用部分代码块内大多有两种实现方式，是为了更好的理解方法底层的代…...

编程日记 2025/9/8 11:56:56

扫描局域网可用端口

site: https://mengplus.top #SiliconFlow : 在Linux系统，你可以使用一个简单的Bash脚本来扫描局域网中可用的端口。这个脚本可以使用nmap工具来实现。nmap是一个强大的网络扫描工具，可以用来探测网络中的主机和端口。以下是一个简单的Bash脚本&#…...

编程日记 2025/9/11 0:44:05

算法分析 —— 《栈》

文章目录删除字符串中的所有相邻重复项题目描述：代码实现：代码解析： 比较含退格的字符串题目描述：代码实现：代码解析： [基本计算器 II](https://leetcode.cn/problems/remove-all-adjacent-duplicates-in-…...

编程日记 2025/9/5 20:32:18

693. 交替位二进制数

交替位二进制数题目描述尝试做法推荐做法题目描述给定一个正整数，检查它的二进制表示是否总是 0、1 交替出现：换句话说，就是二进制表示中相邻两位的数字永不相同。示例 1： 输入：n 5 输出：true 解释…...

编程日记 2025/9/10 9:51:04

uniapp中使用leaferui使用Canvas绘制复杂异形表格的实现方法

需求： 如下图，要实现左图的样式，先实现框架，文字到时候往里填就行了，原来的解决方案是想用css,html来实现，发现实现起来蛮麻烦的。我也没找到合适的实现方法，最后换使用canvas来实现&#xff…...

编程日记 2025/9/11 1:18:27

Java 反射（Reflection）的原理和应用

反射（Reflection）是 Java 语言的一项强大功能，它允许程序在运行时动态地获取类的信息，并且可以操作这些信息，如创建对象、调用方法、访问字段等。反射机制的核心在于 Java 的类加载机制和动态类型检查，使…...

编程日记 2025/9/6 18:58:13

Linux top 常用参数记录

top命令经常用来监控linux的系统状况，能实时显示系统中各个进程、线程的资源占用情况，是常用的性能分析工具。一些常用参数记录 top的使用方式 top [-d number] | top [-bnp] # 5s 更新一次 top -d 5# 进行2次top命令的输出结果 top -n 2# 查看进程的…...

编程日记 2025/9/11 1:20:37

hive之LEAD 函数详解

1. 函数概述 LEAD 是 Hive 中的窗口函数，用于获取当前行之后指定偏移量处的行的值。常用于分析时间序列数据、计算相邻记录的差异或预测趋势。 2. 语法 LEAD(column, offset, default) OVER ([PARTITION BY partition_column] [ORDER BY order_column [ASC|DESC]…...

编程日记 2025/9/9 3:30:10

Element Plus中el-tree点击的节点字体变色加粗

el-tree标签设置 <el-tree class"tree":data"treeData":default-expand-all"true":highlight-current"true"node-click"onTreeNodeClick"><!-- 动…...

编程日记 2025/9/4 20:26:42

.gitignore 设置后不见效的解决方法中，方案一就可以了

遇到的问题：你的 .gitignore 文件中包含了 unpackage/ 目录，但它不起作用的原因可能有以下几个： 1. 文件或目录已经被 Git 跟踪 .gitignore 只能忽略未被 Git 追踪的文件或目录。如果 unpackage/ 目录已经被提交到 Git 版本库中&#xff…...

编程日记 2025/9/6 20:43:37

git提交管理 scoop install nodejs # windows npm install --save-dev commitlint/config-conventional commitlint/cli # non-windows npm install --save-dev commitlint/{cli,config-conventional} # windows将commitlint.config.js修改为utf8编码, 默认utf16编码 echo &qu…...

编程日记 2025/9/7 0:54:22

DeepSeek八大组合软件，效率加倍

DeepSeek王炸组合：开启2025年高效工作与创意新时代在科技飞速发展的2025年，人工智能和各类工具的融合正不断重塑我们的工作与生活方式。DeepSeek作为一款强大的工具，与众多应用组成的王炸组合，展现出了令人瞩目的能力。今天&…...

编程日记 2025/9/11 1:20:37

TCP和UDP比较

以下是 TCP（传输控制协议） 和 UDP（用户数据报协议） 的详细对比，涵盖核心特性、应用场景及技术差异： 1. 核心特性对比特性TCPUDP连接方式面向连接（需三次握手建立连接）无连接&#…...

编程日记 2025/9/4 16:01:17

【实战篇】【深度解析DeepSeek：从机器学习到深度学习的全场景落地指南】

一、机器学习模型：DeepSeek的降维打击 1.1 监督学习与无监督学习的"左右互搏" 监督学习就像学霸刷题——给标注数据（参考答案）训练模型。DeepSeek在信贷风控场景中，用逻辑回归模型分析百万级用户数据，通过特征工程挖掘出"凌晨3点频繁申请贷款"这类魔…...

编程日记 2025/9/8 4:37:43

Postgresql高可用之Pacemaker+Corosync

简介 Pacemaker 是 ClusterLabs 开源高可用性集群堆栈的资源管理器。它协调配置、启动、监控和跨所有集群节点恢复相互关联的服务。在这套高可用架构用会用到Pacemaker、Corosync以下是对其功能作用的说明。 Corosync ：主要负责集群通信和成员管理，它用…...

编程日记 2025/9/9 0:31:41

智能成绩表

智能成绩表真题目录: 点击去查看 E 卷 100分题型题目描述小明来到学校当老师，需要将学生按考试总分或单科分数进行排名，你能帮帮他吗？输入描述第 1 行输入两个整数，学生人数 n 和科目数量 m。 0 < n < 1000 < m < 10第 2 行输入 m 个科目名称，彼此之…...

编程日记 2025/9/10 21:57:52

制作安装win10系统U盘详细步骤

https://www.microsoft.com/zh-cn/software-download/windows10 ①微软官方链接，下载工具 ②下载之后，点击鼠标右键用管理员身份运行 ③等待几分钟 ④出现许可条款点击接受 ⑤点击为另一台电脑安装介质，然后下一步 ⑥根据需要选择版本。体系…...

编程日记 2025/9/8 13:59:03

【RAG】Embeding 和 Rerank学习笔记

Q: 现在主流Embeding模型架构在RAG（Retrieval-Augmented Generation）系统中，嵌入模型（Embedding Model） 是检索阶段的核心组件，负责将查询（Query）和文档（Document&#…...

编程日记 2025/9/8 0:11:26

华为 Open Gauss 数据库在 Spring Boot 中使用 Flyway

db-migration：Flyway、Liquibase 扩展支持达梦（DM）、南大通用（GBase 8s）、OpenGauss 等国产数据库。部分数据库直接支持 Flowable 工作流。开源代码仓库 Github：https://github.com/mengweijin/db-migrat…...

编程日记 2025/9/7 14:46:31

B/B+树与mysql索引

数据结构操作网站：https://www.cs.usfca.edu/~galles/visualization/Algorithms.html B树算法平均最差空间O(n)O(n)搜索O(log n)O(log n)插入O(log n)O(log n)删除O(log n)O(log n) B树算法平均最差空间O(n)O(n)搜索O(log n)O(log n)插入O(log n)O(log n)删除O(…...

编程日记 2025/9/8 18:46:45

心智模式与企业瓶颈突破

“是环境限制了你，还是你的心智模式？” 当企业发展遇到瓶颈，我们习惯于找外部原因：经济不好、竞争加剧、资源不够、市场环境变化快可现实是，在同样的市场环境下，总有企业逆势增长，而有些企业只…...

编程日记 2025/9/7 20:50:01

介绍微信小程序中页面的生命周期函数和组件的生命周期函数

1.1 页面生命周期函数这些函数主要用于管理页面的显示和隐藏。 onLoad(options): 页面加载时触发，options 是页面路由参数，可以在这里初始化数据。每当用户进入该页面时都会调用这个函数。 onShow(): 页面显示时触发。每当页面从后台切换到前台时都会…...

编程日记 2025/9/10 14:23:39

网络运维学习笔记（DeepSeek优化版）009网工初级（HCIA-Datacom与CCNA-EI）路由理论基础与静态路由

文章目录路由理论基础核心概念路由表六要素路由选路原则加表规则选路优先级协议与参数常见协议号路由协议优先级对比网络架构基础AS（autonomous system，自治系统）路由分类静态路由(static routing)实验拓扑思科配置示例华为配置示例典型…...

编程日记 2025/9/7 22:53:12

基于微信小程序的疫情互助平台(源码+lw+部署文档+讲解)，源码可白嫖!

摘要时代在飞速进步，每个行业都在努力发展现在先进技术，通过这些先进的技术来提高自己的水平和优势，从2019年底新型冠状肺炎疫情的爆发以来，使很多工作的管理工作难度再上一层楼。为了在疫情期间能更好的维护信息管理&#xff0…...

编程日记 2025/9/8 16:53:28

【SRC实战】小游戏漏洞强制挑战

小游戏业务分析: 1、挑战成功加分，失败减分，存在段位机制，段位影响榜单排名 2、随机推荐挑战对象，随着等级升高不再推荐低等级玩家 3、玩家等级需要培养，培养需要道具，道具需要看广告/完成任务/付费 4、…...

编程日记 2025/9/5 17:03:10

阿里云轻量级服务器通过宝塔安装PgVector要点

设置环境变量： export PG_HOME/www/server/pgsql export LD_LIBRARY_PATH$LD_LIBRARY_PATH:/www/server/pgsql/lib export PG_CONFIG/www/server/pgsql/bin/pg_config export PGDATA/www/server/pgsql/data PATH$PATH:$HOME/.local/bin:$HOME/bin:$PG_HOME/bin ali…...

编程日记 2025/9/5 3:05:35

安装 Windows Docker Desktop - WSL问题

一、关联文章： 1、Docker Desktop 安装使用教程 2、家庭版 Windows 安装 Docker 没有 Hyper-V 问题 3、打开 Windows Docker Desktop 出现 Docker Engine Stopped 问题二、问题解析打开 Docker Desktop 出现问题，如下： Docker Desktop - WSL update failed An error o…...

编程日记 2025/9/9 14:06:58

基于SpringBoot和PostGIS的省域“地理难抵点（最纵深处）”检索及可视化实践

目录前言 1、研究背景 2、研究意义一、研究目标 1、“地理难抵点”的概念二、“难抵点”空间检索实现 1、数据获取与处理 2、计算流程 3、难抵点计算 4、WebGIS可视化三、成果展示 1、华东地区 2、华南地区 3、华中地区 4、华北地区 5、西北地区 6、西南地…...

编程日记 2025/9/11 0:20:36

神经网络之RNN和LSTM（基于pytorch-api）

1.RNN 1.1简介 RNN用于处理序列数据。在传统的神经网络模型中，是从输入层到隐含层再到输出层，层与层之间是全连接的，每层之间的节点是无连接的。但是这种普通的神经网络对于很多问题却无能无力。例如，你要预测句子的下一个单词是…...

编程日记 2025/9/8 18:55:35

16.3 LangChain Runnable 协议精要：构建高效大模型应用的核心基石

LangChain Runnable 协议精要：构建高效大模型应用的核心基石关键词：LCEL Runnable 协议、LangChain 链式开发、自定义组件集成、流式处理优化、生产级应用设计 1. Runnable 协议设计哲学与核心接口 1.1 协议定义与类结构 #mermaid-svg-PlmvpSDrEUrUGv2p {font-family:&quo…...

编程日记 2025/9/5 17:22:01

[操作系统] 文件的软链接和硬链接

文章目录引言硬链接（Hard Link）什么是硬链接？硬链接的特性硬链接的用途软链接（Symbolic Link）什么是软链接？软链接的特性软链接的用途软硬链接对比文件的时间戳实际应用示例使用硬链接节省备份空间用软链…...

编程日记 2025/9/10 10:59:26

【Python · PyTorch】循环神经网络 RNN（基础应用）

【Python PyTorch】循环神经网络 RNN（简单应用） 1. 简介2. 模拟客流预测（数据集转化Tensor）3.1 数据集介绍3.2 训练过程 3. 模拟股票预测（DataLoader加载数据集）3.1 IBM 数据集3.1.2 数据集介绍3.1.3 训练…...

编程日记 2025/9/10 12:17:29

Spring Boot 项目开发流程全解析

目录引言一、开发环境准备二、创建项目三、项目结构四、开发业务逻辑 1.创建实体类： 2.创建数据访问层（DAO）： 3.创建服务层（Service）： 4.创建控制器层（Controller&…...

编程日记 2025/9/10 13:52:37

基于互联网协议的诊断通信（DoIP）

1、ISO 13400标准和其他汽车网络协议标准有何不同？ ISO 13400 标准即 DoIP 协议标准，与其他常见汽车网络协议标准（如 CAN、LIN、FlexRay 等）有以下不同： 通信基础与适用场景 ISO 13400：基于互联网协议&a…...

编程日记 2025/9/5 1:36:53

MacDroid for Mac v2.3 安卓手机文件传输助手支持M、Intel芯片 4.7K

MacDroid 是Mac毒搜集到的一款安卓手机文件传输助手，在Mac和Android设备之间传输文件。您只需要将安卓手机使用 USB 连接到 Mac 电脑上即可将安卓设备挂载为本地磁盘，就像编辑mac磁盘上的文件一样编辑安卓设备上的文件，MacDroid支持所有 Andr…...

编程日记 2025/8/19 8:21:30

Skywalking介绍，Skywalking 9.4 安装，SpringBoot集成Skywalking

一.Skywalking介绍 Apache SkyWalking是一个开源的分布式追踪与性能监视平台，特别适用于微服务架构、云原生环境以及基于容器（如Docker、Kubernetes）的应用部署。该项目由吴晟发起，并已加入Apache软件基金会的孵化器，…...

编程日记 2025/9/9 14:40:04

基于POI的Excel下拉框自动搜索，包括数据验证的单列删除

目录目标例子 1.搜索下拉框页 2.数据源页 3.效果代码以及注意事项 1.代码 2.注意事项 1.基于Excel的话，相当于加入了一个【数据验证】 2.代码中的一些方法说明目标期望在Excel利用代码创建具备自动搜索功能的下拉框例子 1.搜索下拉框页 2.数据源…...

编程日记 2025/8/31 0:59:18

std::allocator_traits 能做但 std::allocator 不能的事情

🌟 std::allocator_traits 能做但 std::allocator 不能的事情 1️⃣ 适配自定义分配器假设你要实现一个内存池 MyAllocator，而 STL 容器默认使用的是 std::allocator。如果你希望 STL 容器可以使用你的 MyAllocator，你不能直接用 std::a…...

编程日记 2025/9/10 20:02:15

深度解析Ant Design Pro 6开发实践

深度解析Ant Design Pro 6全栈开发实践：从架构设计到企业级应用落地一、Ant Design Pro 6核心特性与生态定位（技术架构分析） 作为Ant Design生态体系的旗舰级企业应用中台框架，Ant Design Pro 6基于以下技术栈实现突破性升级&am…...

编程日记 2025/9/7 6:38:19

flutter 局部刷新控件Selector源码实现原理

Flutter 中的 Selector 组件是 provider 包提供的一个优化工具，用于在状态管理中仅选择所需数据片段，避免不必要的 Widget 重建。其实现原理基于以下几个关键点： 1. 核心设计目标选择性重建：仅当特定数据变化时触发 Widget 重建&…...

编程日记 2025/9/10 7:31:35

Hadoop之01：HDFS分布式文件系统

HDFS分布式文件系统 1.目标理解分布式思想学会使用HDFS的常用命令掌握如何使用java api操作HDFS能独立描述HDFS三大组件namenode、secondarynamenode、datanode的作用理解并独立描述HDFS读写流程HDFS如何解决大量小文件存储问题 2. HDFS 2.1 HDFS是什么 HDFS是Hadoop中的一…...

编程日记 2025/9/6 13:49:14

vite+react+ts如何集成redux状态管理工具，实现持久化缓存

1.安装插件这里的redux-persist--进行数据的持久化缓存，确保页面刷新数据不会丢失 yarn add react-redux^9.2.0 redux-persist^6.0.0 reduxjs/toolkit^2.5.1 2.创建仓库文件夹在项目的src文件夹下创建名为store的文件夹，里面的具体文件如下 featur…...

编程日记 2025/9/8 6:53:54

文字的力量

不知道以前的时代的年轻人有没有这样的感受。现在我觉得自己是不是出现了认知偏差，发现在很多描写现在的二十几岁年轻人的成长经历的文字下面都会出现很多共鸣，包括我自己也有，就让我有一个错觉:是不是中国所有的和我同龄的年轻人都是这样过来…...

编程日记 2025/9/10 12:20:25

网络空间安全（4）web应用程序安全要点

前言 Web应用程序安全是确保Web应用程序、服务和服务器免受网络攻击和威胁的关键环节。一、编写安全的代码输入验证与过滤：确保所有的用户输入都被正确验证和过滤，以防止注入攻击等安全漏洞。开发者应对URL、查询关键字、HTTP头、POST数据等进行严格的…...

编程日记 2025/9/10 0:42:33

openwebUI访问vllm加载deepseek微调过的本地大模型

文章目录前言一、openwebui安装二、配置openwebui环境三、安装vllm四、启动vllm五、启动openwebui 前言首先安装vllm，然后加载本地模型，会起一个端口好。在安装openwebui,去访问这个端口号。下面具体步骤的演示。一、openwebui安装 rootautodl-co…...

编程日记 2025/9/6 14:46:32

安全测试之五：SQL Server注入漏洞几个实例

示例 1：在 GET 请求中测试 SQL 注入最简单且有时最有效的情况是针对登录页面进行测试。当登录页面请求用户输入用户名和密码时，攻击者可以尝试输入以下字符串 “ or 11”（不包含双引号）： https://vulnerable.web.ap…...

编程日记 2025/9/8 11:42:13

计算机毕业设计SpringBoot+Vue.js线上辅导班系统(源码+文档+PPT+讲解)

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

编程日记 2025/9/10 1:09:57

C#委托(delegate)的常用方式

C# 中委托的常用方式，包括委托的定义、实例化、不同的赋值方式以及匿名委托的使用。委托的定义 // 委托的核心是跟委托的函数结构一样 public delegate string SayHello(string c);public delegate string SayHello(string c);：定义了一个公共委托类型 …...

编程日记 2025/9/8 19:40:46

文章目录

CSS 日常开发常用属性总结

一、 常用 CSS 属性

1、布局相关

（1）display：

（2）position：

（3）float：

（4）clear：

2、尺寸与溢出

（1）width 和 height：

（2）max-width 和 max-height：

（3）overflow：

3、文本样式

（1）color：

（2）font-size：

（3）font-weight：

（4）text-align：

（5）text-decoration：

4、背景与边框

（1）background-color：

（2）background-image：

（3）background-repeat：

（4）background-position：

（5）background：

（6）border：

（7）border-radius：

5、盒模型

（1）padding：

（2）margin：

（3）box-sizing：

6、图像处理

（1）object-fit：

（2）object-position：

7、动画与过渡

（1）transition：

（2）animation：

（3）keyframes：

二、常用 CSS 技巧

1、响应式设计

（1）@media 媒体查询：

（2）视口单位：

（3）Flexbox 和 Grid：

2、居中布局

（1） 水平居中：

（2）垂直居中：

3、Hover 效果

（1）hover 状态：

（2）::after 和 ::beforeseudo-elements：

4、视觉优化

（1）阴影效果：

（2）圆角边框：

（3）文字阴影：

5、CSS 预处理器

（1）Sass/SCSS 和 Less：

（2）PostCSS：

相关文章：

一、常用 CSS 属性

（1）水平居中：