请举例说明你常用的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;
}
"以下是我常用的一些 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
4
![[哭笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_61.a296509.png)