CSS常用样式集合，复制即用-卡卡资源网

整理了一些常用的CSS样式类，包含布局、文字、间距、按钮、卡片、动画等，复制就能用，提高开发效率。小白也能轻松上手，复制粘贴就能用！

## 功能特点

– **布局相关**：flex居中、两端对齐、网格布局
– **文字相关**：文字省略、对齐方式、字重
– **间距相关**：margin、padding常用间距
– **颜色相关**：常用文字颜色、背景颜色
– **按钮样式**：各种颜色按钮、边框按钮
– **卡片样式**：普通卡片、悬停效果卡片
– **阴影效果**：小阴影、中阴影、大阴影
– **圆角效果**：小圆角、中圆角、大圆角、圆形
– **显示隐藏**：各种显示方式、响应式隐藏
– **动画效果**：淡入、上移淡入、缩放、旋转
– **其他工具**：清除浮动、禁止选中、全屏、滚动条美化

## 效果预览

先给大家看看使用后的实际效果，心里有个底：

上图展示了各种CSS样式的实际效果，包括布局、文字、按钮、卡片、动画等，一目了然。

## 详细使用教程（小白必看）

很多朋友刚接触CSS，可能不知道怎么用这些样式类。别担心，我手把手教你，从最基础的步骤开始，保证你一看就会！

### 第一步：准备工作

你只需要一个能写HTML的编辑器就行，推荐新手用：
– **VS Code**（免费好用，功能强大）
– **Sublime Text**（轻量快速）
– 甚至系统自带的记事本都可以！

### 第二步：创建文件

在你的电脑上创建一个文件夹，比如叫 `css-demo`，然后在里面创建两个文件：
1. `common.css` – 这是样式文件
2. `index.html` – 这是测试页面

### 第三步：复制样式代码

把下面的完整CSS代码复制到 `common.css` 文件中，保存好。（完整代码在文章最后面）

### 第四步：创建测试页面

在 `index.html` 文件中，写入以下代码：

“`html
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<title>CSS样式测试</title>
<!– 引入CSS样式文件 –>
<link rel=”stylesheet” href=”common.css”>
</head>
<body>
<!– 在这里测试各种样式类 –>

<!– 1. 测试布局 –>
<div class=”flex-center” style=”height: 100px; background: #f0f0f0;”>
<p>我是居中的文字</p>
</div>

<!– 2. 测试按钮 –>
<button class=”btn btn-primary”>主要按钮</button>
<button class=”btn btn-success”>成功按钮</button>
<button class=”btn btn-danger”>危险按钮</button>

<!– 3. 测试卡片 –>
<div class=”card card-hover” style=”width: 300px; padding: 20px;”>
<h3>卡片标题</h3>
<p>这是卡片内容，鼠标放上来会有悬停效果</p>
</div>

<!– 4. 测试文字省略 –>
<p class=”text-ellipsis” style=”width: 200px;”>
这是一段很长很长很长很长很长很长的文字，超出部分会自动省略
</p>
</body>
</html>
“`

### 第五步：查看效果

1. 双击打开 `index.html` 文件（用浏览器打开）
2. 你就能看到各种样式的效果了！

是不是很简单？只要引入了 `common.css` 文件，你就可以在任何HTML标签上加上对应的class名，样式就自动生效了。

### 第六步：常用样式详解

#### 1. 布局相关

**flex-center – 水平垂直居中**
“`html
<div class=”flex-center” style=”height: 200px;”>
<p>我是居中的内容</p>
</div>
“`
这个最常用了，想让一个盒子里的内容居中，加上 `flex-center` 就行。

**flex-between – 两端对齐**
“`html
<div class=”flex-between”>
<span>左边内容</span>
<span>右边内容</span>
</div>
“`
左右两边各一个元素，中间自动撑开，做导航栏的时候经常用。

**flex-column – 垂直排列**
“`html
<div class=”flex-column”>
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
</div>
“`
让子元素从上到下排列。

**grid-2 / grid-3 / grid-4 – 网格布局**
“`html
<div class=”grid-3″>
<div>第1个</div>
<div>第2个</div>
<div>第3个</div>
<div>第4个</div>
<div>第5个</div>
<div>第6个</div>
</div>
“`
自动排成几列，做商品列表、图片列表的时候特别好用。

#### 2. 文字相关

