1. 让文字在父元素中垂直居中
在 CSS 中，有多种方法可以让文字在父元素中垂直居中。以下是其中两种常见的方法：使用 line-height 和使用 flexbox。
1.1 使用 line-height
line-height 可以控制行与行之间的距离，也可以用它来让文字在父元素中垂直居中。具体做法是将 line-height 的值设置与父元素的高度相等，代码如下：
.parent {
height: 100px; /* 父元素高度 */
line-height: 100px; /* 行高等于父元素高度 */
}
.parent span {
vertical-align: middle; /* 让 span 元素垂直居中 */
}
1.2 使用 flexbox
使用 flexbox 可以更方便地让元素在容器中垂直居中。代码如下：
.parent {
height: 100px;
display: flex;
align-items: center; /* 让子元素垂直居中 */
}
2. 使用 ::after 伪元素为元素添加内容
使用 ::after 伪元素可以为元素添加内容，常用于在元素后面添加行内元素或背景图。具体做法是在 CSS 中使用 ::after，并为其设置内容和样式，代码如下：
.element::after {
content: "→"; /* 添加箭头 */
font-size: 12px;
color: #999; /* 设置颜色 */
}
3. 使用 calc() 计算元素的宽度或高度
calc() 函数可以计算 CSS 属性值，并用于设置元素的宽度或高度。使用 calc() 函数，可以使 CSS 代码更加简洁易懂。代码如下：
.element {
width: calc(50% - 10px); /* 宽度为父元素宽度的一半减去 10px */
height: calc(100vh - 100px); /* 高度为视口高度减去 100px */
background-color: #999;
}
4. 实现三栏布局
三栏布局是常见的 Web 布局之一，包括左右两个定宽度列和中间自适应宽度列。以下是使用 CSS 实现三栏布局的示例：
.container {
display: flex;
}
.left {
width: 100px;
background-color: #f00;
}
.middle {
flex: 1;
background-color: #0f0;
}
.right {
width: 200px;
background-color: #00f;
}
5. 使用 transition 添加过渡效果
使用 transition 属性可以为元素添加平滑的过渡效果。常用于为鼠标悬停或点击事件添加效果，代码如下：
.element {
transition: all .3s ease;
}
.element:hover {
transform: scale(1.1);
}
6. 添加阴影效果
使用 box-shadow 属性可以为元素添加阴影效果。代码如下：
.element {
box-shadow: 2px 2px 10px rgba(0, 0, 0, .5); /* 水平偏移量、垂直偏移量、模糊半径、阴影颜色 */
}
7. 自定义滚动条样式
使用 ::-webkit-scrollbar 伪类可以自定义滚动条样式。例如，可以为滚动条添加背景颜色和圆角效果，代码如下：
.element::-webkit-scrollbar {
width: 8px; /* 滚动条宽度 */
height: 8px; /* 滚动条高度 */
background-color: #eee; /* 滚动条背景颜色 */
border-radius: 4px; /* 滚动条圆角 */
}
.element::-webkit-scrollbar-thumb {
background-color: #999; /* 滚动条拖动块背景颜色 */
border-radius: 4px; /* 滚动条拖动块圆角 */
}
8. 修改选中文本的颜色
使用 ::selection 伪元素可以修改选中文本的颜色。代码如下：
p::selection {
background-color: #f00;
color: #fff;
}
9. 设置超链接无下划线
使用 text-decoration 属性可以设置超链接的文本装饰效果，包括下划线、删除线等。为了使超链接更加美观，通常会将其下划线去除，代码如下：
a {
text-decoration: none;
}
10. 修改表单元素样式
使用 CSS 可以修改表单元素的样式，包括输入框、下拉框等。以下是几个常见的表单元素样式修改方法：
10.1 修改输入框样式
使用 border-radius 属性可以为输入框添加圆角效果。代码如下：
input[type="text"] {
border-radius: 4px; /* 左右两侧圆角 */
}
10.2 修改下拉框样式
使用 appearance 属性可以修改下拉框样式，包括背景颜色、边框、箭头等。代码如下：
select {
appearance: none; /* 隐藏原始下拉框 */
background: url(arrow.png) no-repeat right center; /* 设置背景 */
padding-right: 20px; /* 留出箭头位置 */
}
10.3 修改复选框和单选框样式
使用 ::before 和 ::after 伪元素可以自定义复选框和单选框的样式。代码如下：
input[type="checkbox"]::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 4px;
border: 1px solid #999;
border-radius: 2px;
box-sizing: border-box;
background-color: #fff;
vertical-align: middle;
}
input[type="checkbox"]:checked::after {
content: "?";
display: inline-block;
color: #999;
font-size: 12px;
width: 16px;
height: 16px;
margin-right: 4px;
border-radius: 2px;
text-align: center;
line-height: 16px;
vertical-align: middle;
}
input[type="radio"]::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 4px;
border: 2px solid #999;
border-radius: 50%;
box-sizing: border-box;
background-color: #fff;
vertical-align: middle;
}
input[type="radio"]:checked::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-right: 4px;
border-radius: 50%;
background-color: #999;
vertical-align: middle;
}
11. 使用 @media 查询设置响应式布局
使用 @media 查询可以根据不同的屏幕宽度设置不同的 CSS 样式，从而实现响应式布局。以下是一个简单的响应式布局示例：
@media screen and (max-width: 480px) {
/* 当屏幕宽度小于等于 480px 时执行以下 CSS 代码 */
.element {
font-size: 12px;
}
}
12. 使用 transform 属性实现动画效果
使用 transform 属性可以实现多种动画效果，包括旋转、缩放、平移等。代码如下：
.element {
transition: transform .3s ease;
}
.element:hover {
transform: rotate(45deg) scale(1.1) translateX(10px);
}
13. 使用 filter 属性实现图像处理效果
使用 filter 属性可以实现多种图像处理效果，包括模糊、灰度、反转等。代码如下：
img {
filter: grayscale(100%); /* 图片变成黑白效果 */
}
14. 使用 linear-gradient() 函数创建渐变背景
使用 linear-gradient() 函数可以创建线性渐变背景。代码如下：
.element {
background: linear-gradient(to bottom, #f00, #00f); /* 从上到下渐变 */
}
15. 使用 nth-child() 选择器选择元素
使用 :nth-child() 选择器可以选择一组中的第 n 个元素。例如，以下 CSS 代码将为表格中的偶数行添加背景颜色：
tr:nth-child(even) {
background-color: #f2f2f2;
}
16. 使用 flexbox 布局实现两栏布局
使用 flexbox 布局可以更方便地实现多种布局效果，包括两栏布局。以下是一个使用 flexbox 布局实现的两栏布局示例：
.container {
display: flex;
}
.left {
width: 200px;
background-color: #f00;
}
.right {
flex: 1;
background-color: #0f0;
}
17. 使用 vw 和 vh 单位设置元素尺寸
使用 vw 和 vh 可以根据视口宽度和高度设置元素的宽度和高度，代码如下：
.element {
width: 50vw; /* 宽度为视口宽度的一半 */
height: 50vh; /* 高度为视口高度的一半 */
background-color: #999;
}
18. 使用 opacity 属性设置元素透明度
使用 opacity 属性可以设置元素的透明度。代码如下：
.element {
opacity: .5; /* 设置透明度为 50% */
}
19. 使用 overflow 属性设置元素溢出处理方式
使用 overflow 属性可以设置元素的溢出处理方式，包括隐藏溢出内容、显示滚动条等。以下是一个隐藏溢出内容、显示滚动条的例子：
.element {
width: 200px;
height: 100px;
overflow: auto; /* 溢出内容隐藏，显示滚动条 */
}
20. 使用 background-position 属性设置背景图片位置
使用 background-position 属性可以设置背景图片的位置。以下是一个将背景图片居中显示的例子：
.element {
background: url(image.jpg) no-repeat center center; /* 将背景图片居中显示 */
background-size: cover; /* 背景图片等比例缩放以覆盖整个元素 */
}
结语
以上是 20 个 CSS 小技巧，希望对你提升开发技能有所帮助。