<!DOCTYPE html>
<html lang="en"style="font-size:30px;">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS长度单位</title>
<style>
/*
一、长度单位
1.像素px：一个就是屏幕中一个不可分割的点。我们应用的屏幕实际上是由一个个的像素点构成的。
不同显示器的像素点大小也不同。在屏幕尺寸相同的情况下，像素越小，显示效果越清晰。
大部分浏览器默认字体大小是16px。
2.百分比%：相对于父元素大小的百分比进行计算
优点：当父元素大小发生变化时，子元素的大小也会按比例进行调整
3.相对于字体大小单位em：相对于当前元素字体大小进行计算
1em=当前字体大小（1倍font-size）
2em=2倍的font-size
4.rem:相对于根元素字体大小进行计算
*/
.father{
font-size:50px;
width: 500px;
background-color: #c7edcc;
}
.son{
font-size: 200%;
background-color: #fde6e0;
/*width: 200%;*/
width: 6rem;
}
</style>
</head>
<body>
<div class="father">
今天天气不错
<div class="son">挺风和日丽的</div>
</div>
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)