Community Learn Tools Library Leisure
search
English
Home > List of blog posts > em vem的应用场景
Blogger Information
Blog 19
fans 0
comment 1
visits 14091
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 vem的应用场景
心
Original
554 people have browsed it

em和vem 的应用场景

  1. em 是font-size 的倍数
  2. 1em 在没有设置字体的时候 浏览器默认是 16px;
  3. 当文本里面使用 font-size 时 1em 就等于 font-size 的值
  4. em 设置响应式的文本字号
  5. font-size 是允许被继承
  6. 可以设置响应式盒模型
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8>
  5.         <title>em的应用</title>
  6.         <style>
  7.             html{
  8.                 font-size:20px;
  9.             }
  10.             /*现在的h2字体的大小是 30px*/
  11.             h2{
  12.                 font-size:1.5em;
  13.             }
  14.             div{
  15.                 /*现在盒子的大小是 宽200px*高400px*/
  16.                 width:10em;
  17.                 height:20em;
  18.             }
  20.             div{
  21.             /*现在的盒子大小是 宽400px*高800ox*/
  22.                 font-size:40px;
  23.             }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <h2>你好php</h2>
  28.         <div></div>
  29.     </body>
  30. </html>

按钮的案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>按钮</title>
  7.     <style>
  8.         /* 基本样式 */
  9.         .btn{
  10.             background-color: blue;
  11.             color:#fff;
  12.             border:none;
  13.             outline: none;
  14.             padding: 0.5em 1em;
  15.             /* 圆角 */
  16.             border-radius: 0.2em;
  17.         }
  18.         .btn:hover{
  19.             /* 透明度 */
  20.             opacity:0.8 ;
  21.             /* 将鼠标设置为手型 */
  22.             cursor: pointer;
  23.             box-shadow: 0 0 3px #888;
  24.             transition: 0.3s;
  25.         }
  27.         /* 如果想设置三个不同的大小按钮，只需要为这个三个按钮指定不同的自号就可以了 */
  28.         /* 较小的 */
  29.         .small{
  30.             font-size: 10px;
  31.         }
  32.         /* 正常的 */
  33.         .normal{
  34.             font-size: 16px;
  35.         }
  36.         /* 较大的 */
  37.         .lar{
  38.             font-size:20px;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <button class="btn small">button</button>
  44.     <button class="btn nomal">button</button>
  45.     <button class="btn lar">button</button>
  46. </body>
  47. </html>

em定义字号

  1. em具有动态性 和继承性
  2. rem 是固定值的 em
  3. rem 是根元素的字号大小
  4. 边框不能用em
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta chaset="utf-8>
  5.         <title>rem的应用</title>
  6.         <style>
  7.             html是最顶级元素
  8.             html{
  9.         /*在字体大小是32px */
  10.                 font-size:2em;
  11.             }
  12.             h2{
  13.             /*字体大小是1.5*32=48px*/
  14.                 font-size:1.5em
  15.             }
  16.             span{
  17.             /*字体大小是32px*/
  18.                 font-size:2rem;
  19.             }
  20.         </style>
  21.     </head>
  22.     <body>
  23.     <h2>你好 php<span>中文网</span></h2>
  24.     </body>
  25. </html>

vh 视口化的高度 1/100
vw 视口化的宽度 1/100

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