CSS实用技巧

CSS 实用技巧可以帮助你更高效地编写样式、解决常见布局问题、提升页面性能和用户体验。以下是一些常用的 CSS 技巧，涵盖布局、样式优化、响应式设计、动画等方面：

一、布局技巧

1. 居中布局
   水平居中：
   css
   .container {
   text-align: center; /* 文本/inline 元素 /
   margin: 0 auto; / 块级元素，需指定宽度 /
   display: flex;
   justify-content: center; / Flex 布局 /
   }
   垂直居中：
   css
   .container {
   display: flex;
   align-items: center; / Flex 布局 /
   display: grid;
   align-items: center; / Grid 布局 /
   position: relative;
   }
   .child {
   position: absolute;
   top: 50%;
   transform: translateY(-50%); / 绝对定位 + transform /
   }
   水平垂直居中：
   css
   .container {
   display: flex;
   justify-content: center;
   align-items: center; / Flex 布局 /
   display: grid;
   place-items: center; / Grid 布局（简洁写法） /
   position: relative;
   }
   .child {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); / 绝对定位 + transform */
   }
2. 两栏 / 三栏布局
   两栏布局（左侧固定，右侧自适应）：
   css
   .left {
   width: 200px;
   float: left;
   }
   .right {
   margin-left: 200px; /* 或 overflow: hidden; 触发 BFC /
   }
   / Flex 写法 /
   .container {
   display: flex;
   }
   .left {
   width: 200px;
   }
   .right {
   flex: 1;
   }
   三栏布局（两侧固定，中间自适应）：
   css
   .left {
   width: 200px;
   float: left;
   }
   .right {
   width: 150px;
   float: right;
   }
   .center {
   margin-left: 200px;
   margin-right: 150px;
   }
   / Flex 写法 */
   .container {
   display: flex;
   }
   .left {
   width: 200px;
   }
   .center {
   flex: 1;
   }
   .right {
   width: 150px;
   }
3. 等高布局
   Flex 布局：
   css
   .container {
   display: flex;
   align-items: stretch; /* 默认值，子元素等高 /
   }
   Grid 布局：
   css
   .container {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 1fr; / 行高自适应，子元素等高 */
   }
   伪元素 + padding 技巧（兼容旧浏览器）：
   css
   .container {
   overflow: hidden;
   }
   .column {
   float: left;
   width: 33.333%;
   padding-bottom: 9999px;
   margin-bottom: -9999px;
   }
   二、样式优化技巧
4. 简化代码
   使用简写属性：
   css
   /* 完整写法 /
   margin-top: 10px;
   margin-right: 20px;
   margin-bottom: 10px;
   margin-left: 20px;
   / 简写 /
   margin: 10px 20px;
   继承样式：
   css
   body {
   font-family: Arial, sans-serif;
   color: #333;
   }
   .child {
   / 继承 body 的字体和颜色，无需重复设置 */
   }
5. 避免样式冲突
   使用 BEM 命名规范（Block-Element-Modifier）：
   css
   .button { /* Block /
   padding: 10px 20px;
   }
   .button__icon { / Element /
   margin-right: 5px;
   }
   .button--primary { / Modifier /
   background-color: #007bff;
   }
   使用 CSS Modules（React/Vue 项目）：
   css
   / style.module.css /
   .container {
   padding: 20px;
   }
   / 组件中导入，类名会被哈希，避免冲突 */
   import styles from './style.module.css';

3. 样式复用 使用 CSS 变量： css :root { --primary-color: #007bff; --font-size: 16px; } .button { background-color: var(--primary-color); font-size: var(--font-size); } 使用 @mixin（Sass/Less）： scss @mixin flex-center { display: flex; justify-content: center; align-items: center; } .container { @include flex-center; } 三、响应式设计技巧 1. 媒体查询 基础用法： css @media (max-width: 768px) { .container { padding: 10px; } } 移动优先： css .container { padding: 20px; /* 移动端样式 */ } @media (min-width: 768px) { .container { padding: 30px; /* 平板/桌面端样式 */ } } 2. 响应式图片 使用 srcset 和 sizes： html 预览 使用 picture 元素： html 预览 3. 弹性布局 使用 clamp() 动态计算字体大小： css font-size: clamp(1rem, 2vw, 1.5rem); /* 最小 1rem，最大 1.5rem，中间随视口宽度变化 */ 使用 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))（自适应网格）： css .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } 四、动画与交互技巧 1. 平滑过渡 使用 transition： css .button { background-color: #007bff; transition: background-color 0.3s ease; } .button:hover { background-color: #0056b3; } 2. 关键帧动画 使用 @keyframes： css @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element { animation: fadeIn 0.5s ease forwards; } 3. 实现滚动动画 使用 scroll-behavior 平滑滚动： css html { scroll-behavior: smooth; } 滚动触发动画（结合 JavaScript）： css .animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .animate-on-scroll.visible { opacity: 1; transform: translateY(0); } 五、性能优化技巧 1. 减少重排重绘 避免频繁修改样式： javascript 运行 // 不好的写法（多次修改样式，触发多次重排） element.style.width = '100px'; element.style.height = '200px'; element.style.margin = '10px';

// 好的写法（一次性修改，触发一次重排）
element.style.cssText = 'width: 100px; height: 200px; margin: 10px;';
使用 transform 和 opacity 实现动画（不会触发重排，仅触发重绘或合成）：
css
.element {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.element:hover {
transform: scale(1.1);
opacity: 0.8;
}
2. 优化选择器
避免使用复杂选择器：
css
/* 不好的写法（多层嵌套，性能差） /
.container .row .col .text {
color: #333;
}
/ 好的写法（简洁选择器） */
.text {
color: #333;
}
使用 ID 选择器或类选择器（比标签选择器、属性选择器优先级高，查找更快）：
css

header

.nav { /* 类选择器 */ }
3. 懒加载样式
使用 media="print" 或 media="(max-width: 0)" 延迟加载非关键样式：
html
预览

六、其他实用技巧 1. 清除浮动 使用 clearfix 伪元素： css .clearfix::after { content: ''; display: table; clear: both; } 使用 overflow: hidden（触发 BFC，清除浮动）： css .container { overflow: hidden; } 2. 自定义滚动条 WebKit 浏览器： css ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; } 3. 文字溢出处理 单行文字溢出： css .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行文字溢出： css .text { display: -webkit-box; -webkit-line-clamp: 3; /* 显示 3 行 */ -webkit-box-orient: vertical; overflow: hidden; } 这些 CSS 实用技巧可以帮助你更高效地编写样式，解决常见问题，提升页面性能和用户体验。根据项目需求和浏览器兼容性，选择合适的技巧应用即可。