1021.作业-rem.em,px,vh,vw示例

‘’’
<!DOCTYPE html>

<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>
‘’’

相关文章