完整教程：CSS笔记4：CSS：列表、边框、表格、背景、鼠标与常用长度单位

CSS笔记4：CSS：列表、边框、表格、背景、鼠标与常用长度单位

---

列表（Lists）

HTML 列表类型

复习一下HTML：

1. 无序列表：<ul> + <li>
2. 有序列表：<ol>（可使用 type 或 CSS 控制编号样式）
3. 定义列表：<dl>、<dt>、<dd>（用于术语/定义、FAQ 等）

常用 CSS 属性

ul { list-style-type: disc;         /* disc, circle, square, none */ }
ol { list-style-type: decimal;      /* decimal, lower-alpha, upper-roman, ... */ }
ul.inline { list-style: none; display:flex; gap:12px; padding:0; margin:0; }
li { list-style-position: inside;   /* inside | outside */ }

• list-style 是 list-style-type, list-style-position, list-style-image 的简写。
• list-style-position: inside 会把标记视为文本的一部分（影响缩进和换行）；outside 为默认，标记在左侧。

自定义列表标记

li.custom {
list-style: none;
position: relative;
padding-left: 1.6em;
}
li.custom::before {
content: "•";
position: absolute;
left: 0;
top: 0;
transform: translateY(0.15em);
color: var(--primary);
}

或者使用图片：list-style-image: url('bullet.svg'); — 注意：::before 更灵活。

可访问性提示

• 列表用于语义化分组；不要用 <div> 结合 CSS 来代替真正的列表（影响屏幕阅读器与结构化信息）。
• 对于带交互的列表项（例如可点击的菜单），确保键盘可聚焦（tabindex / role / aria-*）并处理 :focus 样式。

---

边框（Borders）

基本属性

• border: 简写（border-width border-style border-color）
• border-width, border-style, border-color
• border-top, border-right, border-bottom, border-left（四边单独控制）
• border-radius（圆角）
• outline（不占位的外轮廓，用于 focus）
• box-shadow（阴影，常用于替代粗边或增加层次）

.card {
border: 1px solid rgba(0,0,0,0.08);
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

圆角细节

• border-radius: 8px 4px 8px 4px; 可分别设置四角（顺序：top-left, top-right, bottom-right, bottom-left）。
• 圆角与 overflow: hidden：如果要让子元素（如图片）也裁切成圆角，容器需 overflow: hidden。

边框样式 & 图片边框

• border-style: solid | dashed | dotted | double | groove | ridge | inset | outset | none
• 使用图片作为边框：border-image（较少用、兼容性注意）

性能与可访问性

• box-shadow 比大量宽边框更轻量且可控，但过多阴影会影响渲染。
• outline 用于 focus 表示更好，因为不会影响布局；但样式需可见以便键盘用户识别。

---

表格（Tables）

CSS 基本样式

table {
width: 100%;
border-collapse: collapse; /* collapse | separate */
border-spacing: 0;
}
th, td {
padding: 8px 12px;
border: 1px solid rgba(0,0,0,0.06);
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
padding: 8px;
}

• border-collapse: collapse; 会合并相邻边框（常用于简洁表格）；separate 则使用 border-spacing。

布局性能与响应式

• table-layout: auto;（默认）浏览器根据内容动态决定列宽。
• table-layout: fixed; 可以设置固定布局（更可预测、性能更好），需要设置列宽或让单元格内容换行：

table { table-layout: fixed; }
td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

• 响应式表格技巧：
  • 在小屏幕把表格横向滚动：.table-wrap { overflow-x:auto; }
  • 使用卡片化展示（把每行变为块级卡片）或使用 display: grid 模拟表格以减少滚动。

可访问性提示

• 总是为表头使用 <th> 并添加 scope 或 headers 属性（复杂表格）。
• 如果表格仅用于布局（老式做法），请改用语义化的布局（div+CSS Grid/Flex），避免让屏幕阅读器误解内容。

---

背景（Backgrounds）

基本属性

• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-attachment（scroll | fixed | local）
• background-clip, background-origin（控制背景绘制区域）
• 简写：background: url(...) no-repeat center/cover;

.hero {
background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('/img/hero.jpg') center/cover no-repeat;
background-attachment: fixed; /* parallax-like (mobile注意性能和兼容) */
}

渐变（Gradients）

• 线性渐变：linear-gradient(...)
• 径向渐变：radial-gradient(...)
• 渐变可与背景图片叠加用于遮罩/可读性提升。

多重背景

• 可以同时指定多个 background-image，以逗号分隔，最前面的在最上层。

.element {
background-image: linear-gradient(...), url(...);
}

---

鼠标与交互（Mouse & Pointer）

光标（cursor）

button { cursor: pointer; }      /* 指示可点击 */
a[disabled] { cursor: not-allowed; }
textarea { cursor: text; }
.grab { cursor: grab; }          /* 可拖动视觉提示 */
.grabbing { cursor: grabbing; }  /* 拖动中 */

• 避免把 cursor: none 用于交互元素（会降低可用性）。

:hover / :active / :focus

• :hover：鼠标悬停。
• :active：鼠标按下（通常和 :focus 联合使用）。
• :focus：键盘聚焦（务必样式化，使键盘用户可见）。

.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(...); }
.btn:focus { outline: 3px solid Highlight; outline-offset: 2px; }

• 对于交互元素，要同时处理 :hover、:focus-visible（更细粒度，仅 keyboard focus 显示）和 :active，以覆盖键盘与触摸设备。

指针事件与选择行为

• pointer-events: none; 可以让元素“穿透”鼠标事件（比如纯装饰层）。
• user-select: none; 阻止文本选择（用于拖动句柄），但避免在可复制文本上使用。

触摸与指针兼容

• 现代设备使用 Pointer Events（pointerdown, pointerup），比兼容鼠标/触摸的 touch* 更通用。
• 对于 hover 效果，在移动设备可能无意义；使用 @media (hover: hover) 来限制 hover 样式只在支持 hover 的设备上生效：

@media (hover: hover) {
.card:hover { transform: scale(1.02); }
}

---

常用长度单位（Units）

绝对单位（不要常用在响应式布局）

• cm, mm, in, pt, pc — 更多用于打印或需要精确物理尺寸的场景。

相对单位（推荐）

• px（像素）：设备像素的 CSS 像素。直观、常用，但对用户缩放/无障碍不总是最好。
• rem：相对于根元素 html 的字体大小（推荐用于全局尺寸、布局）。
• em：相对于当前元素的字体大小（用于组件内部相对缩放）。
• %：相对于父元素或属性期望的参考值（如宽度百分比）。
• vw / vh：视窗宽/高的百分比（1vw = 1% viewport width）。
• vmin / vmax：视窗最小/最大边的 1%。
• ch：数字 0 的宽度（用于输入字段宽度估算）。
• ex：小写字母 x 的高度（在实践中不常用，浏览器差异较大）。
• q：四分之一毫米（较少用）。