关注我们

CSS3 - box-sizing属性

CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。

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

width(宽) + padding(内边距) + border(边框)=元素实际宽度
无涯教程网
height(高) + padding(内边距) + border(边框)=元素实际高度

这就意味着无涯教程在设置元素的 width/height 时，元素真实展示的高度与宽度会更大(因为元素的边框与内边距也会计算在 width/height 中)。

CSS2 Sizing 属性

复制代码

<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">learnfk.com</div><br />
      <div class="div2">learnfk.com</div>   </body>
</html>

它将产生以下输出-

上图是两个元素具有相同的宽度和高度但给定的输出不同，导致第二个包含填充属性。

CSS3 Box Sizing 属性

CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。

复制代码

<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"> learnfk.com</div><br />      <div class="div2"> learnfk.com</div>   </body>
</html>

输出：

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

快速上手C++数据结构与算法 -〔王健伟〕

结构思考力 · 透过结构看问题解决 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)