Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型常用属性、媒体查询演示、演示em/rem用法
Blogger Information
Blog 9
fans 0
comment 0
visits 4005
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用法
龠
Original
381 people have browsed it

盒模型常用属性

  1.  margin: 20px;/* 外边距 */
  2.  border: 10px;/* 边框 */
  3.  padding: 20px;/* 内边距 */
  4.  border-style: solid;/* 边框样式 */
  5.  border-color: violet;/* 边框颜色 */
  6.  background-clip: content-box;/* 背影在内容区显示 */
  7.  box-sizing: border-box;/* 盒子大小与内容高、宽与内边距、边框之和 */

实例演示媒体查询

  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>Document</title>
  8.     <style>
  9.         .btn {
  10.             border: none;
  11.             outline: none;
  12.             background-color: seagreen;
  13.             color: white;
  14.         }       
  16.         .btn:hover {
  17.             cursor: pointer;
  18.             opacity: 0.8;
  19.             transition: 0.3s;
  20.             padding: 0.4rem 0.8rem;
  21.         }
  22.         .btn.small {
  23.             font-size: 1.2rem;
  24.         }
  25.         .btn.middle {
  26.             font-size: 1.4rem;
  27.         }
  28.         .btn.large {
  29.             font-size: 1.6rem;
  30.         }
  32.         @media (max-width:374px) {
  33.             html {
  34.                 font-size: 12px;
  35.             }
  36.         }
  37.         @media (min-width:374px) and (max-width:413px) {
  38.             html {
  39.                 font-size: 14px;
  40.             }
  41.         }
  42.         @media (min-width:413px) {
  43.             html {
  44.                 font-size:16px;
  45.             }
  46.         }
  48.     </style>        
  49. </head>
  50. <body>
  51.     <button class="btn small">btn1</button>
  52.     <button class="btn middle">btn2</button>
  53.     <button class="btn large">btn3</button>
  54. </body>
  55. </html>

图例变化
1.当媒体宽度为373px时

2.当媒体宽度为412px时

3.当媒体宽度为413px时

em/rem之间的区别及用法

em是相对于自身或父元素字号，随着自身或父元素字号变化而变化
rem是相对于根元素字号，随着根元素变化而变化

  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>Document</title>
  8. </head>
  9. <body>
  10.     <div class="duibi">
  11.         <span class="a">hello</span>
  12.         <span class="b">hello1</span>
  13.         <span class="c">hello3</span>
  14.         <span class="d">hello4</span>
  15.     </div>
  17.     <style>
  18.         html {
  19.             font-size: 10px;
  20.         }
  21.         .duibi {
  22.             font-size: 12px;
  23.         }
  24.         .a {
  25.             font-size: 1.1em;
  26.         }
  27.         .b {
  28.             font-size:1.2em;
  29.         }
  30.         .c {
  31.             font-size:1.5rem
  32.         }
  33.         .d {
  34.             font-size: 1.6rem;
  35.         }
  36.     </style>
  37. </body>
  38. </html>




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