<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
font-size: 20px;
}
.box{
/*width: 100px;
height: 100px;*/
/*em: It is a length unit, which refers to the font size of the current element. If it is not set, it refers to the default font size of the parent container or the current browser*/
width:10em;
height:10em;
background-color: red;
font-size: 18px; /*1em=16 18/16 em*/
}
/*rem is a new length unit in css3, which refers to the font size of the root element (html)*/
.parent{
width:10rem;
height:10rem;
background-color: blue;
font-size: 12px;
}
</style>
</head>
<body>
<div class="box">
write some words
</div>
<div class="parent">
write some words
</div>
</body>
</html>
02-The use of em and rem
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=325817478&siteId=291194637
Recommended
Ranking