CSS使用技巧全面解析（css definitive guide）
myzbx 2025-02-04 15:14 16 浏览
一、CSS基础回顾与进阶选择器
（一）基础回顾
在深入探讨CSS使用技巧之前，先简要回顾一下CSS的基础知识。CSS（层叠样式表）用于定义HTML文档的样式和布局，通过选择器选中HTML元素，然后为其应用各种属性，如颜色、字体、大小、布局等。
（二）进阶选择器
属性选择器
属性选择器允许根据元素的属性来选择元素，这在一些特定场景下非常有用。例如，如果你想为所有带有 title 属性的链接设置特殊样式：
a[title] {
color: purple;
text-decoration: underline;
}
上述代码会将所有带有 title 属性的链接文本颜色设置为紫色，并添加下划线。还可以进一步精确匹配属性值，比如选择 href 属性值为特定URL的链接：
a[href="https://example.com"] {
background-color: yellow;
}
伪类选择器
- 动态伪类： :hover 、 :active 、 :focus 等动态伪类可以为元素的不同状态设置样式。 :hover 用于当鼠标悬停在元素上时， :active 用于元素被激活（如点击按钮时）， :focus 用于元素获得焦点（如输入框被选中时）。
button:hover {
background-color: green;
color: white;
}
input:focus {
border-color: blue;
}
- 结构伪类： nth - child(n) 、 :first - child 、 :last - child 等结构伪类可以根据元素在其父元素中的位置来选择元素。例如，选择列表中的奇数项：
li:nth-child(odd) {
background-color: lightgray;
}
选择第一个子元素：
ul > li:first-child {
font-weight: bold;
}
二、布局技巧
（一）Flexbox布局
Flexbox（弹性盒子布局）是一种现代的CSS布局模式，它极大地简化了页面的布局设计，尤其是在处理响应式布局时。
基本概念
Flexbox由容器（flex container）和项目（flex item）组成。通过在容器上设置 display: flex ，容器内的子元素会自动成为弹性项目。
.container {
display: flex;
}
主轴与交叉轴
Flexbox有两个主要的轴：主轴（main axis）和交叉轴（cross axis）。主轴的方向由 flex - direction 属性决定，默认值是 row ，表示水平方向。交叉轴则与主轴垂直。
.container {
display: flex;
flex - direction: column; /* 主轴变为垂直方向 */
}
项目对齐与分布
- justify - content：用于控制弹性项目在主轴上的对齐和分布方式。例如，将项目居中对齐：
.container {
display: flex;
justify - content: center;
}
- align - items：用于控制弹性项目在交叉轴上的对齐方式。例如，将项目在交叉轴上居中对齐：
.container {
display: flex;
align - items: center;
}
- flex - wrap：当弹性项目过多无法在一行显示时， flex - wrap 属性可以控制项目是否换行。
.container {
display: flex;
flex - wrap: wrap; /* 项目换行 */
}
（二）Grid布局
CSS Grid布局是另一种强大的布局模式，它基于网格系统，能够创建复杂的二维布局。
网格容器与项目
通过在容器上设置 display: grid ，将其定义为网格容器，容器内的子元素成为网格项目。
.grid-container {
display: grid;
}
定义网格
使用 grid - template - columns 和 grid - template - rows 属性来定义网格的列和行。例如，创建一个三列等宽的网格：
.grid-container {
display: grid;
grid - template - columns: repeat(3, 1fr); /* 三个1fr表示等宽列 */
}
项目定位
可以使用 grid - column 和 grid - row 属性来指定项目在网格中的位置。例如，将一个项目放置在第二列和第三行：
.grid-item {
grid - column: 2;
grid - row: 3;
}
网格间隙
使用 grid - gap 属性来设置网格之间的间隙。
.grid-container {
display: grid;
grid - gap: 10px; /* 水平和垂直间隙均为10px */
}
（三）响应式布局技巧
媒体查询
媒体查询是实现响应式布局的核心技术之一。通过媒体查询，可以根据不同的设备屏幕尺寸、分辨率等条件来应用不同的样式。
/* 当屏幕宽度小于600px时 */
@media (max - width: 600px) {
body {
font - size: 14px;
}
}
单位选择
在响应式布局中，选择合适的长度单位非常重要。 rem （根元素字体大小的倍数）和 em （父元素字体大小的倍数）是相对单位，它们会根据字体大小的变化而变化，适合用于响应式设计。 vw （视口宽度的百分比）和 vh （视口高度的百分比）则是基于视口大小的单位，也常用于创建自适应布局。
body {
font - size: 16px;
}
p {
font - size: 1.2em; /* 相对于父元素字体大小 */
}
.container {
width: 50vw; /* 宽度为视口宽度的50% */
}
三、样式优化与性能提升
（一）CSS优化原则
减少代码量
尽量避免重复的样式定义，使用继承和复用机制。例如，将一些通用的样式定义在一个类中，然后在需要的元素上应用该类。
/* 通用样式类 */
.common - style {
color: blue;
font - weight: bold;
}
避免过度嵌套
虽然CSS选择器可以进行嵌套，但过度嵌套会增加选择器的复杂性，降低样式的可读性和可维护性。
/* 避免这样的过度嵌套 */
body div.container ul li a {
color: red;
}
使用简写属性
许多CSS属性都有简写形式，使用简写属性可以减少代码量，提高代码的简洁性。例如， margin 属性可以同时设置上、右、下、左四个方向的外边距。
/* 简写形式 */
.element {
margin: 10px 20px 30px 40px; /* 上、右、下、左外边距 */
}
（二）性能优化
减少重排与重绘
重排（reflow）和重绘（repaint）会影响页面的性能。尽量避免频繁地改变会触发重排和重绘的属性，如 width 、 height 、 margin 、 padding 等。如果需要一次性改变多个属性，可以使用 classList 来切换类，而不是直接修改属性值。
<!DOCTYPE html>
<html lang="zh - CN">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device - width, initial - scale = 1.0">
<title>减少重排与重绘</title>
<style>
/* 定义两个类，分别代表不同的样式 */
.original {
width: 100px;
height: 100px;
background - color: red;
}
.changed {
width: 200px;
height: 200px;
background - color: blue;
}
</style>
</head>
<body>
<div id="myDiv" class="original"></div>
<button onclick="toggleClass()">切换样式</button>
<script>
function toggleClass() {
const div = document.getElementById('myDiv');
// 使用classList切换类，一次性改变多个样式，减少重排和重绘
div.classList.toggle('original');
div.classList.toggle('changed');
}
</script>
</body>
</html>
优化选择器性能
选择器的性能与选择器的复杂程度有关。尽量使用简单的选择器，避免使用通配符选择器（ * ）和复杂的后代选择器。
/* 避免使用通配符选择器 */
* {
margin: 0;
padding: 0;
}
使用硬件加速
某些CSS属性，如 transform 和 opacity ，在改变时可以触发硬件加速，提高动画和过渡效果的性能。
.element {
transition: transform 0.3s ease - in - out;
transform: translateX(0);
}
.element:hover {
transform: translateX(100px);
}
四、动画与过渡效果
（一）CSS过渡
CSS过渡可以实现元素属性的平滑变化，创建简单而优雅的动画效果。
基本语法
使用 transition 属性来定义过渡效果。 transition 属性可以接受多个参数，包括过渡的属性、持续时间、过渡函数和延迟时间。
.element {
width: 100px;
height: 100px;
background - color: red;
transition: width 0.5s ease - in - out, background - color 0.3s linear;
}
.element:hover {
width: 200px;
background - color: blue;
}
上述代码中，当鼠标悬停在 .element 上时， width 属性会在0.5秒内以 ease - in - out 的过渡函数变化， background - color 属性会在0.3秒内以线性过渡函数变化。
过渡函数
CSS提供了多种过渡函数，如 linear （线性过渡）、 ease （默认，平滑过渡）、 ease - in （缓入）、 ease - out （缓出）、 ease - in - out （缓入缓出）等。还可以使用 cubic - bezier 函数来自定义过渡函数。
.element {
transition: transform 0.5s cubic - bezier(0.1, 0.57, 0.1, 1);
}
（二）CSS动画
CSS动画提供了更强大和灵活的动画控制能力，可以创建复杂的动画序列。
定义动画关键帧
使用 @keyframes 规则来定义动画的关键帧，即动画在不同时间点的状态。
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
应用动画
通过 animation 属性将定义好的动画应用到元素上。 animation 属性可以接受多个参数，包括动画名称、持续时间、过渡函数、延迟时间、播放次数和方向等。
.element {
animation: slideIn 1s ease - in - out 0s infinite alternate;
}
上述代码中， .element 元素会应用 slideIn 动画，动画持续1秒，以 ease - in - out 过渡函数播放，延迟0秒，无限循环播放，并且每次播放方向相反。
动画控制
可以使用JavaScript来控制动画的播放、暂停、停止等状态。通过操作元素的 classList 或直接修改 animation - play - state 属性来实现。
<!DOCTYPE html>
<html lang="zh - CN">
<head>
<meta charset="UTF - 8">
<meta name="viewport" content="width=device - width, initial - scale = 1.0">
<title>动画控制</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.element {
width: 100px;
height: 100px;
background - color: green;
animation: rotate 2s linear infinite;
}
.paused {
animation - play - state: paused;
}
</style>
</head>
<body>
<div id="myDiv" class="element"></div>
<button onclick="toggleAnimation()">暂停/播放动画</button>
<script>
function toggleAnimation() {
const div = document.getElementById('myDiv');
if (div.classList.contains('paused')) {
div.classList.remove('paused');
} else {
div.classList.add('paused');
}
}
</script>
</body>
</html>
五、CSS预处理器与后处理器
（一）CSS预处理器（以Sass为例）
CSS预处理器可以扩展CSS的功能，提高开发效率和代码的可维护性。Sass是一种流行的CSS预处理器，它增加了变量、嵌套、混合、函数等功能。
变量
在Sass中，可以定义变量来存储常用的值，如颜色、字体大小等。
$primary - color: #007bff;
body {
color: $primary - color;
}
嵌套
Sass允许选择器进行嵌套，使代码结构更加清晰。
nav {
ul {
list - style: none;
li {
display: inline - block;
a {
text - decoration: none;
color: $primary - color;
&:hover {
color: darken($primary - color, 20%);
}
}
}
}
}
混合
混合（Mixin）可以将一组样式封装起来，然后在需要的地方复用。
@mixin clearfix {
&::after {
content: "";
display: table;
clear: both;
}
}
.container {
@include clearfix;
}
函数
Sass提供了一些内置函数，如颜色函数、数学函数等，还可以自定义函数。
$secondary - color: lighten($primary - color, 30%);
（二）CSS后处理器（以PostCSS为例）
CSS后处理器是在CSS文件生成后对其进行处理的工具，常用于自动添加浏览器前缀、压缩代码等。
自动添加浏览器前缀
使用PostCSS的 autoprefixer 插件可以自动为CSS属性添加浏览器前缀，以确保在不同浏览器中都能正常显示。
const autoprefixer = require('autoprefixer');
const postcss = require('postcss');
const css = `
display: flex;
justify - content: center;
`;
postcss([autoprefixer]).process(css).then(result => {
console.log(result.css);
});
代码压缩
使用PostCSS的 cssnano 插件可以压缩CSS代码，减小文件大小。
const cssnano = require('cssnano');
const postcss = require('postcss');
const css = `
body {
color: #000;
background - color: #fff;
}
`;
postcss([cssnano]).process(css).then(result => {
console.log(result.css);
});
六、解决常见CSS问题
（一）垂直居中问题
垂直居中是CSS中常见的难题之一，有多种解决方法，具体取决于元素的类型和布局方式。
单行文本垂直居中
对于单行文本，可以通过设置 line - height 等于元素的 height 来实现垂直居中。
.element {
height: 50px;
line - height: 50px;
}
块级元素垂直居中
- Flexbox方法：使用Flexbox布局，通过 align - items 和 justify - content 属性实现垂直和水平居中。
.container {
display: flex;
justify - content: center;
align - items: center;
height: 100vh;
}
- Grid方法：使用Grid布局，通过 place - items 属性实现垂直和水平居中。
.grid - container {
display: grid;
place - items: center;
height: 100vh;
}
- 绝对定位与负边距方法：对于已知高度和宽度的元素，可以使用绝对定位和负边距来实现垂直居中。
.element {
position
相关推荐
- MORROR ART:毫无音质可言，真的只是好看而已...
-
今天早上我在微博上发了一条短视频，内容是某款网红音箱正在放声歌唱——这玩意就是此前曾经在网上挺火的所谓“悬浮歌词音箱”。这款产品是我同事收到的礼品，但她嫌在家里放着没用，所以拿到公司里做我们的拍摄道具...
- 「JS优化篇」你的 if - else 代码肯定没我写的好
-
作者：小生方勤转发链接：https://mp.weixin.qq.com/s/JzOQ_OwAYoP5Ic1VBtCZNA前言最近部门在对以往的代码做一些优化，我在代码中看到一连串的if(){}el...
- 细聊微内核架构在前端的应用「干货」
-
作者：semlinker转发链接：https://mp.weixin.qq.com/s/ywc98dS4TVB4t3L2tIyk8g一、微内核架构简介1.1微内核的概念微内核架构（Microke...
- ThreeJS 入门教程(一) 是选择桌面的固守还是云原生?
-
导读：最近我购置了一台新的电脑，硬盘空间只有1T。我很担心这个电脑还能用多久。性能限制或者空间的限制，都使得在未来3-5年内，这个电脑会被淘汰。但是，基于云APP的使用，老的电脑是足够了，而且，我们也...
- 推荐三款正则可视化工具「JS篇」（正则在线调试）
-
作者：代码先森转发链接：https://mp.weixin.qq.com/s/rw29yKBwti5sIsx2GKG9pw前言最近老王对可视化非常着迷。例如，算法可视化、正则可视化、Vue数据劫持可...
- Javascript 多线程编程的前世今生
-
作者：jolamjiang腾讯技术工程转发链接：https://mp.weixin.qq.com/s/87C9GAFb0Y_i5iPbIL5Hzg为什么要多线程编程大家看到文章的标题《Javasc...
- Pug 3.0.0正式发布，不再支持 Node.js 6/8
-
作者：李俊辰前端之巅转发链接：https://mp.weixin.qq.com/s/q-49Gf-SFijeu7d2MqztIQ前言近日，Pug3.0.0正式发布，Pug原名Jade，是由...
- 36个工作中常用的JavaScript函数片段「值得收藏」
-
作者：Eno_Yao转发链接：https://segmentfault.com/a/1190000022623676前言如果文章和笔记能带您一丝帮助或者启发，请不要吝啬你的赞和收藏，你的肯定是我前进的...
- 深入JavaScript教你内存泄漏如何防范
-
作者：大道至简转发链接：https://mp.weixin.qq.com/s/0w6aWwpR3MAJnmyLwDnAzA前言一般情况下，忽视内存管理不会对传统的网页产生显著的后果。这是因为，用户刷新...
- 由浅入深，66条JavaScript面试知识点(七)
-
作者：JakeZhang转发链接：https://juejin.im/post/5ef8377f6fb9a07e693a6061目录由浅入深，66条JavaScript面试知识点（一）由浅入深，66...
- 用STM32做了个电子秤，成本仅两位数，精度高!解析一下原理
-
俗话说得好！人在胖，秤在看！所以，我想DIY一个精度高的体重秤！并希望它不只能称体重：还能像这样称克重（可设置KG，G，最低可称100克）……这样一来，做甜品的时候，还能拿来应应急。保姆级教程，记录在...
- 前端开发需要了解常用7种JavaScript设计模式
-
作者|Deven译者|王强策划|小智转发链接：https://mp.weixin.qq.com/s/Lw4D7bfUSw_kPoJMD6W8gg前言JavaScript中的设计模式指的是...
- 毛姆的一个手法|王培军（毛姆作品简介）
-
鲁本斯画《海伦娜·芙尔曼肖像》钱锺书在《宋诗选注》文同小传中说：“具体的把当前风物比拟为某种画法或某某大画家的名作”，是“从文同正式起头”。如钱先生所举的：“峰峦李成似，涧谷范宽能”，“独坐水轩人不到...
- 欣赏 | 朝戈:我渴望找到直达心灵的永恒
-
朋友，通过艺术让我们共同感知世界的永恒与不朽。——朝戈橙色的人物117X71cm布面油画2003包与陈185cm×103cm2007年白色80cm×40cm2009年光布面油画-Light-Oilo...
- Web页面如此耗电!到了某种程度，会是大损失
-
现在用户上网大多使用移动设备或者笔记本电脑。对这两者来说，电池寿命都很重要。在这篇文章里，我们将讨论影响电池寿命的因素，以及作为一个web开发者，我们如何让网页耗电更少，以便用户有更多时间来关注我们的...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)