简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 盒模型常用属性box-sizing与媒体查询、实例演示em,rem用法
Blogger Information
Blog 8
fans 0
comment 0
visits 3662
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
盒模型常用属性box-sizing与媒体查询、实例演示em,rem用法
平凡之路
Original
414 people have browsed it

盒模型常用属性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>
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！