Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > em,rem,vm,vh与实例演示
Blogger Information
Blog 6
fans 0
comment 0
visits 3466
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
em,rem,vm,vh与实例演示
swx
Original
751 people have browsed it

实例演示,em,rem,px的应用场景,并指出em,rem的区别与联系

em：子元素字体大小的em是相对于父元素字体大小。主要用在依赖字号的属性上，如外边距，内边距，长，宽等。
rem：rem是全部的长度都相对于根元素。用在font-size,设置字号
px:固定值，用在border。

  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         :root{
  8.             font-size:0.75em;
  9.         }
  11.         .panel{
  12.             padding: 1em;
  13.             border: 1px solid blueviolet;
  14.             background-color: #ddffdd;
  15.             margin: 2em;
  16.         }
  18.         .panel h2{
  19.             font-size: 1.1rem;
  20.             margin: 0.5em 0;
  21.         }
  23.         p{
  24.             font-size: 1.1rem;
  25.             text-indent: 2em;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="panel">
  31.         <h2>什么是php</h2>
  32.         <div class="panel-body">
  33.             <p>PHP即“超文本预处理器”，是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言
  34.             ，与C语言类似，是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法
  35.             。利于学习，使用广泛，主要适用于Web开发领域。
  36.             </p>
  37.         </div>
  38.     </div>
  39. </body>
  40. </html>

(选作)使用vh,vw写一个三行单列的手机首页布局,色块即可不需要具体内容

  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .box {
  8.             width: 100vw;
  9.             height: 12vh;
  10.             background-color: #445588;
  11.             text-align: center;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="box">
  17.         <p>头部区</p>
  18.     </div>
  20.     <div class="box">
  21.         <p>内容区</p>
  22.     </div>
  24.     <div class="box">
  25.         <p>尾部区</p>
  26.     </div>
  27. </body>
  28. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：尽管代码有些问题, 但仍然非常不错
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