Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:现在就应该忘掉px, 尽可能只用相对单位
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性值简写</title>
<style>
h2 {
background-color: grey;
}
.box {
width: 200px;
height: 200px;
background-color: greenyellow;
/* 值:上 右 下 左,顺时针 */
/* padding和marigin是看不到的,border可以设置样式和颜色 */
padding: 10px 20px 20px 30px;
border: black solid 5px;
margin: 20px 20px 20px 20px;
}
.box {
/* 第二个值代表左右 */
padding: 10px 20px 30px;
padding: 10px 30px;
}
</style>
</head>
<body>
<h2>php.cn</h2>
<div class="box"></div>
</body>
</html>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>em介绍</title>
<style>
/* 1em等于浏览器默认font-size 例如16px */
ul {
font-size: 0.9em;
}
p {
font-size: 0.8em;
}
</style>
</head>
<body>
<!-- 1、ul和li属于有父子关系,所以会成倍缩放 -->
<ul>
<li>item1</li>
<ul>
<li>item2</li>
</ul>
</ul>
<!-- 2、非父标签,不会缩小 -->
<p>itme3 <p>item4</p> </p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem设置</title>
<style>
/* rem 我理解的字面意思是reset em */
html {
/*
1.默认1em=16px
2.当前重置了html的根元素em实际值10px:16*0.625=10px
*/
font-size: 0.625em;
}
/*
使用:root,可以应用与html,xhtml,意思就是根元素
*/
:root {
font-size: 0.625em;
}
p {
/* 1.8rem = 重置后的1em*1.8=1.8*10px=18px */
font-size: 1.8rem;
}
</style>
</head>
<body>
<p>你好rem</p>
</body>
</html>