#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 区域。
以下是常见百分比应用场景的总结：
| CSS 属性 | 百分比参考系 | 备注 |
|---|---|---|
width | 父元素的宽度 | |
height | 父元素的高度 | 若父元素高度受自身内容影响，此值无效 |
padding | 父元素的宽度 | |
border | 父元素的宽度 | |
margin | 父元素的宽度 |
最大最小宽高
- 最大宽高：
max-width、max-height。 - 最小宽高：
min-width、min-height。
这类属性可以限制元素的尺寸，避免其过大或过小。
实际开发中的常见用法：
- 为 PC 端页面设置最小宽度，避免过窄。
html { min-width: 1226px; } - 限制图片最大宽度，避免超出容器。
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。 |
使用建议
- 响应式设计：推荐使用相对单位（如
%、em、rem和视窗单位）来适配不同屏幕。 - 字体排版：使用
rem统一根字体大小，em用于相对于局部字体大小的调整。 - 动画：使用
ms和s表达时间。 - 计算单位：用
calc()结合相对和绝对单位，提高布局灵活性。
原文地址：https://blog.csdn.net/CNew333/article/details/145227890
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！