**text-ellipsis – 单行文字省略**
“`html
<p class=”text-ellipsis” style=”width: 200px;”>
很长很长的文字，超出部分会变成…
</p>
“`
文字太长的时候，超出部分自动显示省略号，列表标题必备。

**text-ellipsis-2 / text-ellipsis-3 – 多行文字省略**
“`html
<p class=”text-ellipsis-2″ style=”width: 200px;”>
很长很长的文字，超过两行的部分会变成…
</p>
“`
两行或三行后省略，做简介、描述的时候用。

**text-center / text-left / text-right – 文字对齐**
“`html
<p class=”text-center”>居中的文字</p>
<p class=”text-left”>左对齐文字</p>
<p class=”text-right”>右对齐文字</p>
“`

**font-bold / font-normal / font-light – 字重**
“`html
<p class=”font-bold”>加粗文字</p>
<p class=”font-normal”>正常文字</p>
<p class=”font-light”>细体文字</p>
“`

#### 3. 间距相关

**m-0 到 m-5 – 外边距**
“`html
<div class=”m-2″>四周外边距</div>
<div class=”mt-3″>上边距</div>
<div class=”mb-3″>下边距</div>
<div class=”ml-3″>左边距</div>
<div class=”mr-3″>右边距</div>
“`
数字越大，间距越大。0就是没有间距，5是最大的。

**p-0 到 p-5 – 内边距**
“`html
<div class=”p-2″>四周内边距</div>
<div class=”pt-3″>上内边距</div>
<div class=”pb-3″>下内边距</div>
“`
和外边距用法一样，只是是盒子内部的间距。

**mx-auto – 水平居中**
“`html
<div class=”mx-auto” style=”width: 200px;”>
这个盒子会水平居中
</div>
“`
让一个有宽度的块级元素水平居中，超级常用！

#### 4. 颜色相关

**文字颜色**
“`html
<p class=”text-primary”>主要颜色（蓝色）</p>
<p class=”text-success”>成功颜色（绿色）</p>
<p class=”text-warning”>警告颜色（黄色）</p>
<p class=”text-danger”>危险颜色（红色）</p>
<p class=”text-info”>信息颜色（青色）</p>
“`

**背景颜色**
“`html
<div class=”bg-primary text-white”>蓝色背景</div>
<div class=”bg-success text-white”>绿色背景</div>
<div class=”bg-warning text-white”>黄色背景</div>
<div class=”bg-danger text-white”>红色背景</div>
“`

#### 5. 按钮样式

**基础按钮**
“`html
<button class=”btn”>默认按钮</button>
<button class=”btn btn-primary”>主要按钮</button>
<button class=”btn btn-success”>成功按钮</button>
<button class=”btn btn-warning”>警告按钮</button>
<button class=”btn btn-danger”>危险按钮</button>
“`

**边框按钮**
“`html
<button class=”btn btn-outline”>边框按钮</button>
“`

#### 6. 卡片样式

**普通卡片**
“`html
<div class=”card p-3″>
<h3>卡片标题</h3>
<p>卡片内容</p>
</div>
“`

**带悬停效果的卡片**
“`html
<div class=”card card-hover p-3″>
<h3>卡片标题</h3>
<p>鼠标放上来会有阴影效果</p>
</div>
“`
鼠标移上去会有阴影和上移效果，做产品卡片的时候特别好用。

#### 7. 阴影效果

“`html
<div class=”shadow-sm p-3″>小阴影</div>
<div class=”shadow p-3″>中阴影</div>
<div class=”shadow-lg p-3″>大阴影</div>
“`

#### 8. 圆角效果

“`html
<div class=”rounded-sm p-3 bg-primary text-white”>小圆角</div>
<div class=”rounded p-3 bg-primary text-white”>中圆角</div>
<div class=”rounded-lg p-3 bg-primary text-white”>大圆角</div>
<div class=”rounded-full p-3 bg-primary text-white” style=”width: 100px; height: 100px;”>圆形</div>
“`

#### 9. 显示隐藏

“`html
<div class=”hidden”>我是隐藏的</div>
<div class=”block”>我是块级显示</div>
<div class=”inline-block”>我是行内块显示</div>
“`

#### 10. 动画效果

“`html
<div class=”fade-in”>淡入动画</div>
<div class=”fade-in-up”>上移淡入动画</div>
<div class=”scale-in”>缩放进入动画</div>
<div class=”spin”>旋转动画</div>
“`
页面加载的时候会有动画效果，让页面更生动。

#### 11. 其他实用工具

