common

• align-items: 属性设置了浏览器如何沿着弹性盒子布局的 纵轴 和网格布局的主轴在内容项之间和周围分配空间
• justify-content: 属性设置了浏览器如何沿着弹性盒子布局的 主轴 和网格布局的主轴在内容项之间和周围分配空间
• align-self: 让该子元素在父容器的"交叉轴"居中。
  • 值: auto | flex-start | flex-end | center | baseline | stretch
  • 适用于: Flexbox 和 Grid 布局中的子元素
  • 作用: 覆盖父容器的 align-items 设置，单独控制某个子元素的对齐方式
• text-align: 文本对齐方式
  • 值: left | right | center | justify
  • 作用范围:
    • ✅ 文本内容对齐
    • ✅ 内联元素（inline）对齐
    • ✅ 行内块级元素（inline-block）对齐
    • ❌ 块级元素（block）本身的对齐无效（需使用 margin: auto 或 flexbox）
• 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

• text-overflow: 文字缩略。 "clip" | "ellipsis"
• textAlign: 文本对齐方式（详见上方 common 部分的对比说明）
• lineHeight: 垂直居中可能使用到
• whiteSpace: nowrap 不换行
• fontWeight: "normal" | "bold" | "ultralight" | "thin" | "light" | "medium" | "semibold"
• fontFamily: "default" | "iconfont" | "walletfont" | string;

rotate

• rotateX: rotateX (opens new window)
• rotateY: rotateY (opens new window)
• rotateZ: rotateZ (opens new window)

Q

text-align vs align-self 对比

特性	text-align	align-self
适用布局	普通文档流、内联元素	Flexbox、Grid 布局
作用方向	水平方向（左右对齐）	交叉轴方向（垂直对齐，在 flex 中）
作用对象	文本、内联元素、inline-block	Flex/Grid 容器中的子元素
继承性	可继承	不可继承
使用场景	文本对齐、图片居中（配合 inline-block）	Flex/Grid 布局中的元素对齐
示例	text-align: center;	align-self: center;

实际应用:

/* text-align: 用于普通布局中的文本和内联元素 */
.container {
  text-align: center; /* 文本和内联元素居中 */
}

/* align-self: 用于 Flexbox 中的单个子元素 */
.flex-container {
  display: flex;
  align-items: flex-start; /* 默认对齐 */
}
.flex-item {
  align-self: center; /* 这个子元素单独居中 */
}

画三角形

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

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

如果您将 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>

link

• Learn to style HTML using CSS (opens new window)