CSS3 用户界面

CSS 高级用户界面特性

探索增强用户交互和控制元素尺寸的 CSS 特性。

控制盒模型计算方式：box-sizing

box-sizing 属性改变了元素的总宽度和总高度的计算方式。

• content-box（默认值）：width 和 height 属性仅应用于内容区域。内边距（padding）和边框（border）会添加在指定的宽度/高度的外部，使得元素在视觉上比指定尺寸更大。
• border-box：width 和 height 属性包括内容、内边距（padding）和边框（border）。这使得元素尺寸更容易预测，因为添加内边距或边框不会改变元素的总体尺寸。

**最佳实践：**强烈建议全局应用 box-sizing: border-box; 以实现更直观的布局管理：

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit; /* 从 html 元素继承 */
}

这种方法使得设置元素尺寸简单得多，因为 width: 200px; 意味着元素在视觉上将是 200px 宽，无论其内边距或边框如何。

元素尺寸调整：resize

resize 属性允许用户调整元素的大小。为了使其生效，元素通常需要将其 overflow 属性设置为 visible 以外的值（例如，auto、scroll、hidden）。

常用值：

• none（默认值）：元素不可调整大小。
• both：用户可以同时调整高度和宽度。
• horizontal：用户只能调整宽度。
• vertical：用户只能调整高度。

此属性默认最常见于 <textarea> 元素，但也可应用于 <div> 等其他元素。

/* 使 div 元素可以水平调整大小 */
.resizable-box {
  border: 1px solid #ccc;
  padding: 1em;
  width: 300px;
  height: 150px;
  overflow: auto; /* 使 resize 生效所必需的 */
  resize: horizontal;
}

注意：现代浏览器对任意元素应用 resize 的支持良好，但如果需要支持旧版本浏览器，请检查兼容性。

轮廓偏移：outline-offset

outline 属性在元素的边框边缘外部绘制一条线。与 border 不同，outline 不占用空间，因此不影响布局。它常用于可访问性焦点指示器。

outline-offset 属性在轮廓线和元素的边框边缘之间添加空间。

.highlight-focus:focus {
  /* 默认浏览器轮廓可能不一致 */
  outline: none;
  /* 带偏移的自定义轮廓 */
  outline: 2px solid blue;
  outline-offset: 3px; /* 添加 3px 空间 */
}

这在元素及其焦点指示器之间提供了视觉分离，可以提高清晰度。

其他与 UI 相关的属性（较少使用 / 实验性）

原始教程提到了 nav-* 属性（nav-down、nav-left 等）。这些属性是早期方向导航规范（例如，用于电视遥控器）的一部分，但浏览器支持非常有限，并且通常不用于标准的 Web 开发。请重点关注上面介绍的广泛支持的属性。

关键 UI 属性总结

属性	描述
box-sizing	控制宽度/高度的计算方式（包括内边距/边框）。
resize	指定元素是否允许用户调整大小。
outline	在元素周围绘制一条线（在边框外部，不影响布局）。
outline-offset	在轮廓线和元素的边框边缘之间添加空间。
cursor	指定鼠标悬停在元素上方时显示的光标样式。

请查阅 MDN Web Docs，了解 CSS 属性和浏览器兼容性的最新详细信息。