在前端开发中，CSS代码片段可以极大地提高我们的工作效率。以下是一些我常用的CSS代码片段：
- 清除默认样式：
用于消除浏览器默认样式的影响，确保页面在不同浏览器中具有一致的外观。
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
- Flexbox布局：
Flexbox是一种强大的布局模式，可以轻松实现各种复杂的布局。
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
flex-direction: column; /* 垂直排列子元素 */
}
- 文本截断：
当文本超出容器宽度时，显示省略号。
.text-truncate {
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 显示省略号 */
}
- CSS变量：
使用CSS变量可以方便地管理和修改主题颜色、字体大小等样式。
:root {
--primary-color: #3498db;
--secondary-color: #e67e22;
--font-size: 16px;
}
body {
color: var(--primary-color);
font-size: var(--font-size);
}
- 响应式布局：
使用媒体查询实现响应式布局，使页面在不同设备上都能良好地显示。
@media (max-width: 768px) {
/* 在宽度小于768px的设备上应用以下样式 */
.container {
flex-direction: column; /* 垂直排列子元素 */
}
}
- 渐变背景：
使用线性渐变或径向渐变创建吸引人的背景效果。
body {
background: linear-gradient(to right, #ff9966, #ff5e62); /* 线性渐变 */
/* background: radial-gradient(circle, #ff9966, #ff5e62); /* 径向渐变 */ */
}
- 阴影效果：
为元素添加阴影效果，增强立体感。
.box {
width: 200px;
height: 200px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 盒子阴影 */
/* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影 */ */
}
- 动画效果：
使用CSS动画为页面添加动态效果，提升用户体验。
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader {
animation: spin 2s linear infinite; /* 应用动画 */
}