如何使用border-box改变盒子尺寸

发布时间:2020-07-13 14:45:49 作者:Leah
来源:亿速云 阅读:423

如何使用border-box改变盒子尺寸?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

Box大小调整属性用于更改元素的高度和宽度。

从css2开始,box属性的工作方式如下所示 :

width + padding + border =元素框的实际可见/渲染宽度
height + padding + border =元素框的实际可见/渲染高度

意味着当您设置高度和宽度时,它会显得稍微大些,然后给定大小会导致元素边界和填充添加到元素的高度和宽度。

一:CSS大小调整属性

例如:

<html>
   <head>
      <style>
         .div1 {
            width: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            width: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
   </head>
   <body>
      <div class = "div1">亿速云</div><br />
      <div class = "div2">亿速云</div>
   </body>
</html>

结果:

如何使用border-box改变盒子尺寸

上图中两个元素的宽度和高度相同但给出的结果不同,导致第二个包含填充属性。

二:CSS3框大小属性

代码实例:

<html>
   <head>
      <style>
         .div1 {
            width: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            width: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
   </head>
   <body>
      <div class = "div1">亿速云</div><br />
      <div class = "div2">亿速云</div>
   </body>
</html>

如何使用border-box改变盒子尺寸

上面的元素具有相同的高度和宽度与box-sizing:border-box,因此对于两个元素,结果总是相同的,如上所示。

看完上述内容,你们掌握如何使用border-box改变盒子尺寸?的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

推荐阅读:
  1. 滚动条对盒子宽度的改变
  2. 设置标准盒子和怪异盒子

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

border-box 改变盒子尺寸

上一篇:疯狂ios讲义之实现游戏逻辑(3)

下一篇:使用Python将多个png图片转为gif

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》