<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
* 长度单位
* 像素 px
* -像素是我们网页使用最多的一个单位
* 我们的屏幕就相当于我们屏幕中的一个小点
* 但是这些像素点是不能直接看见
* -不同显示器一个像素的大小也不相同
* 显示效果越好,清晰,像素就越小,反之像素越大
*
* 百分比%
* -也可以将单位设置百分比的形式
* 这样浏览将会根据其父元素的样式来计算改值
*
* em
* -em和百分比类似,他是相对当前元素的大小来计算的
* -1em=1font-size
* -当设置字体相关字体大小发生改变时,em也会随之改变
* -当设置字体相关的样式时,经常会使用em
*/
.box{
width:200px;
height:200px;
background-color: red;
}
.box1{
font-size: 100px;
width: 10em;
height: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>