CSS 单位 详解
CSS 单位
CSS 单位
CSS 有几种表示长度的不同单位。
许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。
长度是一个后面跟着长度单位的数字，诸如 10px、2em 等。
示例代码：
使用 px（像素）设置不同的长度值：
h1 { font-size: 60px; } p { font-size: 25px; line-height: 50px; }
完整实例【亲自试一试】：
<!DOCTYPE html> <html> <head> <style> h1 { font-size: 60px; } p { font-size: 25px; line-height: 50px; } </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
数字和单位之间不能出现空格。但是，如果值为 0，则可以省略单位。
对于某些 CSS 属性，允许使用负的长度。
长度单位有两种类型：绝对单位和相对单位。
绝对长度
绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。
不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。
| 单位 | 描述 | TIY |
|---|---|---|
| cm | 厘米 | 试一试 |
| mm | 毫米 | 试一试 |
| in | 英寸 (1in = 96px = 2.54cm) | 试一试 |
| px * | 像素 (1px = 1/96th of 1in) | 试一试 |
| pt | 点 (1pt = 1/72 of 1in) | 试一试 |
| pc | 派卡 (1pc = 12 pt) | 试一试 |
* 像素（px）是相对于观看设备的。对于低 dpi 的设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 表示多个设备像素。
相对长度
相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。
| 单位 | 描述 | TIY |
|---|---|---|
| em | 相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍） | 试一试 |
| ex | 相对于当前字体的 x-height(极少使用) | 试一试 |
| ch | 相对于 "0"（零）的宽度 | 试一试 |
| rem | 相对于根元素的字体大小（font-size） | 试一试 |
| vw | 相对于视口*宽度的 1% | 试一试 |
| vh | 相对于视口*高度的 1% | 试一试 |
| vmin | 相对于视口*较小尺寸的 1％ | 试一试 |
| vmax | 相对于视口*较大尺寸的 1％ | 试一试 |
| % | 相对于父元素 | 试一试 |
提示：em 和 rem 单元可用于创建完美的可扩展布局！
* 视口（Viewport）= 浏览器窗口的尺寸。如果视口宽 50 里面，则 1vw = 0.5cm。
浏览器支持
表格中的数字注明了完全支持该长度单位的首个浏览器版本。
| 长度单位 | |||||
|---|---|---|---|---|---|
| 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 |
完整实例1：
<!DOCTYPE html> <html> <head> <style> h1 {font-size: 1.5cm;} h2 {font-size: 1cm;} p { font-size: 0.5cm; line-height: 1cm; } </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例2：
<!DOCTYPE html> <html> <head> <style> h1 {font-size: 15mm;} h2 {font-size: 10mm;} p { font-size: 5mm; line-height: 10mm; } </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例3：
<!DOCTYPE html> <html> <head> <style> h1 {font-size: 1in;} h2 {font-size: 0.5in;} p { font-size: 0.2in; line-height: 0.5in; } </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例4：
<!DOCTYPE html> <html> <head> <style> h1 {font-size: 50px;} h2 {font-size: 30px;} p { font-size: 15px; line-height: 20px; } </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例5：
<!DOCTYPE html> <html> <head> <style> h1 {font-size: 50pt;} h2 {font-size: 25pt;} p { font-size: 15pt; line-height: 25pt; } </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例6：
<!DOCTYPE html> <html> <head> <style> h1 {font-size: 4.5pc;} h2 {font-size: 3pc;} p { font-size: 1.5pc; line-height: 3pc; } </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例7：
<!DOCTYPE html> <html> <head> <style> p { font-size: 16px; line-height: 2em; } div { font-size: 30px; border: 1px solid black; } span { font-size: 0.5em; } </style> </head> <body> <p>这些段落的 line-height 这样计算：2x16px = 32px。</p> <p>这些段落的 line-height 这样计算：2x16px = 32px。</p> <p>这些段落的 line-height 这样计算：2x16px = 32px。</p> <div>这个 div 元素的 font-size 被设置为 30px。<span>div 元素内部的 span 元素的 font-size 为 0.5em，其等于 0.5x30 = 15px。</span></div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例8：
<!DOCTYPE html> <html> <head> <style> div { font-size: 30px; border: 1px solid black; } span { font-size: 1ex; } </style> </head> <body> <div>这个 div 元素的 font-size 被设置为 30px。<span>div 元素内部的 span 元素的 font-size 为 1ex。</span></div> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例9：
<!DOCTYPE html> <html> <head> <style> body { font-size:16px; } div { font-size: 3ch; border: 1px solid black; } </style> </head> <body> <p>此文档的 font-size 是 16px。</p> <div>这个 div 元素的 font-size 是 3ch。</div> <p>ch 单位设置相对于字符 "0" 宽度的 font-size。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例10：
<!DOCTYPE html> <html> <head> <style> html { font-size:16px; } div { font-size: 3rem; border: 1px solid black; } #top-div { font-size: 2rem; border: 1px solid red; } </style> </head> <body> <p>此文档的 font-size 是 16px。</p> <div id="top-div"> 这个 div 的 font-size 为 2rem，转换为浏览器字体大小的2倍。 <div>这个 div 元素的 font-size 为 3rem。它同时也展示出不会继承其父元素的字体尺寸。</div> </div> <p>rem 单位设置的 font-size 相对于浏览器的基准字体尺寸，并不从其父元素继承。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例11：
<!DOCTYPE html> <html> <head> <style> h1 { font-size: 20vw; } </style> </head> <body> <h1>Hello</h1> <p>请调整浏览器窗口的宽度，来查看 h1 的字体大小如何变化。</p> <p>1vw = 1% 的视口宽度。</p> <p>IE8 以及更早的版本不支持 vw 单位。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例12：
<!DOCTYPE html> <html> <head> <style> h1 { font-size: 20vh; } </style> </head> <body> <h1>Hello</h1> <p>请调整浏览器窗口的高度，来查看 h1 的字体大小如何变化。</p> <p>1vh = 1% 的视口宽度。</p> <p>IE8 或更早的版本不支持 vh 单位。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例13：
<!DOCTYPE html> <html> <head> <style> h1 { font-size: 15vmin; } </style> </head> <body> <h1>Hello</h1> <p>请调整浏览器窗口的大小（宽度和高度），来查看 h1 的字体大小如何变化。</p> <p>1vmin = 1vw 或 1vh，以较小者为准。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例14：
<!DOCTYPE html> <html> <head> <style> h1 { font-size: 15vmax; } </style> </head> <body> <h1>Hello</h1> <p>Re请调整浏览器窗口的大小（宽度和高度），来查看 h1 的字体大小如何变化。</p> <p>1vmax = 1vw 或 1vh，以较大者为准。</p> <p>Edge 15 或更早的版本不支持 vmax 单位，Safari 6.1 或更早的版本也不支持。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例15：
<!DOCTYPE html> <html> <head> <style> body { font-size:16px; } div { font-size: 150%; border: 1px solid black; } </style> </head> <body> <p>此文档的 font-size 为 16px。</p> <div>这个 div 元素的 font-size 是 150%。</div> <p>% 单位设置相对于当前 font-size 的字体尺寸。</p> </body> </html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
