【2021css常用代码大全】在网页开发中，CSS（层叠样式表）是实现网页视觉效果的重要工具。随着前端技术的不断发展，CSS 的功能也日益强大。为了方便开发者快速查阅和使用常用 CSS 代码，本文整理了 2021 年较为常见的 CSS 代码片段，涵盖基础样式、布局、动画、响应式设计等多个方面。
一、基础样式
| 代码 | 功能说明 |
| `color: 000;` | 设置文字颜色为黑色 |
| `font-size: 16px;` | 设置字体大小 |
| `font-family: Arial, sans-serif;` | 设置字体类型 |
| `background-color: fff;` | 设置背景颜色 |
| `padding: 10px;` | 设置内边距 |
| `margin: 0 auto;` | 水平居中元素 |
二、布局相关
| 代码 | 功能说明 |
| `display: flex;` | 使用 Flexbox 布局 |
| `display: grid;` | 使用 Grid 布局 |
| `position: absolute;` | 绝对定位元素 |
| `float: left;` | 元素向左浮动 |
| `clear: both;` | 清除浮动影响 |
| `width: 100%;` | 元素宽度占满父容器 |
三、响应式设计
| 代码 | 功能说明 |
| `@media (max-width: 768px) { ... }` | 针对屏幕宽度小于 768px 的设备设置样式 |
| `min-width: 600px;` | 设置最小宽度 |
| `vw` / `vh` | 视口单位，用于响应式布局 |
| `flex-wrap: wrap;` | 允许弹性容器内的子元素换行 |
| `box-sizing: border-box;` | 让元素的宽度包含内边距和边框 |
四、动画与过渡
| 代码 | 功能说明 |
| `transition: all 0.3s ease;` | 添加过渡效果 |
| `animation: fade-in 1s;` | 应用动画 |
| `@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }` | 定义关键帧动画 |
| `transform: rotate(30deg);` | 对元素进行旋转 |
| `opacity: 0.5;` | 设置透明度 |
五、常见选择器
| 代码 | 功能说明 |
| `div` | 所有 ` ` 元素 |
| `.class` | 所有具有指定类名的元素 |
| `id` | 具有指定 ID 的元素 |
| `a:hover` | 鼠标悬停时的链接样式 |
| `li:first-child` | 第一个列表项 |
| `input[type="text"]` | 文本输入框 |
六、其他实用代码
| 代码 | 功能说明 |
| `text-align: center;` | 文本居中 |
| `text-decoration: none;` | 移除下划线 |
| `cursor: pointer;` | 鼠标指针变为手型 |
| `white-space: nowrap;` | 禁止文本换行 |
| `overflow: hidden;` | 隐藏溢出内容 |
总结
以上内容涵盖了 2021 年 CSS 开发中常用的代码片段，适用于多种开发场景。合理运用这些代码，可以提升网页的美观性和用户体验。同时，建议开发者结合实际项目需求灵活调整，并关注最新的 CSS 标准和浏览器兼容性，以确保代码的稳定性和可维护性。
