regex-lab-notes-css

Regex Lab 学习笔记 — CSS

id 与 class 的原则

• id 用于唯一性 + JS 需要 getElementById 才用。
• id 选择器权重高（1,0,0），以后覆盖麻烦。
• 样式多用 class，权重低（0,1,0），好维护。

flex: 1 的含义

• flex 是三个属性的简写：

flex: 1;

• 等价于：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;

• 含义：
  • grow：有剩余空间时怎么分
  • shrink：空间不够时怎么缩
  • basis：初始尺寸
• 常见写法：
  • flex: 1 平均分剩余空间
  • flex: 2 分到两倍空间
  • flex: none 不伸缩
  • flex: 0 0 200px 固定 200px

输入框、textarea 与布局

• 如果输入框宽度写死为 500px，父容器变宽时它不会自动跟着变。
• 更适合写成：

width: 100%;

• textarea 禁止手动拖拽大小：

resize: none;

• 如果要让某个区域占据剩余空间，可以给该区域所在的 flex 子项设置：

flex: 1;

• height: 100% 不一定生效，因为它要求父元素有明确高度；在 flex 布局里，更常见的做法是让父元素和子元素都使用 flex。

结果区滚动

• 如果想让 result-header 固定显示，而只有 result-list 滚动，可以把 result-content 设置为纵向 flex 容器，result-list 占剩余空间并开启滚动：

#result-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
 
#result-header {
    flex-shrink: 0;
}
 
#result-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

颜色与配色

• HSL 表示：
  • H 色相
  • S 饱和度
  • L 亮度
• 相比十六进制颜色，HSL 更容易单独调亮度。
• 例如让背景色加深 10%，可以通过降低亮度实现。

border 与 outline

• border 会占空间，参与布局，适合做模块边框。
• outline 不占空间，常用于 hover/focus 提示。
• 区分不同工作区时，更适合用 border；交互反馈时更适合用 outline。

按钮背景与文本样式

• background-color: none; 是无效值。
• 如果想让背景透明，应该写：

background-color: transparent;

• 文字水平居中：

text-align: center;

• 文字垂直居中，更推荐用 flex：

display: flex;
align-items: center;

换行与空白

• 普通块级元素里如果要保留换行，需要：

white-space: pre-wrap;

• <textarea> 天然支持换行显示。

错误提示样式

• 原始写法：

box-shadow: 0 0 8px 1px var(--error);

• 更推荐”内边框 + 外发光”的组合：

box-shadow:
    outline 0 0 0 1.5px rgb(215, 41, 41),
    0 0 12px 2px rgba(215, 41, 41, 0.25);

• 这样边界更清晰，视觉上也更柔和。

本轮排查过的 CSS 典型错误

• CSS 没效果时，要优先检查：
  • 选择器拼写
  • HTML 里的 id/class 是否一致
  • 规则是否被更高优先级覆盖