登录  /  注册
首页 > 博客列表 > box-sizing和em使用场景+案例分析
博主信息
博文 28
粉丝 0
评论 0
访问量 28954
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
box-sizing和em使用场景+案例分析
G
原创
913人浏览过

通过案例来展示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>

最终效果展示：

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：盒模型的属性,依赖字号设置, 可以极大的简化代码
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录