Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型和媒体查询
Blogger Information
Blog 15
fans 0
comment 0
visits 6302
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
盒模型和媒体查询
啊℃。㏄
Original
377 people have browsed it

盒模型的常用属性

  1.  <body>
  2.     <div class="box"></div>
  3. </body>
  4.     <style>
  5.         .box{
  6.             width: 200px;  宽度
  7.             height: 200px;    高度
  8.             background-color: blueviolet;    背景颜色
  9.             border: 10px solid ; 边框
  10.             padding: 10px;     填充
  11.             background-clip: content-box;  /*背景裁切*/
  12.         }
  13.         /* 10（border）+10（padding）+（200）宽度+10（右padding）+10（右border）=240px的box */
  14.         </style>

效果如下：这个是240x240的box

如何自动变成一个200x200的box（box-sizing）

  1. .box{
  2.             width: 200px;  
  3.             height: 200px;
  4.             background-color: blueviolet;
  5.             border: 10px solid ;
  6.             padding: 10px; 
  7.             background-clip: content-box;
  8.             box-sizing: border-box; 设定了宽和高，自动调节
  9.         }

效果如下：

媒体查询（@media（））

何为媒体：显示/输出信息的介质/载体，（屏幕，打印机）
何为查询：根据当前媒体宽度的变化来选择不同的页面或显示效果

例子：

  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.     <button class="btn samll">btn1</button>
  11.     <button class="btn middle">btn2</button>
  12.     <button class="btn large">btn3</button>
  13. </body>
  15.     <style>
  17.         html{
  18.             font-size: 10px; 现在默认字号就是10px
  19.             /* 设置了字号是10px */
  20.         }
  21.          /* 按钮的基本样式 */
  22.          .btn{
  23.             background-color: aquamarine;
  24.             color: rgb(9, 22, 22);
  25.             border: none;
  26.             outline: none;
  27.         }
  28.         .btn:hover{
  29.             cursor: pointer;
  30.             opacity: 0.8;
  31.             transition: 0.3s;
  32.             padding: 0.4rem 0.8rem;
  33.         }
  34.         .btn.samll{
  35.             font-size: 1.2rem; 12px
  36.         }
  38.             </style>
  39. </html>

效果：

后续根据页面的宽度来设定元素的字号该如何去实现，就要用到（@media）

  1.  /* 设定最大宽度值是：400px，一旦小于400px，根元素的字号就会变成15px */
  2.         @media(max-width:400px){
  3.             html{
  4.                 font-size: 15px;
  5.             }
  6.         }

效果：

em和rem的区别

em：总是随着自身或父元素的字号发生变化，在布局时会显示的非常混乱

例子：

  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的说明</title>
  8. </head>
  9. <body>
  10.     <div>
  11.         <h2>hello</h2>
  12.     </div>
  13. </body>
  15.     <style>
  16.         div{
  17.             font-size: 20px;
  18.             /* 父元素设定了绝对单位，20px */
  19.         }
  20.         div>h2{
  21.             font-size: 2em;
  22.             /* 1em=20px，2em=40px */
  23.         }
  25.     </style>
  26. </html>

效果：

rem：在根元素中设置的字号，在其他地方引用是使用的是rem，并且这个值是固定的不变的，因为一个页面只有一个根元素，html

  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>rem的说明</title>
  8. </head>
  9. <body>
  10.     <div>
  11.         <h2>hello</h2>
  12.     </div>
  13. </body>
  14.     <style>
  16.         html{
  17.             font-size: 10px;
  18.         }
  20.         div>h2{
  21.             font-size: 2rem;
  22.         }
  23.     </style>
  25.     </style>
  26. </html>

效果：

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