‘’’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>作业</title>
<style>
:root{font-size: 0.625em;}
.box1{
width: 50rem;
height: 50rem;
font-size: 1.6rem;
border: 1px solid ;
}
.box1 > p:first-of-type{
font-size: 1.2em;
background-color:lightcoral;
line-height: 2em;
border-radius: .5em;
}.box1 > p:nth-of-type(2){font-size: 1.5rem;line-height: 2rem;background-color: lawngreen;border-radius: .5rem;}.box1 > p:last-child{font-size: 16px;line-height: 20px;background-color: yellow;border-radius: 10px;}/* 作业2 */.menu{width: 40rem;height: 40rem;border: 1px solid lightcoral;}.menu > p{height: 10vh;width: 20vh;margin: 0;}.menu > p:first-child{background-color:green ;}.menu > p:nth-of-type(2){background-color:red ;}.menu > p:last-child{background-color:green ;}</style>
</head>
<body>
<h1>1.演示em,rem,px的应用场景,并指出em,rem的区别与联系</h1>
<div class="box1">
<p><strong>我是em,</strong> </br>我的字体大小是父级元素box里font-size的1.2倍,也就是19.2px</p>
<p><strong>我是rem,</strong> </br>我的字体大小是依据根元素(root)的1.5倍,也就是15px</p>
<p><strong>我是px</strong></br>我的字体大小是依据具体的属性值来决定的</p>
</div>
<p>
区别和使用场景: <br>
em:使用在padding,margin;border-radius;
rem:使用在fontsize,
px:一般使用边框宽度
</p>
<h2>2.使用vh,vw写一个三行单列的手机首页布局</h2>
<div class="menu">
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
‘’’
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
