防脱发神器

为了更直观地控制元素尺寸，可以使用 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 区域。

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

CSS 属性	百分比参考系	备注
width	父元素的宽度
height	父元素的高度	若父元素高度受自身内容影响，此值无效
padding	父元素的宽度
border	父元素的宽度
margin	父元素的宽度

最大最小宽高

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

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

实际开发中的常见用法：

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

   html {
         
         
     min-width: 1226px;
   }
   

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

   img {
         
         
     max-width: 100%;
   }
   

伪类选择器

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

伪类	作用
:link	匹配未访问的链接
:visited	匹配已访问的链接
:hover	匹配鼠标悬停的元素
:active	匹配被激活的元素（如鼠标按下但未松开的按钮）
:focus	匹配获得焦点的表单元素
:disabled	匹配禁用的表单元素
:checked	匹配被选中的复选框或单选框
:first-child	匹配父元素中的第一个子元素
:last-child	匹配父元素中的最后一个子元素
:nth-child(an+b)	匹配父元素中第 an+b 个子元素（从 1 开始计数）
:first-of-type	匹配父元素中指定类型的第一个子元素
:last-of-type	匹配父元素中指定类型的最后一个子元素
:nth-of-type(an+b)	匹配父元素中指定类型的第 an+b 个子元素

更多伪类选择器请参考 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中的大小/长度单位

绝对单位

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

单位	名称	说明
px	像素	最常用的单位，1px 通常等于设备像素（device pixel）
cm	厘米	真实的物理尺寸，依赖设备的像素密度
mm	毫米	1mm = 1/10 cm
Q	四分之一毫米	1Q = 1/4 mm
in	英寸	1in = 2.54cm
pt	点	印刷行业使用的单位，1pt = 1/72 英寸
pc	派卡	1pc = 12pt

---

相对单位

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

与字体大小相关

单位	名称	说明
em	字体大小	相对于当前元素的字体大小。如果父元素字体大小为 16px，则 2em = 32px。
rem	根字体大小	相对于根元素（html）的字体大小，通常用于全局一致的排版设计。
ex	x 高度	相对于当前字体中小写字母 x 的高度，较少使用。
ch	字符宽度	相对于当前字体中数字 0 的宽度。

与视窗大小相关

单位	名称	说明
vw	视窗宽度的百分比	1vw = 视窗宽度的 1%。
vh	视窗高度的百分比	1vh = 视窗高度的 1%。
vmin	最小视窗尺寸单位	视窗宽度和高度中较小的那个的 1%。
vmax	最大视窗尺寸单位	视窗宽度和高度中较大的那个的 1%。

百分比单位

单位	名称	说明
%	百分比	相对于父元素的尺寸。宽度和高度计算方式可能不同。

动态计算单位

单位	名称	说明
calc()	动态计算	用表达式动态计算值，例如 width: calc(100% - 50px)。
clamp()	自动限制范围单位	设置一个值在最小值和最大值之间，例如 clamp(1rem, 5vw, 2rem)。

---

时间单位

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

单位	名称	说明
s	秒	用于较长的动画时间，例如 1s = 1 秒。
ms	毫秒	用于精确的动画时间，例如 100ms = 0.1 秒。

---

角度单位

用于指定旋转角度。

单位	名称	说明
deg	度	最常用的单位，360deg = 一整圈。
rad	弧度	1rad = 约 57.296deg。
grad	百分度	1grad = 0.9deg（整圈 400grad）。
turn	圈数	1turn = 一整圈（等于 360deg）。

---

分辨率单位

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

单位	名称	说明
dpi	每英寸点数	每英寸的像素点数量。
dpcm	每厘米点数	每厘米的像素点数量。
dppx	每像素点数	设备像素比，1dppx = 96dpi。

---

使用建议

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