**clearfix – 清除浮动**
“`html
<div class=”clearfix”>
<div style=”float: left;”>左浮动</div>
<div style=”float: right;”>右浮动</div>
</div>
“`
父元素里有浮动元素的时候，加上这个就不会高度塌陷了。

**no-select – 禁止选中**
“`html
<p class=”no-select”>这段文字不能被选中</p>
“`
做按钮或者特殊效果的时候用，防止用户选中文字。

**full-screen – 全屏**
“`html
<div class=”full-screen”>全屏显示</div>
“`

**w-full / h-full – 宽高100%**
“`html
<div class=”w-full”>宽度100%</div>
<div class=”h-full”>高度100%</div>
“`

**container – 容器**
“`html
<div class=”container”>
内容会在一个固定宽度的容器里，水平居中
</div>
“`
做页面布局的时候常用，内容不会太宽，阅读体验更好。

### 常见问题解答

**Q: 为什么我加了class没有效果？**
A: 检查一下是不是没有引入CSS文件，或者引入的路径写错了。一定要在head标签里用link标签引入common.css。

**Q: 这些样式可以和其他框架一起用吗？**
A: 可以的！这些都是通用的CSS类，和Bootstrap、Element UI等框架都不冲突，可以放心使用。

**Q: 我想修改样式的颜色或者大小怎么办？**
A: 直接修改CSS文件里对应的代码就行，比如想改主色调，找到text-primary的颜色值改成你想要的就行。

**Q: 这些样式类命名有什么规律吗？**
A: 很好记的：
– 布局类：flex-开头，grid-开头
– 文字类：text-开头
– 间距类：m-开头（外边距），p-开头（内边距）
– 颜色类：bg-开头（背景），text-开头（文字）
– 状态类：-sm小，-md中，-lg大

## 完整代码

下面是完整的common.css代码，直接复制就能用：

