Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1020作业-盒模型和em 2020-10-20
Blogger Information
Blog 6
fans 0
comment 0
visits 3765
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
1020作业-盒模型和em 2020-10-20
开吉尔软件
Original
558 people have browsed it

1020作业 2020-10-20

  1. 写一个案例, 将常用的盒模型属性做一遍,理解box-sizing的意义与使用场景
  2. em的意义,并自己举一个案例来演示它(不得引用课堂案例)

1.常用盒模型属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>盒模型</title>
  7.     <style>
  8.       .box {
  9.         width: 300px;
  10.         height: 300px;
  11.         background-color: coral;
  12.         border: dashed 10px black;
  13.         border-top: solid 30px cyan;
  14.         border-radius: 20px;
  15.         border-right: solid 40px magenta;
  16.         border-bottom: solid 30px yellow;
  17.         border-left: solid 40px black;
  18.         text-align: center;
  19.         font-size: 80px;
  20.         padding: 30px;
  21.         margin: 10px 20px 30px;
  22.       }
  24.       .t1 {
  25.         color: red;
  26.       }
  27.       .t2 {
  28.         color: green;
  29.       }
  30.       .t3 {
  31.         color: blue;
  32.       }
  33.       .t4 {
  34.         color: purple;
  35.       }
  37.       .box p {
  38.         font-size: 30px;
  39.         color: black;
  40.         text-align: right;
  41.         padding: 50px 0px;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="box">
  47.       <span class="t1">开</span>
  48.       <span class="t2">吉</span>
  49.       <span class="t3">尔</span>
  50.       <span class="t4">软件</span>
  51.       <p>PHP中文网</p>
  52.     </div>
  53.   </body>
  54. </html>

效果图：



2.box-sizing的意义与使用场景

(1) box尺寸不含padding和border： box-sizing = content-box（默认），

如下图

(2) box尺寸包含padding和border： box-sizing =border-box 如下图

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>box-sizing</title>
  7.     <style>
  8.       .box1 {
  9.         /* 默认的盒子模型  尺寸没有包括padding 和border
  11.         */
  12.         box-sizing: content-box;
  13.         width: 10em;
  14.         height: 10em;
  15.         border: solid 0.625em red;
  16.       }
  18.       .box2 {
  19.         box-sizing: border-box;
  20.         width: 10em;
  21.         height: 10em;
  22.         border: solid 10px green;
  23.       }
  24.     </style>
  25.   </head>
  26.   <body>
  27.     <div class="box1">开吉尔</div>
  28.     <br />
  29.     <div class="box2">开吉尔软件</div>
  30.   </body>
  31. </html>

3.em的意义，并举例说明

(1)em意义：当前浏览器的字号的引用，通常是16px，font-size字号动态变化字号。

(2)举例说明em, 1em=16px ,2em=32px

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>em</title>
  7.     <style>
  8.       .box1 {
  9.         font-size: 1em;
  10.       }
  12.       .box2 {
  13.         font-size: 2em;
  14.       }
  16.       .box3 {
  17.         font-size: 3em;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div class="box1">开吉尔</div>
  23.     <div class="box2">软件</div>
  24.     <div class="box3">开吉尔软件</div>
  25.   </body>
  26. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：对em是不是有感觉了?
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