#CSS 实用属性总结

文章目录

• • 防脱发神器
  • 颜色的 Alpha 通道
  • 尺寸的百分比
  • 最大最小宽高
  • 伪类选择器
  • `contenteditable` 属性
  • `table` 元素
  • CSS中的大小/长度单位
  • • 绝对单位
    • 相对单位
    • • 与字体大小相关
      • 与视窗大小相关
      • 百分比单位
      • 动态计算单位
    • 时间单位
    • 角度单位
    • 分辨率单位
    • 使用建议

防脱发神器

为了更直观地控制元素尺寸，可以使用 box-sizing: border-box; 属性。这会让元素的宽高包含 padding 和 border，避免尺寸计算的困扰。许多网站会在样式初始化时添加以下代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

颜色的 Alpha 通道

颜色的 Alpha 通道表示透明度，其值在 0~1 之间：

• 0 表示完全透明。
• 1 表示完全不透明。

在 CSS 中，可以使用 rgba 为颜色添加 Alpha 通道。例如：

.alpha {
  /* 完全透明，等同于 transparent */
  color: rgba(0, 0, 0, 0);
  /* 完全不透明，等同于 rgb */
  color: rgba(0, 0, 0, 1);
  /* 半透明 */
  color: rgba(0, 0, 0, 0.5);
}

此外，rgba 还可以使用其他形式表示，例如：

• rgb(0 0 0 / 50%)（现代写法）。
• #00000080（十六进制透明度表示法）。

尺寸的百分比

几乎所有可以设置尺寸的属性都支持百分比，但它们的参考系可能不同：

• 普通元素的参考系为父元素的内容区域。
• 定位元素（如 absolute 或 fixed）的参考系为包含块的 padding 区域。

以下是常见百分比应用场景的总结：

最大最小宽高

• 最大宽高：max-width、max-height。
• 最小宽高：min-width、min-height。

这类属性可以限制元素的尺寸，避免其过大或过小。

实际开发中的常见用法：

1. 为 PC 端页面设置最小宽度，避免过窄。

   html {
     min-width: 1226px;
   }
   

2. 限制图片最大宽度，避免超出容器。

   img {
     max-width: 100%;
   }
   

伪类选择器

CSS 伪类选择器是一种用于选择特定状态元素的强大工具。

更多伪类选择器请参考 MDN 伪类文档。

contenteditable 属性

contenteditable 是一个布尔属性，可以应用于任意 HTML 元素，赋予其可编辑性。

示例：

<div contenteditable="true">可编辑的文本内容</div>

实际开发中，contenteditable 常用于实现富文本编辑器。

table 元素

table 元素用于定义表格结构，但随着 CSS 的发展，其使用频率大幅下降。现代开发中，更多使用 Flexbox 或 Grid 布局实现类似功能。

<table>
  <tr>
    <th>列名1</th>
    <th>列名2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

CSS 中的单位用于指定元素的尺寸、边距、间距、字体大小等。单位分为两大类：绝对单位和相对单位。以下是详细的解释：

CSS中的大小/长度单位

绝对单位

绝对单位表示固定的尺寸，通常不随视窗大小或其他因素变化。

相对单位

相对单位依赖于其他元素或环境，常用于响应式设计。

与字体大小相关

与视窗大小相关

百分比单位

动态计算单位

时间单位

用于动画的持续时间或延迟时间。

角度单位

用于指定旋转角度。

分辨率单位

用于描述屏幕或打印的分辨率。

使用建议

1. 响应式设计：推荐使用相对单位（如 %、em、rem 和视窗单位）来适配不同屏幕。
2. 字体排版：使用 rem 统一根字体大小，em 用于相对于局部字体大小的调整。
3. 动画：使用 ms 和 s 表达时间。
4. 计算单位：用 calc() 结合相对和绝对单位，提高布局灵活性。