search

博客列表 >box-sizing和em使用场景+案例分析

box-sizing和em使用场景+案例分析

G
G原创
2020年10月21日 17:47:37957浏览

通过案例来展示box-sizing和em的使用场景

box-sizing

box-sizing:定义了 user agent 应该如何计算一个元素的总宽度和总高度。
两个属性：centent-box和border-box

centent-box是W3C标准盒子，具体的最后盒子大小是由用户设置的盒子大小+padding+margin大小构成。
total-height：height+padding-top+padding-bottom+margin-top+margin-bottom
total-width：width+padding-left+padding-right+margin-left+margin-right

border-box是IE盒子， width 和 height 属性包括内容，内边距和边框，但不包括外边距(margin），用户设置的盒子大小是多少就是多少。

盒模型属性及其简写规范

  • 盒模型属性值：内容区 内边距padding 边框border 外边距margin

  • 属性值简写规范：

    • 盒模型属性简写顺序：上 右 下 左
      1.   /* 一值语法：设置一个 值，让上下左右都相等 */
      2.   padding: 20px;
      3.   margin: 15px;
      4.   /* 二值语法：顺序为->  上下   左右 */
      5.   padding: 15px 20px;
      6.   margin: 15px 17px;
      7.   /* 三值语法：顺序为 -> 上  左右  下 */
      8.   padding: 10px 15px 20px;
      9.   margin: 10px 12px 15px;
      10.   /* 四值语法：顺序为 -> 上  右  下  左 */
      11.   padding: 10px 15px 20px 25px;
      12.   margin: 10px 12px 16px 20px;

  • 页面显示：

案例展示box-sizing

  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.       .box {
  9.         /* 标准的W3C盒子：centent-box。盒子大小会与用户设置的盒子大小有所出入 */
  10.         /* 因为盒子会被padding和margin撑开。最后的盒子大小为 用户设置的盒子大小+margin大小+padding盒子大小 */
  11.         box-sizing: content-box;
  12.         background-color: aqua;
  13.         background-clip: content-box;
  14.         height: 250px;
  15.         width: 250px;
  16.         /* 盒模型中能够设置样式的只有border  margin和padding是透明的，所以只能设置宽度 */
  18.         /* 一值语法：设置一个 值，让上下左右都相等 */
  19.         padding: 20px;
  20.         margin: 15px;
  21.         /* 二值语法：顺序为->  上下   左右 */
  22.         padding: 15px 20px;
  23.         margin: 15px 17px;
  24.         /* 三值语法：顺序为 -> 上  左右  下 */
  25.         padding: 10px 15px 20px;
  26.         margin: 10px 12px 15px;
  27.         /* 四值语法：顺序为 -> 上  右  下  左 */
  28.         padding: 10px 15px 20px 25px;
  29.         margin: 10px 12px 16px 20px;
  31.         /* 盒模型中，border可以自定义样式，border的属性值有三个，为：值   线条样式   颜色 */
  32.         border: 3px solid burlywood; /*无顺序影响*/
  34.         /* 而盒模型之中除了简写之外，还可以特定指写，指写：利用属性-方向（top right bottom left） */
  35.         padding-top: 50px;
  36.         margin-left: 30px;
  37.         border-bottom: 8px solid rgb(243, 56, 9);
  38.       }
  39.       .box2 {
  40.         /* 微软IE盒子：盒子大小不会被margin和padding 撑开，盒子大小不会包括margin和padding */
  41.         /* 一起计算，用户设置的是多大就是多大 */
  42.         box-sizing: border-box;
  43.         background-color: bisque;
  44.         height: 250px;
  45.         width: 250px;
  46.         padding: 20px;
  47.         margin: 15px;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <div class="box">centent-box</div>
  53.     <div class="box2">border-box</div>
  54.   </body>
  55. </html>

em的使用场景

em是什么

  • emCSS之中的一种相对单位，常用语自适应页面之中，是通过引用当前页面的字体大小或引用当前元素的字体大小来进行自适应设置元素大小的方式。
  • 引用的方式：
    • 1.祖先级元素如html body的字体大小
    • 2.浏览器的默认字号大小 如当前浏览器的默认字号大小为16px，则1em=16px
    • 3.当前元素的字体大小（需自行设置当前元素的字体大小）

  1. 祖先级元素的字体大小：

  2. 浏览器默认字体大小：
    由浏览器PC 安卓 IOS的浏览器区别而不同。

  3. 当前元素的字体大小：

案例分析

  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.       /* em是什么：em是引用祖先元素的字体大小或当前页面的字体大小来自动调整 */
  9.       /* 引用的方式：1.祖先级元素如html  body的字体大小
  10.                     2.浏览器的默认字号大小   如当前浏览器的默认字号大小为16px，则1em=16px
  11.                     3.当前元素的字体大小（需自行设置当前元素的字体大小） */
  12.       .username {
  13.         /* 当前浏览器的默认字体大小为16px  所以1em=16px */
  14.         box-sizing: border-box;
  15.         color: red;
  16.         padding: 2em; /*此时的1em=16px   2em=32px*/
  17.         border-radius: 1.2em;
  18.       }
  19.       .password {
  20.         /* 设置当前元素的字体大小为1.5em=24px   之后的每一个1em都等于1.5em  1em=1.5em=24px */
  21.         font-size: 24px;
  22.         box-sizing: border-box;
  23.         color: rgb(6, 209, 73);
  24.         padding: 2em; /*此时的1em=24px  2em=48px*/
  25.         border-radius: 1.2em;
  26.       }
  27.       .btn {
  28.         box-sizing: border-box;
  29.         padding: 2em;
  30.         color: blue;
  31.         border: none;
  32.         outline: none;
  33.         border-radius: 1.2em;
  34.         background-color: bisque;
  35.       }
  36.     </style>
  37.   </head>
  38.   <body>
  39.     <form action="check.php" method="POST">
  40.       <div class="username">
  41.         <label for="username">账号:</label>
  42.         <input
  43.           type="text"
  44.           name="username"
  45.           id="username"
  46.           value=""
  47.           required
  48.           autofocus
  49.           class="username"
  50.         />
  51.       </div>
  52.       <div class="password">
  53.         <label for="password">密码：</label>
  54.         <input
  55.           type="password"
  56.           name="password"
  57.           id="password"
  58.           value=""
  59.           required
  60.           class="password"
  61.         />
  62.       </div>
  63.       <button class="btn">立即注册</button>
  64.     </form>
  65.   </body>
  66. </html>

最终效果展示：

上一条：盒模型属性实例演示和box-sizing的应用场景下一条：1020作业-box-sizing使用和em案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多