介绍
本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记
像素和百分比
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
.box1{
width:200px;
height:200px;
background-color:orange
}
.box2{
width:50%;
height:50%
}
.box3{
width:10em;
height:10em;
background-color:green
}
长度单位:
像素
-屏幕(显示器),实际上由一个个小点组成
-不同屏幕像素大小不同,像素越小的屏幕显示效果越清晰
-所以,同样的200px在不同设备下,显示效果不一样
百分比
- 也可将属性值设置为相对于其父元素的属性的百分比
- 设置百分比,可以跟随父元素的改变而改变
em:
- 相对于元素的字体大小来计算的
1em = 1 font-size
- 根据字体大小改变而改变
rem:
- 相对于根元素的字体大小计算
</style>
<body>
<div class="box1" >
<div class="box2" ></div>
</div>
<div class="box3" >
</div>
</body>
</html>