CSS 技能速查
CSS 技能速查
1、shape-outside 圆形环绕
- 技能：
shape-outside: circle(50%) + float: left
- 实现：文字环绕圆形元素排列
2、direction 简约布局流向
- 技能：
direction: rtl
- 实现：布局从右向左排列（如聊天消息自己在右）
3、margin-inline-end 间隔
- 技能：
margin-inline-end: 10px
- 实现：根据 direction 流向自动调整间距方向
4、border-inline-start 边框
- 技能：
border-inline-start: 10px solid rgb(102, 0, 255)
- 实现：逻辑方向边框，适应不同书写方向
5、stretch 简约计算
- 技能：
width: stretch
- 实现：填充可用空间（替代
calc(100% - 30px)）
6、all 值 unset 清空全部样式
- 技能：
all: unset
- 实现：一键移除元素所有默认样式
7、fit-content 弹窗居中
- 技能：
width: fit-content + inset: 0 + margin: auto
- 实现：自适应内容宽度的弹窗居中
8、fit-content 内容弹性居中
- 技能：
width: fit-content + margin: 0 auto
- 实现：文字少自动居中，多时左对齐
9、inherit 继承样式
- 技能：
color: inherit
- 实现：强制继承父元素属性（如链接继承父容器颜色）
10、initial 反继承样式
- 技能：
font-size: initial
- 实现：恢复到浏览器默认值，打破继承链
11、inset 设置四个方向
- 技能：
inset: 30px 30px
- 实现：top/right/bottom/left 简写，类似 padding
12、revert 恢复指定样式
- 技能：
list-style: revert
- 实现：恢复到浏览器默认样式或继承值
13、writing-mode 文字方向
- 技能：
writing-mode: vertical-rl
- 实现：控制文字书写方向（如竖排古书风格）
14、断句 min-content、wbr、word-break
- 技能：
width: min-content、<wbr>、word-break: break-all
- 实现：长文本/URL 智能断行
15、文本的深入控制
- 技能：
white-space: pre-line、word-break: keep-all、word-wrap: break-word、text-justify: inter-word
- 实现：保留换行、CJK 断词优化、两端对齐
16、文字渐变、图片定位简写
- 技能：
background-clip: text + color: transparent、background: red url() no-repeat right 20px bottom 20px / 100px 50px
- 实现：文字渐变色、背景图片定位简写
17、column 与 flex 简写
- 技能：
column-count: 2、column-span: all、flex-flow: row wrap、flex: auto
- 实现：多列布局、Flex 流向简写、自适应弹性
18、flex-basis 响应式等份
- 技能：
flex-basis: 100px + flex-grow: 1
- 实现：基于最小宽度的响应式弹性布局
19、flex 中的 overflow 无效问题
- 技能：
min-width: 0 或 overflow: hidden
- 实现：打破 Flex 子项最小宽度保护，让单行省略生效
