search

博客列表 >演示盒模型常用属性、演示媒体查询、演示em,rem用法

演示盒模型常用属性、演示媒体查询、演示em,rem用法

Blackeye
Blackeye原创
2022年03月27日 02:38:03613浏览

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

上一条：php中Swoole的热更新实现代码实例下一条：盒模型常用属性与媒体查询、em和rem应用和差别
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多