ASCII码 ASCII码

盒模型常用属性box-sizing与媒体查询、实例演示em,rem用法

发布于：2022-03-25 11:04:10  栏目：技术文档

盒模型常用属性box-sizing

  1.     <div class="box1"></div>
  3.     <style>
  4.       .box1 {
  5.         background-color: aqua;
  6.         width: 200px;
  7.         height: 200px;
  8.         /* 边框  border*/
  9.         border: 10px solid red;
  10.         /* 内边距padding */
  11.         /* 上下左右边距 以顺时针方向进行排序设置 */
  12.         padding: 20px 15px 10px 5px;
  13.         background-clip: content-box;
  14.       }
  15.     </style>
  17.     <div class="box2"></div>
  18.     <style>
  19.       .box2 {
  20.         /* 盒子之间间距 盒子与盒子之间多个间距 取最大值为准 */
  21.         margin: 30px;
  22.       }
  23.       .box2 {
  24.         background-color: aqua;
  25.         width: 200px;
  26.         height: 200px;
  27.         border: 10px solid red;
  28.         padding: 20px;
  29.         background-clip: content-box;
  30.         box-sizing: border-box;
  31.         /* box-sizing控制盒子实际的尺寸 */
  32.         /* 默认border-box 当前盒子宽高只到内容区 */
  33.         /* 用border-box 以边框尺寸进行计算 */
  34.       }
  35.     </style>
  36.   </body>

媒体查询、实例演示em,rem用法

  1.    <body>
  2.     <!-- 媒体：显示/输出信息的介质/载体，屏幕、打印机 -->
  3.     <!-- 查询：根据当前媒体宽度变化来选择不同的页面或显示效果 -->
  4.     <style>
  5.       body {
  6.         background-color: bisque;
  7.       }
  9.       /* 宽度小于800px时  body为红色 */
  10.       @media (max-width: 800px) {
  11.         body {
  12.           background-color: red;
  13.         }
  14.       }
  15.       html {
  16.         width: auto;
  17.         font-size: 5px;
  18.         background-color: rgb(0, 26, 255);
  19.       }
  20.       .box {
  21.         margin: 20px 10px 20px;
  22.         width: auto;
  23.         height: 100px;
  24.         background-color: aqua;
  25.         border: 3px solid red;
  26.         box-sizing: border-box;
  27.       }
  29.       html {
  30.         font-size: 20px;
  31.         /* rem设置为20px，1rem=20px */
  32.         /* html默认font-size: 16px; */
  33.       }
  34.     </style>
  36.     <!-- /* rem: 根元素的字号, 默认为16px */ -->
  37.     <style>
  38.       @media (max-width: 600px) {
  39.         .box1 {
  40.           font-size: 1rem;
  41.           background-color: rgb(0, 26, 255);
  42.       }
  44.       @media (max-width: 800px) {
  45.         .box2 {
  46.           /* 2rem=40px */
  47.           font-size: 2rem;
  48.           background-color: rgb(0, 119, 255);
  49.       }
  51.       @media (max-width: 1000px) {
  52.         .box3 {
  53.           /* 3rem=60px */
  54.           font-size: 3rem;
  55.           background-color: aqua;
  56.         }
  57.       }
  58.     </style>
  60.     <div class="box box1">rem设置为20px，1rem=20px</div>
  61.     <div class="box box2">2rem=40px</div>
  62.     <div class="box box3">3rem=60px</div>
  63.   </body>
  64. </html>
  1.   <style>
  2.   html {
  3.     font-size: 10px;
  4.     /* 在根元素中设置的字号,在其它地方引用是使用rem,并且这个值是不变的 */
  5.     /* 因为一个页面,只有一个根元素, html  */
  6.     /* 1rem = 10px */
  7.   }
  9.   div {
  10.     /* font-size: 32px; */
  11.     /* 1em = 16px */
  12.     /* 32px = 2em */
  13.     font-size: 3rem;
  14.   }
  16.   div span {
  17.     /* font-size: 2em; */
  18.     /* 2em = 2*16=32px */
  19.     /* 但是 em在父元素中被重新定义了, 1em = 30px  */
  20.     /* 2em = 60px */
  21.     /* em总是随着自身或父元素的字号发生变化,在布局时会显得非常的混乱 */
  22.     /* font-size: 20px; */
  23.     font-size: 2rem;
  24.   }
  25. </style>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行