Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 005.css 之盒模型属性简写与em、rem的应用场景
Blogger Information
Blog 5
fans 0
comment 0
visits 2622
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
005.css 之盒模型属性简写与em、rem的应用场景
清石
Original
542 people have browsed it

CSS 之盒模型属性简写与em、rem的应用场景

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>盒模型属性简写与em、rem的应用场景</title>
  6.         <style type="text/css">
  7.             :root {
  8.                 font-size: 0.625em;
  9.             }
  11.             body {
  12.                 background-color: #E0FFFF;
  13.             }
  15.             .ceshi {
  16.                 width: 460px;
  17.                 height: 500px;
  18.                 font-size: 2.8rem;
  19.                 color: #aa00ff;
  20.                 text-align: center;
  21.                 margin: 3em 2.5em;
  22.                 padding: 2em 3em 1.5em;
  23.                 border: 1px solid #4169E1;
  24.                 border-radius: 10px;
  25.                 background-color: #00aaff;
  26.             }
  28.             p {
  29.                 font-size: 1.8rem;
  30.                 text-align: left;
  31.                 color: #d145d1;
  32.             }
  34.             span {
  35.                 color: #ff557f;
  36.                 font-size: 2.2rem;
  37.             }
  38.         </style>
  39.     </head>
  40.     <body>
  41.         <div class="ceshi">盒模型属性简写<br>与em、rem的应用场景
  42.             <hr>
  43.             <p>
  44.                 <span>1.盒模型中的属性简写</span><br>
  45.                 当值四个时, 按顺时针排列 <br>
  46.                 当值只有三个时,第一个上, 第二个表示左右, 第三个表示下 <br>
  47.                 当值只有二个时,第一个表示上下, 第二个表示左右 <br>
  48.                 当值只有二一个时，表示四周都相同 <br>
  50.             </p>
  51.             <p>
  52.                 <span>2.em </span><br>
  53.                 当前字号的相对单位<br>
  54.                 用在 padding,margin, border-radius,用 em 比较合适<br>
  55.                 px 通常用在边框上<br>
  56.             </p>
  58.             <p>
  59.                 <span>3.rem</span><br>
  60.                 根元素字体大小<br>
  61.                 用它做为字号的单位比较合适
  62.         </div>
  63.         </p>
  64.     </body>
  65. </html>

效果图：
演示

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：rem用在字号上比较多
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