search

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

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

P粉150142745
P粉150142745原创
2022年03月28日 00:15:24388浏览

演示盒模型常用属性


  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.           .box {
  14.             width: 200px;
  15.             height: 200px;
  16.             background-color: blueviolet;
  17.             border: 10px solid rgb(230, 238, 195);
  18.             padding: 10px;
  19.             background-clip: content-box;
  20.             box-sizing: border-box;
  21.             margin: 20px;
  22.           }
  23.         </style>
  24.         <style>
  25.           body {
  26.             background-color: rgb(228, 174, 219);
  27.           }
  28.           @media (max-width: 400px) {
  29.             body {
  30.               background-color: rgb(241, 230, 208);
  31.             }
  32.           }
  33.         </style>
  34.       </body>
  35.       </html>
  36.     </body>
  37.   </html>

实例演示媒体查询

  1. <!-- 实例演示媒体查询  -->
  3. <!DOCTYPE html>
  4. <html lang="en">
  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>Document</title>
  10.   </head>
  11.   <body>
  12.     <button class="btn samll">btn1</button>
  13.     <button class="btn middle">btn2</button>
  14.     <button class="btn large">btn3</button>
  15.     <style>
  16.       html {
  17.         font-size: 10px;
  18.       }
  19.       .btn {
  20.         background-color: seagreen;
  21.         color: white;
  22.         border: none;
  23.         outline: none;
  24.       }
  25.       .btn:hover {
  26.         cursor: pointer;
  27.         opacity: 0.8;
  28.         transition: 0.3s;
  29.         padding: 0.4rem 0.8rem;
  30.       }
  32.       .btn.small {
  33.         /* font-size: 12px; */
  34.         font-size: 1.2rem;
  35.       }
  37.       .btn.middle {
  38.         /* font-size: 16px; */
  39.         font-size: 1.6rem;
  40.       }
  42.       .btn.large {
  43.         /* font-size: 18px; */
  44.         font-size: 1.8rem;
  45.       }
  46.       /* 媒体查询 */
  47.       @media (max-width: 374px) {
  48.         html {
  49.           font-size: 12px;
  50.         }
  51.       }
  52.       /* 374px - 414px 之间 */
  54.       @media (min-width: 375px) and (max-width: 413px) {
  55.         html {
  56.           font-size: 14px;
  57.         }
  58.       }
  59.       /* >414px 之间 */
  61.       @media (min-width: 414px) {
  62.         html {
  63.           font-size: 16px;
  64.         }
  65.       }
  66.     </style>
  67.   </body>
  68. </html>

演示em,rem用法

em: 动态的字号,总是相对于自身或祖先元素,如果祖先是根元素,em=rem

  1.     <style>
  2.       html {
  3.         font-size: 10px;
  4.  }
  5.       div {
  6.         font-size: 30px;
  7. }
  8.       div span {
  9.         font-size: 2em;
  10. }
  11.     </style>

rem:静态的字号,总是相对于”根元素”

  1.     <style>
  2.       html {
  3.         font-size: 10px;
  4.       }
  5.       div {
  6.         font-size: 30px;
  7.       }
  8.       div span {
  9.         font-size: 2rem;
  10.       }
  11.     </style>

上一条：PHP如何解决微信文章图片防盗链下一条：仿php中文网首页（部分）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多