简体中文(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 38
fans 0
comment 0
visits 18539
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用法
Blackeye
Original
599 people have browsed it

part_1

  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.         /* 设置盒模型为长*宽 200*200，颜色为浅蓝色 */
  14.         .box{
  15.             width: 200px;
  16.             height: 200px;
  17.             background-color: aqua;
  19.         }
  20.         /* 设置上下左右内边距为5px，边框为5px 黑色实线 */
  21.         .box{
  22.             padding: 10px;
  23.             border: 5px solid black;
  24.         }
  25.         /* 设置填充区，避免padding透明被颜色覆盖 */
  26.         .box{
  27.             background-clip: content-box;
  28.         }
  29.         /* 让浏览器自动计算盒子大小确保盒子宽高为200px，而不是内容区为200px */
  30.         .box{
  31.             box-sizing: border-box;
  32.         }
  33.         /* 设置外边距为20px */
  34.         .box{
  35.             margin: 20px;
  36.         }
  37.         /* 当出现外边距折叠时，外边距参照最大值设置 */
  38.         .box:last-of-type{
  39.             margin-top: 50px;
  40.         }
  42.     </style>
  43. </body>
  44. </html>

part1

part_2

  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.     <style>
  12.         /* 设置根元素字号大小，为rem准备 */
  13.         html{
  14.             font-size: 20px;
  15.         }
  16.         .box{
  17.             width: 20rem;
  18.             height: 20rem;
  19.             background-color: green;
  20.             box-sizing: border-box;
  21.             border: 10px solid red;
  22.         }
  24.         @media (min-width: 1000px){
  25.             html{
  26.             font-size: 18px;
  27.             }
  28.         }
  30.         @media (min-width: 500px) and (max-width: 1000px){
  31.             html{
  32.             font-size: 15px;
  33.             }
  34.         }
  36.         @media (max-width: 500px){
  37.             html{
  38.             font-size: 10px;
  39.             }
  40.         }
  42.     </style>
  43. </body>
  44. </html>

part2_1
part2_2

part_3

  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>em,rem用法</title>
  8. </head>
  9. <body>
  10.     <div class="show-em">
  11.         <span>em</span>
  12.     </div>
  13.     <div class="show-rem">
  14.         <span>rem</span>
  15.     </div>
  17.     <style>
  18.         html{
  19.             font-size: 10px;
  20.         }
  21.         .show-em{
  22.             font-size: 3em;
  23.         }
  24.         .show-em span{
  25.             font-size: 2em;
  26.         }
  27.         .show-rem{
  28.             font-size: 20px;
  29.         }
  30.         .show-rem span{
  31.             font-size: 2rem;
  32.         }
  33.     </style>
  34. </body>
  35. </html>

em基于父级元素参照，容易发生参照混乱，不宜与页面布局。
rem基于根元素参照，便于统一管理，即使其父元素方式变更也不会影响其相对的值。
part3_1
part3_2

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！