关注我们

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>

它将产生以下输出-

无涯教程网

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css3-box-sizing.html

来源：LearnFk无涯教程网

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

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>

输出：

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

技术教程推荐

技术领导力实战笔记 -〔TGO鲲鹏会〕

NLP实战高手课 -〔王然〕

图解 Google V8 -〔李兵〕

Service Mesh实战 -〔马若飞〕

职场求生攻略 -〔臧萌〕

编译原理实战课 -〔宫文学〕

说透芯片 -〔邵巍〕

React Hooks 核心原理与实战 -〔王沛〕

林外 · 专利写作第一课 -〔林外〕

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