Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 盒模型,媒体查询,单位的实例演示
Blogger Information
Blog 33
fans 0
comment 0
visits 17086
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
盒模型,媒体查询,单位的实例演示
lucaslwk
Original
413 people have browsed it

盒模型,媒体查询,单位的实例演示

1.盒模型

实现效果

盒模型

关键代码

  1. <style>
  2.   .box1 {
  3.     /* 宽 */
  4.     width: 200px;
  5.     /* 高 */
  6.     height: 200px;
  7.     /* 边框 solid实线 dashed虚线 */
  8.     border: 10px dashed red;
  9.     /* 背景颜色 */
  10.     background-color: aqua;
  11.     /* 内边距,外边距:四值,顺时针方向,上右下左 */
  12.     /* 三值:左右相等 */
  13.     /* 双值:左=右不等于上=下 */
  14.     /* 单值:四边距相等 */
  15.     /* 内边距 */
  16.     padding: 20px 15px 10px 5px;
  17.     /* 外边距:垂直方向折叠,塌陷,不叠加,以较大的为准*/
  18.     margin: 10px 0px;
  19.     /* 指定背景区域的显示区域,默认值为border-box*/
  20.     /* border-box:背景绘制在边框方框内 */
  21.     /* padding-box:背景绘制在衬距方框内 */
  22.     /* content-box:背景绘制在内容方框内 */
  23.     background-clip: content-box;
  24.     /* 元素的总高度和宽度,默认值为content-box*/
  25.     /* content-box:设置的宽度为内容区的宽度和高度 */
  26.     /* 宽度+内边距+边框=元素实际宽度 */
  27.     /* height+内边距+边框=元素实际高度 */
  28.     /* border-box:设置的宽度就是实际的宽度,不需要考虑内边距和边框 */
  29.     box-sizing: border-box;
  30.   }
  31.   .box2 {
  32.     width: 200px;
  33.     height: 200px;
  34.     border: 10px solid red;
  35.     box-sizing: border-box;
  36.     margin: 20px 0px;
  37.   }
  38. </style>
  39. <body>
  40.   <div class="box1"></div>
  41.   <div class="box2"></div>
  42. </body>

2.媒体查询

实现效果

媒体查询
媒体查询
媒体查询

关键代码

  1. <style>
  2.   html {
  3.     font-size: 10px;
  4.   }
  5.   .button {
  6.     font-size: 1rem;
  7.   }
  8.   .button:hover {
  9.     /* 透明度 */
  10.     opacity: 0.8;
  11.     /* 动画过度时间 */
  12.     transition: 0.3s;
  13.     padding: 0.4rem 0.8rem;
  14.   }
  16.   /* 宽度大于等于425px时更改元素大小 */
  17.   @media (min-width: 425px) {
  18.     html {
  19.       font-size: 20px;
  20.       background-color: red;
  21.     }
  22.   }
  23.   /* 宽度小于425px大于320px时更改元素大小 */
  24.   @media (max-width: 425px) AND (min-width: 320px) {
  25.     html {
  26.       font-size: 30px;
  27.       background-color: green;
  28.     }
  29.   }
  31.   /* 宽度小于等于320px时更改元素大小 */
  32.   @media (max-width: 320px) {
  33.     html {
  34.       font-size: 40px;
  35.       background-color: blue;
  36.     }
  37.   }
  38. </style>
  39. <body>
  40.   <button class="button">button1</button>
  41.   <button class="button">button2</button>
  42.   <button class="button">button3</button>
  43. </body>

3.单位

实现效果

em

em

rem

rem

关键代码

  1. <style>
  2.   /* em的使用,相对父级元素字体大小的倍数 */
  3.   .content {
  4.     font-size: 1.5em;
  5.   }
  6.   .title {
  7.     font-size: 1.5em;
  8.   }
  9.   /* 此时字体大小为默认大小16*1.5*1.5=36px */
  10.   /* rem的使用,相对 html 根元素字体大小的倍数 */
  11.   html {
  12.     /* 默认为16px */
  13.     font-size: 16px;
  14.   }
  15.   .content {
  16.     font-size: 1.5rem;
  17.   }
  18.   .title {
  19.     font-size: 1.5rem;
  20.   }
  21.   /* 此时字体大小为默认大小16*1.5=24px */
  22. </style>
  23. <body>
  24.   <div class="content">
  25.     <div class="title">title</div>
  26.   </div>
  27. </body>
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