Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型、媒体查询及em和rem的用法及区别
Blogger Information
Blog 46
fans 0
comment 0
visits 34393
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
584 people have browsed it

盒模型

1.建立两个盒子，练习常用属性的用法，验证两个盒子之间margin的值由数值由较大方决定
2.box-sizing的border-box属性（将盒子的大小定义为到边框的距离），background-clip属性，其主要是用来确定背景的裁剪区域，(background-clip:content-box):背景从content区域向外裁剪，超过content区域的背景将被剪掉

代码如下：

  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.     <style>
  9.         .box1{
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: lightgreen;
  13.             border: 5px dotted red;
  14.             padding: 20px;
  15.             margin: 50px 20px;
  16.             box-sizing: border-box;
  17.         }
  18.         .box2{
  19.             width: 200px;
  20.             height: 200px;
  21.             background-color: lightgreen;
  22.             border: 5px dotted red;
  23.             padding: 20px;
  24.             margin: 20px;
  25.             background-clip: content-box;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="box1">一个盒子</div>
  31.     <div class="box2">另个盒子</div>
  32. </body>
  33. </html>

运行效果如下图：

媒体查询

代码如下：

  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.     <!-- 媒体：显示/输出信息的介质/载体，屏幕，打印机 -->
  11.     <!-- 查询：根据当前媒体宽度的变化来选择不同的页面或显示效果 -->
  12.     <button class="btn small">btn1</button>
  13.     <button class="btn middle">btn2</button>
  14.     <button class="btn large">btn3</button>
  15. </body>
  16. <style>
  18.     /* em:默认元素字号，16px */
  19.     /* rem:根元素的字号，16px */
  20.     html{
  21.         font-size: 10px;
  22.         /* 1em=10px; */
  23.     }
  24.     /* 按钮基本样式 */
  25.     .btn{
  26.         background-color: seagreen;
  27.         color: white;
  28.         border: 1px solid black;
  29.         outline: none;
  30.     }
  31.     .btn:hover{
  32.         cursor: pointer;
  33.         opacity: 0.8;
  34.         transition: 0.3s;
  35.         padding: 0.4rem 0.8rem;
  36.     }
  37.     .btn.small{
  38.         font-size: 1.2rem;
  39.     }
  40.     .btn.middle{
  41.         font-size: 1.6rem;
  42.     }
  43.     .btn.large{
  44.         font-size: 1.8rem;
  45.     }
  46.     /* 最大374px */
  47.     @media(max-width:374px) {
  48.         html{
  49.         font-size: 12px;
  50.         }
  51.     }
  52.     /* 当在375-414之间 */
  53.     @media(min-width:375px) and (max-width:414px){
  54.         html{
  55.         font-size: 14px;
  56.         }
  57.     }
  58.     @media(min-width:415px){
  59.         html{
  60.         font-size: 16px;
  61.         }
  62.     }
  63.     /* 以上是一个由小到大的匹配过程：移动优先 */
  64.     /* 由大到小是匹配过程：PC优先 */
  65. </style>
  66. </html>

运行效果如图：


em和rem

1.em是字符大小的单位，默认为16px(像素)
2.em的值会随着用户的改变字体大小而改变
3.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>常用单位</title>
  8. </head>
  9. <body>
  10.     <!-- px:像素，绝对单位，通常不会用来进行移动的布局，1in=96px-->
  11.     <!-- em,rem,vh,vw:相对单位 -->
  13.     <div>
  14.         <span>Hello</span>
  15.     </div>
  17.     <style>
  18.         html{
  19.             font-size: 10px;
  20.             /* 在根元素中设置的字号，在其它地方引用是使用rem,并且这个值是不变的 */
  21.             /* 因为一个页面，只有一个根元素，html */
  22.             /* 1rem=10px */
  23.         }
  24.         div{
  25.             font-size: 30px;
  26.         }
  28.         div span{
  29.             font-size: 2em;
  30.             /* em在父元素中被重新定义了 */
  32.             /* em总是随着自身或父元素的字号发生变化，在布局时会显得非常的混乱 */
  33.         }
  34.     </style>
  35. </body>
  36. </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