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

列表（Lists）

HTML 列表类型

复习一下HTML：

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

常用 CSS 属性

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 为默认，标记在左侧。

自定义列表标记

css 复制代码

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（阴影，常用于替代粗边或增加层次）

css 复制代码

.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 基本样式

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; 可以设置固定布局（更可预测、性能更好），需要设置列宽或让单元格内容换行：

css 复制代码

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;

css 复制代码

.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，以逗号分隔，最前面的在最上层。

css 复制代码

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

鼠标与交互（Mouse & Pointer）

光标（cursor）

css 复制代码

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：键盘聚焦（务必样式化，使键盘用户可见）。

css 复制代码

.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 的设备上生效：

css 复制代码

@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：四分之一毫米（较少用）。