Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1021.作业-rem.em,px,vh,vw示例
Blogger Information
Blog 30
fans 0
comment 0
visits 22425
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1021.作业-rem.em,px,vh,vw示例
归宿的博客
Original
675 people have browsed it

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

  1.     }
  2.     .box1 > p:nth-of-type(2){
  3.         font-size: 1.5rem;
  4.         line-height: 2rem;
  5.         background-color:  lawngreen;
  6.         border-radius: .5rem;
  7.     }
  8.     .box1 > p:last-child{
  9.         font-size: 16px;
  10.         line-height: 20px;
  11.         background-color: yellow;
  12.         border-radius: 10px;
  13.     }
  15.     /* 作业2 */
  16.     .menu{
  17.         width: 40rem;
  18.         height: 40rem;
  19.         border: 1px solid lightcoral;
  20.     }
  21.     .menu > p{
  22.         height: 10vh;
  23.         width: 20vh;
  24.         margin: 0;
  25.     }
  26.     .menu > p:first-child{
  27.         background-color:green ;
  28.     }
  29.     .menu > p:nth-of-type(2){
  30.         background-color:red ;
  31.     }
  32.     .menu > p:last-child{
  33.         background-color:green ;
  34.     }
  35. </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>
‘’’

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post