以下是一些 常用的 CSS 代码大全，可以帮助你在开发工作中提高效率和质量，涵盖了布局、样式、响应式设计、动画等常见的应用场景。

1. 布局相关

Flexbox 布局

Flexbox 是一种一维布局模型，适用于简单的行或列布局。

/* 容器 */
.container {
  display: flex;
  justify-content: space-between; /* 左右间距平分 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 换行 */
}

/* 子项 */
.item {
  flex: 1; /* 子项平分空间 */
  margin: 10px; /* 外边距 */
}

Grid 布局

Grid 是一个二维布局模型，可以处理更复杂的布局需求。

/* 容器 */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列均分 */
  grid-gap: 10px; /* 格子间隙 */
}

/* 子项 */
.item {
  background-color: #f0f0f0;
}

居中对齐

  • 水平居中：
.center-horizontal {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}
  • 垂直居中（使用 Flexbox）：
.center-vertical {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 父容器占满整个视口 */
}

2. 常用样式

透明度

使用 opacity 控制元素的透明度。

.transparent {
  opacity: 0.5; /* 半透明 */
}

文字溢出处理

.text-overflow {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 用省略号表示溢出的部分 */
}

圆角

.rounded-corner {
  border-radius: 10px; /* 圆角 */
}

阴影效果

.shadow {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* 2px 2px 为阴影偏移，10px 为模糊度 */
}

渐变背景

.gradient-background {
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* 左到右的渐变 */
}

透明背景色

使用 rgba 设置透明背景色。

.transparent-background {
  background-color: rgba(0, 0, 0, 0.3); /* 黑色，30%透明度 */
}

3. 响应式设计

媒体查询

使用 @media 查询适配不同屏幕尺寸。

/* 针对小屏幕 */
@media (max-width: 600px) {
  .container {
    flex-direction: column; /* 小屏幕时，布局改为纵向 */
  }
}

/* 针对大屏幕 */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(4, 1fr); /* 大屏幕时，四列布局 */
  }
}

视口单位（vw, vh）

使用视口单位进行响应式布局。

.full-width {
  width: 100vw; /* 100%视口宽度 */
}

.full-height {
  height: 100vh; /* 100%视口高度 */
}

4. 动画与过渡

过渡效果

/* 过渡：元素宽度从 100px 变到 300px */
.transition {
  width: 100px;
  transition: width 0.3s ease; /* 宽度变化，0.3秒，平滑过渡 */
}

.transition:hover {
  width: 300px; /* 鼠标悬停时宽度增加 */
}

基础动画

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.bounce {
  animation: bounce 1s infinite; /* 动画持续1秒，无限循环 */
}

旋转动画

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.rotate {
  animation: rotate 2s linear infinite; /* 2秒内完成360度旋转 */
}

5. 表单样式

自定义表单控件样式

/* 自定义按钮 */
button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

/* 自定义文本框 */
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 5px;
}

input[type="text"]:focus {
  border-color: #4CAF50;
}

禁用表单元素

input:disabled, button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}

6. 浏览器兼容性

浏览器前缀

某些 CSS 特性在不同浏览器中需要使用前缀来兼容。

/* 给不同浏览器的支持 */
.example {
  -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* Chrome/Safari */
  -moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* Firefox */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* 通用 */
}

使用 autoprefixer

使用 Autoprefixer 自动为 CSS 添加浏览器前缀。可以在构建过程中自动完成。

7. 图标和字体图标

Font Awesome 图标

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<i class="fas fa-heart"></i> <!-- 使用 Font Awesome 图标 -->

自定义图标

.icon {
  width: 30px;
  height: 30px;
  background: url('icon.png') no-repeat center center;
  background-size: contain;
}

8. 其他常用样式

清除浮动

通过清除浮动来解决布局中的浮动问题。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

自定义列表样式

ul.custom-list {
  list-style-type: none; /* 取消默认圆点 */
  padding-left: 0;
}

ul.custom-list li {
  padding-left: 20px;
  position: relative;
}

ul.custom-list li::before {
  content: '✔'; /* 添加勾选标记 */
  position: absolute;
  left: 0;
}

这些 CSS 代码和技巧可以大大提高开发效率，帮助你在日常工作中快速实现常见的页面效果。如果你有其他特定的需求，可以基于这些基础代码进行扩展和调整。