“`css
/* ============================================
CSS常用样式集合
包含布局、文字、间距、按钮、卡片、动画等
============================================ */

/* ========== 布局相关 ========== */

/* flex水平垂直居中 */
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}

/* flex两端对齐 */
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}

/* flex垂直排列 */
.flex-column {
display: flex;
flex-direction: column;
}

/* 网格布局 – 2列 */
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}

/* 网格布局 – 3列 */
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}

/* 网格布局 – 4列 */
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}

/* ========== 文字相关 ========== */

/* 单行文字省略 */
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* 两行文字省略 */
.text-ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}

/* 三行文字省略 */
.text-ellipsis-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}

/* 文字对齐 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 字重 */
.font-bold { font-weight: bold; }
.font-normal { font-weight: normal; }
.font-light { font-weight: 300; }

/* ========== 间距相关 ========== */

/* margin 外边距 */
.m-0 { margin: 0; }
.m-1 { margin: 5px; }
.m-2 { margin: 10px; }
.m-3 { margin: 15px; }
.m-4 { margin: 20px; }
.m-5 { margin: 30px; }

.mt-1 { margin-top: 5px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 15px; }
.mt-4 { margin-top: 20px; }
.mt-5 { margin-top: 30px; }

.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 15px; }
.mb-4 { margin-bottom: 20px; }
.mb-5 { margin-bottom: 30px; }

.ml-1 { margin-left: 5px; }
.ml-2 { margin-left: 10px; }
.ml-3 { margin-left: 15px; }
.ml-4 { margin-left: 20px; }
.ml-5 { margin-left: 30px; }

.mr-1 { margin-right: 5px; }
.mr-2 { margin-right: 10px; }
.mr-3 { margin-right: 15px; }
.mr-4 { margin-right: 20px; }
.mr-5 { margin-right: 30px; }

/* 水平居中 */
.mx-auto { margin-left: auto; margin-right: auto; }

/* padding 内边距 */
.p-0 { padding: 0; }
.p-1 { padding: 5px; }
.p-2 { padding: 10px; }
.p-3 { padding: 15px; }
.p-4 { padding: 20px; }
.p-5 { padding: 30px; }

.pt-1 { padding-top: 5px; }
.pt-2 { padding-top: 10px; }
.pt-3 { padding-top: 15px; }
.pt-4 { padding-top: 20px; }
.pt-5 { padding-top: 30px; }

.pb-1 { padding-bottom: 5px; }
.pb-2 { padding-bottom: 10px; }
.pb-3 { padding-bottom: 15px; }
.pb-4 { padding-bottom: 20px; }
.pb-5 { padding-bottom: 30px; }

/* ========== 颜色相关 ========== */

/* 文字颜色 */
.text-primary { color: #409eff; }
.text-success { color: #67c23a; }
.text-warning { color: #e6a23c; }
.text-danger { color: #f56c6c; }
.text-info { color: #909399; }
.text-white { color: #fff; }
.text-black { color: #000; }

/* 背景颜色 */
.bg-primary { background-color: #409eff; }
.bg-success { background-color: #67c23a; }
.bg-warning { background-color: #e6a23c; }
.bg-danger { background-color: #f56c6c; }
.bg-info { background-color: #909399; }
.bg-white { background-color: #fff; }
.bg-gray { background-color: #f5f7fa; }

/* ========== 按钮样式 ========== */

.btn {
display: inline-block;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
text-align: center;
text-decoration: none;
}

.btn:hover {
opacity: 0.8;
}

.btn-primary {
background-color: #409eff;
color: #fff;
}

.btn-success {
background-color: #67c23a;
color: #fff;
}

.btn-warning {
background-color: #e6a23c;
color: #fff;
}

.btn-danger {
background-color: #f56c6c;
color: #fff;
}

.btn-outline {
background-color: transparent;
border: 1px solid #dcdfe6;
color: #606266;
}

.btn-outline:hover {
border-color: #409eff;
color: #409eff;
opacity: 1;
}

/* ========== 卡片样式 ========== */

.card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.card-hover {
transition: all 0.3s;
}

.card-hover:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}

/* ========== 阴影效果 ========== */

.shadow-sm {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

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

.shadow-lg {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ========== 圆角效果 ========== */

.rounded-sm { border-radius: 2px; }
.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }
.rounded-full { border-radius: 50%; }

/* ========== 显示隐藏 ========== */

.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }

/* 响应式隐藏（小屏幕隐藏） */
@media (max-width: 768px) {
.hidden-sm { display: none; }
}

/* 响应式隐藏（中屏幕隐藏） */
@media (max-width: 992px) {
.hidden-md { display: none; }
}

/* ========== 动画效果 ========== */

/* 淡入 */
.fade-in {
animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

/* 上移淡入 */
.fade-in-up {
animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* 缩放进入 */
.scale-in {
animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}

/* 旋转 */
.spin {
animation: spin 1s linear infinite;
}

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* ========== 其他工具类 ========== */

/* 清除浮动 */
.clearfix::after {
content: ”;
display: block;
clear: both;
}

/* 禁止选中 */
.no-select {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

/* 全屏 */
.full-screen {
width: 100vw;
height: 100vh;
}

/* 宽高100% */
.w-full { width: 100%; }
.h-full { height: 100%; }

/* 容器 */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
}

/* 滚动条美化 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}

::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
“`

## 总结

这个CSS常用样式集合非常实用，做项目的时候经常会用到这些样式。不用每次都自己写，直接拿来用就行，能省很多时间。

样式类命名简单好记，都是常用的英文单词，新手也能很快上手。而且都是纯CSS，不依赖任何框架，不管是原生项目、Vue、React都能用。

如果你觉得有用，记得收藏一下，以后做项目的时候直接拿来用就行！

整理了一些常用的CSS样式类，包含布局、文字、间距、按钮、卡片、动画等，复制就能用，提高开发效率。

## 包含内容

– 布局相关（flex-center、flex-between、grid布局）
– 文字相关（文字省略、文字对齐、文字粗细）
– 间距相关（margin、padding工具类）
– 按钮样式（btn-primary、btn-success、btn-danger等）
– 卡片样式（card、card-hover）
– 阴影效果、圆角
– 动画效果（fadeIn、fadeInUp、scaleIn、spin）
– 其他实用样式

## 核心代码

/* 布局相关 */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.flex-column {
    display: flex;
    flex-direction: column;
}

/* 文字相关 */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-center {
    text-align: center;
}

.text-bold {
    font-weight: bold;
}

/* 按钮样式 */
.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.btn-primary {
    background-color: #409eff;
    color: #fff;
}

.btn-success {
    background-color: #67c23a;
    color: #fff;
}

.btn-danger {
    background-color: #f56c6c;
    color: #fff;
}

/* 卡片样式 */
.card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.card-hover:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* 动画效果 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* 其他实用样式 */
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.no-select {
    user-select: none;
}

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

文章版权归作者所有，未经允许请勿转载。

THE END