Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型常用属性、媒体查询及em,rem用法
Blogger Information
Blog 6
fans 0
comment 0
visits 2598
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用法
P粉150142745
Original
385 people have browsed it

演示盒模型常用属性


  1. <!DOCTYPE html>
  2.     <html lang="en">
  3.       <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <title>盒模型</title>
  8.       </head>
  9.       <body>
  10.         <div class="box"></div>
  11.         <div class="box"></div>
  12.         <style>
  13.           .box {
  14.             width: 200px;
  15.             height: 200px;
  16.             background-color: blueviolet;
  17.             border: 10px solid rgb(230, 238, 195);
  18.             padding: 10px;
  19.             background-clip: content-box;
  20.             box-sizing: border-box;
  21.             margin: 20px;
  22.           }
  23.         </style>
  24.         <style>
  25.           body {
  26.             background-color: rgb(228, 174, 219);
  27.           }
  28.           @media (max-width: 400px) {
  29.             body {
  30.               background-color: rgb(241, 230, 208);
  31.             }
  32.           }
  33.         </style>
  34.       </body>
  35.       </html>
  36.     </body>
  37.   </html>

实例演示媒体查询

  1. <!-- 实例演示媒体查询  -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  5.   <head>
  6.     <meta charset="UTF-8" />
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9.     <title>Document</title>
  10.   </head>
  11.   <body>
  12.     <button class="btn samll">btn1</button>
  13.     <button class="btn middle">btn2</button>
  14.     <button class="btn large">btn3</button>
  15.     <style>
  16.       html {
  17.         font-size: 10px;
  18.       }
  19.       .btn {
  20.         background-color: seagreen;
  21.         color: white;
  22.         border: none;
  23.         outline: none;
  24.       }
  25.       .btn:hover {
  26.         cursor: pointer;
  27.         opacity: 0.8;
  28.         transition: 0.3s;
  29.         padding: 0.4rem 0.8rem;
  30.       }
  32.       .btn.small {
  33.         /* font-size: 12px; */
  34.         font-size: 1.2rem;
  35.       }
  37.       .btn.middle {
  38.         /* font-size: 16px; */
  39.         font-size: 1.6rem;
  40.       }
  42.       .btn.large {
  43.         /* font-size: 18px; */
  44.         font-size: 1.8rem;
  45.       }
  46.       /* 媒体查询 */
  47.       @media (max-width: 374px) {
  48.         html {
  49.           font-size: 12px;
  50.         }
  51.       }
  52.       /* 374px - 414px 之间 */
  54.       @media (min-width: 375px) and (max-width: 413px) {
  55.         html {
  56.           font-size: 14px;
  57.         }
  58.       }
  59.       /* >414px 之间 */
  61.       @media (min-width: 414px) {
  62.         html {
  63.           font-size: 16px;
  64.         }
  65.       }
  66.     </style>
  67.   </body>
  68. </html>

演示em,rem用法

em: 动态的字号,总是相对于自身或祖先元素,如果祖先是根元素,em=rem

  1.     <style>
  2.       html {
  3.         font-size: 10px;
  4.  }
  5.       div {
  6.         font-size: 30px;
  7. }
  8.       div span {
  9.         font-size: 2em;
  10. }
  11.     </style>

rem:静态的字号,总是相对于”根元素”

  1.     <style>
  2.       html {
  3.         font-size: 10px;
  4.       }
  5.       div {
  6.         font-size: 30px;
  7.       }
  8.       div span {
  9.         font-size: 2rem;
  10.       }
  11.     </style>

Correcting teacher：PHPzPHPz

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