简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 盒模型常用，媒体查询，em,rem的用法和差别
Blogger Information
Blog 20
fans 0
comment 0
visits 11672
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
436 people have browsed it

1，盒模型常用属性

盒模型

  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  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>盒模型</title>
  10. </head>
  12. <body>
  13.     <div class="box"></div>
  14.     <div class="box"></div>
  15.     <style>
  16.         .box {
  17.             width: 400px;
  18.             height: 400px;
  19.             background-color: violet;
  20.             /* border: 10px solid black; */
  21.             /* padding: 20px; */
  22.             /* background-clip: content-box; */
  23.             box-sizing: border-box;
  24.         }
  25.         /* 10px+20px+400px=430px+30=460px */
  26.         /* 我的本意是想要得到一个400*400的盒子,但是最终计算结果却包括了内边距padding和边框border */
  27.         /* 10+20=30 , 400-30=370 */
  28.         /* 将左右多出来的padding,border全减去 */
  29.         /* .box {
  31.             width: 140px;
  32.             height: 140px;
  33.             background-color: violet;
  34.             border: 10px solid black;
  35.             padding: 20px;
  36.             background-clip: content-box;
  37.         } */
  39.         .box {
  40.             /* 四值:完整语法, 上向下左,顺时针方向 */
  41.             padding: 5px 10px 15px 20px;
  42.             padding: 5px 20px 15px 20px;
  43.             /* 三值语法: 左右相等,而上下不等 */
  44.             padding: 5px 20px 15px;
  45.             /* 双值语法: 左右相同,上下也相同,但并不是同一个值*/
  46.             padding: 15px 20px 15px 20px;
  47.             padding: 15px 20px;
  48.             /* 三值与双值的记忆方法: 第二个位置的值一定表示的是左右  */
  49.             /* 单值: 四个方向全相同 */
  50.             padding: 20px;
  51.         }
  53.         .box {
  54.             /* 边框与padding,margin类似,但又有显著的不同, 因为边框是可见的 */
  55.             /* border-right-width: 10px;
  56.             border-right-style: solid;
  57.             border-right-color: blue; */
  58.             /* border-right: 10px solid blue;
  59.             border-left: 10px solid blue;
  60.             border-top: 10px solid blue;
  61.             border-bottom: 10px solid blue; */
  62.             border: 10px dashed blue;
  63.         }
  65.         .box {
  66.             margin: 20px;
  67.         }
  69.         .box:last-of-type {
  70.             background-color: red;
  71.             margin-top: 50px;
  72.             /* margin会在垂直方向出现折叠,谁大用谁的 */
  73.         }
  74.         /* 页面中所有元素,都是一个矩形块 */
  75.         /* 矩形块在一个二维平面中,只有"垂直","水平"二种排列方式 */
  76.         /* 与这种排列方式对应的,就只有二种元素类型: 块元素, 行内元素 */
  80.         /* div: 块元素 */
  81.     </style>
  82.     <a href="">xxx</a>
  83.     <a href="">yyy</a>
  84.     <a href="">zzz</a>
  86.     <input type="text" />
  87.     <input type="text" />
  88.     <input type="text" />
  89.     <input type="text" />
  91.     <!-- 布局前提: 是在一个"宽度受限,而高度无限的空间内" -->
  92.     <!-- 布局时,必须将width,height其中一个限制死,否则无法完成布局 -->
  93.     <!-- 根据人类的观看习惯, 通常是将宽度限制,而高度随内容舒展 -->
  94. </body>
  96. </html>

2,媒体查询

媒体查询

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>媒体查询</title>
  9. </head>
  11. <body>
  12.     <!-- 媒体: 显示/输出信息的介质/载体, 屏幕, 打印机 -->
  13.     <!-- 查询: 根据当前媒体宽度的变化来选择不同的页面或显示效果 -->
  15.     <button class="btn samll">btn1</button>
  16.     <button class="btn middle">btn2</button>
  17.     <button class="btn large">btn3</button>
  18. </body>
  20. <style>
  21.     /* em: 默认元素字号,16px,  */
  22.     /* rem: 根元素的字号, 16px */
  24.     html {
  25.         font-size: 10px;
  26.         /* 1rem = 10px; */
  27.     }
  28.     /* 按钮基本样式 */
  30.     .btn {
  31.         background-color: seagreen;
  32.         color: white;
  33.         border: none;
  34.         outline: none;
  35.     }
  37.     .btn:hover {
  38.         cursor: pointer;
  39.         opacity: 0.8;
  40.         transition: 0.3s;
  41.         padding: 0.4rem 0.8rem;
  42.     }
  44.     .btn.small {
  45.         /* font-size: 12px; */
  46.         font-size: 1.2rem;
  47.     }
  49.     .btn.middle {
  50.         /* font-size: 16px; */
  51.         font-size: 1.6rem;
  52.     }
  54.     .btn.large {
  55.         /* font-size: 18px; */
  56.         font-size: 1.8rem;
  57.     }
  58.     /* 最大374px时生效,是不是当小于374px才有效果 */
  60.     @media (max-width: 374px) {
  61.         html {
  62.             font-size: 12px;
  63.         }
  64.     }
  65.     /* 374px - 414px 之间 */
  67.     @media (min-width: 375px) and (max-width: 413px) {
  68.         html {
  69.             font-size: 14px;
  70.         }
  71.     }
  72.     /* >414px 之间 */
  74.     @media (min-width: 414px) {
  75.         html {
  76.             font-size: 16px;
  77.         }
  78.     }
  79.     /* 以上是一个由小到大的匹配过程: 移动优先 */
  80.     /* 以上是一个由大到小的匹配过程: PC优先 */
  81. </style>
  83. </html>

3，em,rem的用法和差别

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>常用单位</title>
  9. </head>
  11. <body>
  12.     <!-- px: 像素,绝对单位, 1in = 96px -->
  13.     <!-- em,rem,vh,vw: 相对单位 -->
  15.     <div>
  16.         <span>Hello</span>
  17.     </div>
  19.     <style>
  20.         html {
  21.             font-size: 10px;
  22.             /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
  23.             /* 因为一个页面,只有一个根元素, html  */
  24.             /* 1rem = 10px */
  25.         }
  27.         div {
  28.             /* font-size: 32px; */
  29.             /* 1em = 16px */
  30.             /* 32px = 2em */
  31.             font-size: 3rem;
  32.         }
  34.         div span {
  35.             /* font-size: 2em; */
  36.             /* 2em = 2*16=32px */
  37.             /* 但是 em在父元素中被重新定义了, 1em = 30px  */
  38.             /* 2em = 60px */
  39.             /* em总是随着自身或父元素的字号发生变化,在布局时会显得非常的混乱 */
  40.             /* font-size: 20px; */
  41.             font-size: 2rem;
  42.         }
  43.     </style>
  44. </body>
  46. </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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！