最适合网络开发者的网站

CSS 参考

CSS 参考 CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 参考 Aural CSS Web 安全字体 CSS 后备字体 CSS 动画 CSS 单位 CSS PX-EM 转换器 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 实体

CSS 特性

强调色 对齐内容 对齐项目 对齐自身 全部 动画片 动画延迟 动画导演 动画持续时间 动画填充模式 动画迭代次数 动画名称 动画播放状态 动画计时功能 背景滤镜 背面可见性 背景 背景附件 背景混合模式 背景剪辑 背景颜色 背景图 背景原点 背景位置 背景重复 背景尺寸 边界 下边框 边框底部颜色 边框左下角半径 边框右下角半径 边框底部样式 边框底部宽度 边界折叠 边框颜色 边框图像 边框图像起始 边框图像重复 边框图像切片 边框图像源 边框图像宽度 左边框 左边框颜色 左边框样式 左边框宽度 边框半径 右边框 右边框颜色 右边框样式 右边框宽度 边框间距 边框样式 上边框 边框顶部颜色 边框左上角半径 边框右上半径 边框顶部样式 边框顶部宽度 边框宽度 底部 盒子装饰打破 盒子阴影 盒子大小 休息后 休息前 闯入 标题侧 插入符号颜色 @字符集 清除 夹子 剪辑路径 颜色 列数 列填充 柱间隙 列规则 列规则颜色 列规则样式 列规则宽度 列跨度 列宽 内容 反增 反复位 光标 方向 展示 空单元格 筛选 柔性 弹性基础 弹性方向 弹性流 弹性生长 弹性收缩 弹性包裹 漂浮 字体 @font-face 字体系列 字体功能设置 字体字距调整 字体大小 字体大小调整 字体拉伸 字体样式 字体变体 字体变体大写 字体粗细 差距 网格 网格区域 网格自动列 网格自动流 网格自动行 网格列 网格列末端 网格列间隙 网格列开始 网格间隙 网格行 网格行末端 网格行间隙 网格行开始 网格模板 网格模板区域 网格模板列 网格模板行 悬挂标点 高度 连字符 图像渲染 @进口 隔离 对齐内容 @keyframes 左边 字母间距 行高 列表样式 列表样式图像 列表样式位置 列表样式类型 利润 下边距 左边距 右边距 上边距 遮罩图像 掩码模式 掩码来源 掩膜位置 掩码重复 遮罩尺寸 最大高度 最大宽度 @媒体 最小高度 最小宽度 混合模式 对象适合 客体位置 不透明度 命令 孤儿 大纲 轮廓颜色 轮廓偏移 大纲样式 轮廓宽度 溢出 溢出包装 溢出-x 溢出 填充 内边距底部 左填充 右填充 顶部填充 分页符后 分页符之前 分页符内部 看法 视角起源 指针事件 位置 引号 调整大小 正确的 行距 滚动行为 制表符大小 表格布局 文本对齐 文本最后对齐 文字修饰 文字装饰颜色 文字修饰线 文字装饰风格 文字修饰粗细 文本缩进 文字对齐 文本溢出 文字阴影 文本转换 顶部 转换 变换原点 变换风格 过渡 转换延迟 过渡持续时间 过渡属性 转换时序函数 unicode-bidi 用户选择 垂直对齐 能见度 空白 寡妇 宽度 单词中断 字间距 自动换行 写作模式 z 索引


初学者的 CSS 课程

尿素

CSS Units


CSS 单位

CSS has several different units for expressing a length.

Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.

Example

Set different length values, using px (pixels):

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}
Try it Yourself »

Note: A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

For some CSS properties, negative lengths are allowed.

There are two types of length units: absolute and relative.


Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

Unit Description
cm centimeters Try it
mm millimeters Try it
in inches (1in = 96px = 2.54cm) Try it
px * pixels (1px = 1/96th of 1in) Try it
pt points (1pt = 1/72 of 1in) Try it
pc picas (1pc = 12 pt) Try it

* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.


Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.

Unit Description
埃姆 Relative to the font-size of the element (2em means 2 times the size of the current font) Try it
ex Relative to the x-height of the current font (rarely used) Try it
ch Relative to the width of the "0" (zero) Try it
rem Relative to font-size of the root element Try it
vw Relative to 1% of the width of the viewport* Try it
vh Relative to 1% of the height of the viewport* Try it
vmin Relative to 1% of viewport's* smaller dimension Try it
vmax Relative to 1% of viewport's* larger dimension Try it
% Relative to the parent element Try it

提示: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.


Browser Support

The numbers in the table specify the first browser version that fully supports the length unit.

Length Unit
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0