<!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: 100px;
height: 100px;
background-color: #000000;
}
.box2{
width: 50%;
height: 50%;
background-color: yellow;
}
.box3{
font-size: 20px;
width: 2em;
height: 2em;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>