css 实用代码片段

# common

align-items: 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间
justify-content: 属性设置了浏览器如何沿着弹性盒子布局的主轴和网格布局的主轴在内容项之间和周围分配空间
align-self: 让组件根据内容宽度自适应，而不是扩展到父容器的最大宽度
align-content:
linear-gradient: linear-gradient (opens new window)
- <angle> The gradient line's angle of direction. A value of 0 deg is equivalent to to top; increasing values rotate clockwise from there.
- case
  - background: linear-gradient(135deg, #FDA158, #E02E24); 左上到右下渐变
overflow: hidden。技巧: 设置圆角只需要再最外层设置下就可以了
opacity: 不透明度

# text

textOverflow: 文字缩略。 "clip" | "ellipsis"
textAlign: 文字居中
lineHeight: 垂直居中可能使用到
whiteSpace: nowrap 不换行
fontWeight: "normal" | "bold" | "ultralight" | "thin" | "light" | "medium" | "semibold"
fontFamily: "default" | "iconfont" | "walletfont" | string;

# rotate

# 画三角形

改变 border-bottom 到 200, 为什么我感觉是高变成了 200 呢

.shape {
    height: 0;
    width: 0;
    border-bottom: 30px solid black;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

1
2
3
4
5
6
7

如果您将 border-bottom 的值更改为 200 像素, 并且其他边的值保持不变, 那么三角形的底边将变得更长, 因为它现在是 200 像素宽的黑色实线。这会导致整个三角形的高度看起来变得更高, 因为它的底部变得更长了

虽然 height 和 width 属性设置为 0, 但这些属性只影响元素自身的大小, 而不会影响元素上的边框。所以即使设置了 0, 仍然可以通过边框来创建形状

因此, 更改 border-bottom 的值会改变三角形的底边长度, 进而改变整个三角形的尺寸和外观

# thead/table 元素

<thead> 元素用于表示 HTML 表格的表头部分。在表格中, 表头通常包含列标题, 用于描述每一列的内容

在 HTML 中, <thead> 元素通常位于 <table> 元素的开始位置, 并包含一个或多个 <tr> 元素, 每个 <tr> 元素代表表头中的一行

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>25</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>30</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# link

Learn to style HTML using CSS (opens new window)

#snippet

上次更新: 2025/10/19, 21:13:45

← css 入门指南 vue→