css的字體單位

時間 2019-12-08

標籤 css 字體單位欄目 CSS 简体版

原文原文鏈接

我將爲你們介紹3種字體單位，分別是px,em和rem。首先我先爲你們大體介紹一下，通常初學者使用字體單位px較多，1px該多大就多大是一個固定值,也就是px是一個絕對字體單位。而em和rem是相對字體單位，雖然em和rem是相對字體單位可是它們又有所不一樣，em是相對於它的父級字體大小，rem是相對於html的字體大小。如今你們確定還不是很明白，接下來我將用一段代碼向你們展現。css

1.首先爲你們介紹的是px字體單位html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding:0;
				margin:0;
			}
			.box{
				font-size:80px;
			}
		</style>
	</head>	<body>
		<div class = "box">
			<div class = "div1">你好</div>
			<div class = "div2">真是的</div>
		</div>
	</body>
</html>

運行結果：字體

如今咱們對如今的結果進行分析：咱們如今只對box設置了字體的大小，box是div1和div2的父級，若是沒有再對div1和div2設置字體大小的話，那麼div1和div2將繼承它們父級的字體大小都是80px；htm

若是給div1和div2自己具體設置字體大小，那麼它們運行的結果不會再繼續跟隨父級。blog

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding:0;
				margin:0;
			}
			.box{
				font-size:80px;
			}
			.div1{
				font-size:20px;
			}
			.div2{
				font-size:25px;
			}
		</style>
	</head>
	<body>
		<div class = "box">
			<div class = "div1">你好</div>
			<div class = "div1">真是的</div>
		</div>
	</body>
</html>

運行結果：繼承

你好

真是的

能夠看到div1的字體大小已經變成了20px,div2的字體大小已經變成了25px;而跟它們父級的80px沒有一點關係。

2.rem（父級字體的大小仍採用一開始的案例）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding:0;
				margin:0;
			}
			.box{
				font-size:80px;
			}
		</style>
	</head>
	<body>
		<div class = "box">
			<div class = "div3">你好</div>
			<div class = "div4">真是的</div>
		</div>
	</body>
</html>

運行結果：utf-8

如今給div3和div4設置字體大小：rem

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding:0;
				margin:0;
			}
			.box{
				font-size:80px;
			}
			.div3{
				font-size:2em;
			}
			.div4{
				font-size:1em;
			}
		</style>
	</head>
	<body>
		<div class = "box">
			<div class = "div3">你好</div>
			<div class = "div4">真是的</div>
		</div>
	</body>
</html>

再次運行，觀察結果：

你好

真是的

能夠看到此時div4的字體大小和一開始沒有設置的時候同樣大也就是在此次的代碼中說1em = 80px;而div3的字體大小是80px的兩倍也就是說2em = 2*80px;若是我將box的字體大小改成60px,那麼1em = 60px;也就是說em s是相對於父級的字體單位。

3.最後要爲你們介紹的是rem

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding:0;
				margin:0;
			}
			html{
				font-size:30px;
			}
			.box1{
				font-size:60px;
			}
		</style>
	</head>
	<body>
		<div class = "box1">
			<div class = "div5">你好</div>
			<div class = "div6">真是的</div>
		</div>
	</body>
</html>

運行結果：此時div5和div6的字體大小都是60px;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding:0;
				margin:0;
			}
			html{
				font-size:30px;
			}
			.box1{
				font-size:60px;
			}
			.div5{
				font-size:1.2rem;
			}
			.div6{
				font-size:2rem;
			}
		</style>
	</head>
	<body>
		<div class = "box1">
			<div class = "div5">你好</div>
			<div class = "div6">真是的</div>
		</div>
	</body>
</html>

運行結果：

此時你好的字體大小是36px,div6的字體大小是60px;也就是說1.2rem = 1.2*30px;2em = 2*30px;而跟父級的字體大小沒有關係，若是html的字體大小變爲45px,那麼1px = 45px;也就是說rem是相對於html的字體單位。it

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。