小码哥的IT人生

CSS 单位 详解

css3基础 2022-05-23 12:12:43小码哥的IT人生shichen

CSS 单位

CSS 单位

CSS 有几种表示长度的不同单位。

许多 CSS 属性接受“长度”值,诸如 widthmarginpaddingfont-size 等。

长度是一个后面跟着长度单位的数字,诸如 10px2em 等。

示例代码:

使用 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

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024