1020作业 2020-10-20

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

1.常用盒模型属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒模型</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        background-color: coral;
        border: dashed 10px black;
        border-top: solid 30px cyan;
        border-radius: 20px;
        border-right: solid 40px magenta;
        border-bottom: solid 30px yellow;
        border-left: solid 40px black;
        text-align: center;
        font-size: 80px;
        padding: 30px;
        margin: 10px 20px 30px;
      }
      .t1 {
        color: red;
      }
      .t2 {
        color: green;
      }
      .t3 {
        color: blue;
      }
      .t4 {
        color: purple;
      }
      .box p {
        font-size: 30px;
        color: black;
        text-align: right;
        padding: 50px 0px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span class="t1">开</span>
      <span class="t2">吉</span>
      <span class="t3">尔</span>
      <span class="t4">软件</span>
      <p>PHP中文网</p>
    </div>
  </body>
</html>

效果图：

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

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

如下图

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

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>box-sizing</title>
    <style>
      .box1 {
        /* 默认的盒子模型  尺寸没有包括padding 和border
        */
        box-sizing: content-box;
        width: 10em;
        height: 10em;
        border: solid 0.625em red;
      }
      .box2 {
        box-sizing: border-box;
        width: 10em;
        height: 10em;
        border: solid 10px green;
      }
    </style>
  </head>
  <body>
    <div class="box1">开吉尔</div>
    <br />
    <div class="box2">开吉尔软件</div>
  </body>
</html>

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

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em</title>
    <style>
      .box1 {
        font-size: 1em;
      }
      .box2 {
        font-size: 2em;
      }
      .box3 {
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div class="box1">开吉尔</div>
    <div class="box2">软件</div>
    <div class="box3">开吉尔软件</div>
  </body>
</html>

批改老师：

天蓬老师

批改状态：合格

老师批语：对em是不是有感觉了?

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

PHP作业-HTML-2020-09-28

2020-09-29 00:28:16