请举例说明你常用的css技巧有哪些?
"以下是我常用的一些 CSS 技巧的示例:

1. 盒模型调整:使用 `box-sizing: border-box;` 可以更方便地控制盒模型的尺寸。

```css
.box {
box-sizing: border-box;
width: 200px;
padding: 10px;
border: 1px solid black;
}
```

2. 文本截断:使用 `text-overflow: ellipsis;` 和 `white-space: nowrap;` 可以实现文本溢出时的省略号显示。

```css
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
```

3. 清除浮动:使用 `clearfix` 类可以清除浮动,防止父容器塌陷。

```css
.clearfix::after {
content: \"\";
display: table;
clear: both;
}
```

4. 水平垂直居中:使用 `flexbox` 可以轻松实现元素的水平垂直居中。

```css
.container {
display: flex;
justify-content: center;
align-items: center;
}
```

5. 响应式布局:使用媒体查询可以根据不同屏幕大小应用不同的样式,实现响应式布局。

```css
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}
```

6. 动画效果:使用 `@keyframes` 和 `animation` 属性可以创建各种动画效果。

```css
@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}

.box {
animation: slide-in 1s ease-in-out;
}
展开
1