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

盒模型/媒体查询/em和rem的用法与区别

1.盒模型

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. <style>
  10.     html{
  11.         margin: 0;
  12.         padding: 0;
  13.         font-size: 10px;
  14.     }
  15.     div{
  16.         width: 20rem;
  17.         height: 20rem;
  18.         font-size: 2rem;
  19.         background-color: red;
  20.         /* 边框 */
  21.         border: 1rem dashed blue;
  22.         /* 内边距 */
  23.         padding: 0.5rem 1rem 1.5rem;
  24.         /*  */
  25.         background-clip: content-box;
  26.     }
  27.     .border-box{
  28.         box-sizing: border-box;
  29.         /* Total width: 200px
  30.         Total height: 200px
  31.         Content box width: 200px -（2 * 10px） - (2 * 10px) = 160px
  32.         Content box height: 200px + (2 * 20px) - (1 * 5px) - (1 * 15px) = 160px */
  33.     }
  34.     .content-box{
  35.         box-sizing: content-box;
  36.         /* Total width: 200px +（2 * 10px） + (2 * 10px) = 240px
  37.         Total height: 200px + (2 * 20px) + (1 * 5px) + (1 * 15px) = 240px
  38.         Content box width: 200px
  39.         Content box height: 200px */
  40.     }
  41. </style>
  42. <body>
  43.     <div class="border-box">border-box</div><br>
  44.     <div class="content-box">content-box</div>
  45. </body>
  46. </html>

盒模型

box-sizing的属性border-box会使总宽度不变，内容宽度==（总宽度-边框border-内边距padding）；box-sizing的属性content-box会使内容宽度不变，总宽度==（内容宽度+边框border+内边距padding）；*：box-sizing与外边距margin无关

2.媒体查询

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. <style>
  10.     div{
  11.         background-color: brown;
  12.         width: 100px;
  13.         height: 100px;
  14.         margin-bottom: 10px;
  15.         color: #FFF;
  16.     }
  17.     @media (max-width: 400px) {
  18.         div:first-of-type{
  19.             background-color: red;
  20.         }
  21.     }
  22.     @media (min-width: 401px) and (max-width: 600px) {
  23.         div:nth-of-type(2n){
  24.             background-color: yellowgreen;
  25.         }
  26.     }
  27.     @media (min-width: 601px) {
  28.         div:nth-of-type(3){
  29.             background-color: lightseagreen;
  30.         }
  31.     }
  32. </style>
  33. <body>
  34.     <div>媒体查询1</div>
  35.     <div>媒体查询2</div>
  36.     <div>媒体查询3</div>
  37. </body>
  38. </html>

媒体查询1媒体查询2媒体查询3

“媒体查询”主要通过@media来判断当前viewport宽度，来对html进行调整

3. em和rem的用法与区别

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>em和rem的用法与区别</title>
  8. </head>
  9. <style>
  10.     html{
  11.         /* 设置根元素字体大小：10px */
  12.         font-size: 10px;
  13.     }
  14.     div{
  15.         border: 1px solid blue;
  16.     }
  17.     .box1{
  18.         /* 设置父元素字体大小：20px */
  19.         font-size: 20px;
  20.     }
  21.     .box2{
  22.         /* 2rem = 2*根元素10px == 20px */
  23.         font-size: 2rem;
  24.     }
  25.     .box3{
  26.         /* 3em = 3*父元素20px == 60px */
  27.         font-size: 3em;
  28.     }
  29. </style>
  30. <body>
  31.     <div class="box1">
  32.         <div class="box2">rem:Hello World</div>
  33.         <div class="box3">em:Hello World</div>
  34.     </div>    
  35. </body>
  36. </html>

em和rem的区别

1.rem是相对于根元素进行计算；而em是相对于当前元素或父元素的字体大小,如果没有则根据根元素进行计算。(em计算优先级：当前元素>父元素>根元素)。
2.rem不仅可以设置字体的大小，还支持元素宽、高等属性。
3.em是相对于当前元素或父元素进行换算，层级越深，换算越复杂。而rem是相对于根元素计算，避免层级关系。

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