ASCII码 ASCII码

盒模型、媒体查询及em和rem的用法

发布于：2022-03-23 09:10:54  栏目：技术文档

盒模型

内容

1.建立两个盒子 练习常用属性的用法 验证两个盒子之间margin的值由数值较大方决定2.box-sizing的border-box属性（将盒子的大小定义为到边框的距离）可以解决边框被盒子撑开等一系列问题3.练习一些基本的属性用法

代码

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

媒体查询

内容

1.将html标签的字体大小调整为5个像素2.当显示屏幕的像素在301~450之间时将html的字体大小调整为10个像素3.当显示屏幕的像素在451以上时将html的字体大小调整为16个像素

代码

  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>Document</title>
  8.     <style>
  9.         @import url(/220322/css/img.css);;
  10.     </style>
  11. </head>
  12. <body>
  13.     <span class="s1">span1</span>
  14.     <span class="s2">span2</span>
  15.     <span class="s3">span3</span>
  16. </body>
  17. </html>
  1.         html{
  2.         font-size: 5px;
  3.         }
  4.         span{
  5.             border: 2px solid red;
  6.             background-color: aqua;
  7.         }
  8.         .s1{
  9.             font-size: 2rem;
  10.         }
  11.         .s2{
  12.             font-size: 3rem;
  13.         }
  14.         .s3{
  15.             font-size: 4rem;
  16.         }
  18.         @media (min-width:301px) and (max-width:450px){
  19.             html{
  20.                 font-size: 10px;
  21.             }
  22.         }
  24.         @media (min-width:451px) {
  25.             html{
  26.                 font-size: 16px;
  27.             }
  28.         }

代码截图

em和rem的关系

1.em是字符大小的单位 默认为16px（像素）2.em的值会随着用户改变字体大小而改变3.rem为根元素字符大小的单位 随着根元素字体大小而变化4.当对根元素的字符大小进行赋值时 rem即随之跟着变化

em代码

  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>Document</title>
  8. </head>
  9.     <style>
  10.         /* 将根元素html的字体大小调整为一个标准字符的大小（16px） */
  12.         /* 将div里的字体大小调整为根元素字符大小*2 */
  13.         div{
  14.             font-size: 1em;
  15.         }
  17.     </style>
  18. <body>
  19.     <div>一段会随着浏览器字体大小波动的文字</div>
  20. </body>
  21. </html>

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>Document</title>
  8. </head>
  9.     <style>
  10.         /* 将根元素html的字体大小调整为一个标准字符的大小（16px） */
  11.         html{
  12.             font-size: 1em;
  13.         }
  14.         /* 将div里的字体大小调整为根元素字符大小*2 */
  15.         div{
  16.             font-size: 2rem;
  17.         }
  19.     </style>
  20. <body>
  21.     <div>一段会随着根元素字体大小波动的文字</div>
  22. </body>
  23. </html>
  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>Document</title>
  8. </head>
  9.     <style>
  10.         /* 将根元素html的字体大小调整为一个标准字符的大小（16px） */
  11.         html{
  12.             font-size: 32px;
  13.         }
  14.         /* 将div里的字体大小调整为根元素字符大小*2 */
  15.         div{
  16.             font-size: 2rem;
  17.         }
  19.     </style>
  20. <body>
  21.     <div>一段会随着根元素字体大小波动的文字</div>
  22. </body>
  23. </html>

rem代码图片

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行