<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>單位</title>
<style type="text/css">
/*
* 長度單位
* 像素 px
* - 像素是我們在網頁中使用的最多的一個單位，
* 一個像素就相當於我們屏幕中的一個小點，
* 我們的屏幕實際上就是由這些像素點構成的
* 但是這些像素點，是不能直接看見。
* - 不同顯示器一個像素的大小也不相同，
* 顯示效果越好越清晰，像素就越小，反之像素越大。
*
* 百分比 %
* - 也可以將單位設置爲一個百分比的形式，
* 這樣瀏覽器將會根據其父元素的樣式來計算該值
* - 使用百分比的好處是，當父元素的屬性值發生變化時，
* 子元素也會按照比例發生改變
* - 在我們創建一個自適應的頁面時，經常使用百分比作爲單位
*
* em
* - em和百分比類似，它是相對於當前元素的字體大小來計算的
* - 1em = 1font-size
* - 使用em時，當字體大小發生改變時，em也會隨之改變
* - 當設置字體相關的樣式時，經常會使用em
*
*/
.box{
width: 300px;
height: 300px;
background-color: red;
}
.box1{
font-size: 20px;
width: 2em;
height: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
