Box模型计算是否包含保证金？

Question

当我查看我创建的盒子的实际宽度和实际高度时，尺寸会通过我在计算中始终知道的内容来确认：

width = border + padding +内容的宽度
height = border + padding +内容的高度

但在w3.org上它说： 框宽度由左右边距，边框和填充以及内容宽度的总和给出。高度由顶部和底部边距，边框和填充以及内容高度的总和给出。

那是哪个？我知道边距对于盒子模型很重要，但它不会影响盒子大小。

＆＃13;

＆＃13;

div {
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
}


/*200px + 2px + 10px = 212px */

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

“Box model”是@ K.Daniek在上面描述的内容。但是，我的印象是您想要知道所定义宽度中包含哪些参数。这取决于使用的box-sizing：

默认为 content-box ：这里所有内容都加起来：宽度加边框加填充构成了框的可见外部宽度（如果它可见边界和/或背景）。边距是额外的 - 与父元素的外部距离。 （有特殊情况下折叠边距，这是额外的事情）所以给定的宽度不包含任何其他内容。

使用 border-box ，给定的宽度包括边框和填充。再次，利润是额外/外部。

使用 padding-box ，给定的宽度仅包含填充，但不包括边框。再一次，利润是额外的/外部的，它们总是（与定义的width相关）。

另请参阅下面的示例，它们对宽度，边框，填充和边距都有相同的设置，但有三种不同的box-sizing可能性：

body {
    background: #fc7;
    margin: 0;
}
#x {/*200px + 2px border + 10px padding = 212px width plus margins */
    box-sizing: content-box;
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
    background: #7fc;
}
#y {/*200px = 200px width plus margins */
    box-sizing: border-box;
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
    background: #f6f;
}
#z {/*200px + 2px border = 202px width plus margins */
    box-sizing: padding-box;
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
    background: #cf9;
}

<div id="x">content-box</div>
<div id="y">border-box</div>
<div id="z">padding-box</div>

Answer 2

是，包装盒型号包含保证金。框模型代表形成正文文档的四个边：边距区域，边框区域，填充区域和内容区域< / strong>即可。我帖子底部的图片可能对您有所帮助。

  

填充区域延伸到填充周围的边框。当内容区域上设置了背景，颜色或图像时，这将扩展到填充，这就是为什么您可以将填充视为扩展内容的原因。填充位于填充边缘内部，其尺寸为填充框宽度和填充框高度。

可以使用padding-top，padding-right，padding-bottom，padding-left和简写填充CSS属性来控制填充和内容边缘之间的空间。

  

边框区域将填充区域扩展到包含边框的区域。它是边框边缘内的区域，其尺寸是边框宽度和边框高度。 此区域取决于border-width属性或速记边框定义的边框大小。

     

边距区域扩展边框区域，其中一个空区域用于将元素与其邻居分开。 边缘边缘内的区域，其尺寸为边距框宽度和边距框高度。

如果您不希望包含边距区域，则可以使用box-sizing属性。

• box-sizing: border-box会导致广告系列模型仅使用内容，填充和边框区域。
• box-sizing: content-box将只计算内容区域 填充，边框和边距区域。
• box-sizing: padding-box将仅使用内容和填充区域。

来源：https://css-tricks.com/the-css-box-model/

Answer 3

保证金会影响宽度

元素的总宽度=宽度+左边距+右边距+左边框+右边框+左边距+右边距

元素的总高度=高度+顶部填充+底部填充+顶部边框+底部边框+顶部边距+底部边距

在这里

宽度= 200px + 5px（填充左）+ 5px（右填充）+ 2px（左边距）+ 2px（边距右）+ 1px（边框左）+ 1px（边框右）= 216px。

点击此链接http://learn.shayhowe.com/html-css/opening-the-box-model/

希望这有帮助

检查此代码段，使用javascript

显示div的总宽度

＆＃13;

＆＃13;

$(document).ready(function(){
  alert($("#div1").outerWidth(true));
});

＆＃13;

div {
    border: 1px solid black;
    height: 200px;
    margin: 2px;
    padding: 5px;
    width: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">hello</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果你看一下代码片段，我有3个div，一个没有box-sizing属性，一个用box-sizing作为border-box，第三个用content-box。

对于offsetWidth上的MDN，它是内容+边框+填充的总和，但不是边距。

因此，当将box-sizing指定为border-box时，内容宽度会自动减小以分享其填充和边框的值。在给定的示例中，使用box-sizing：border-box和width为200px，内容水平长度（宽度）减少到188px，使内容+填充+边框为200px。 内容框，填充和边距另外添加到内容宽度200，因此我们看到宽度为212px。

基本上，当没有指定box-sizing时，box-sizing的默认值是inherits，它是content-box。

因此，主要是宽度计算取决于box-sizing属性。 offsetWidth总是内容+填充+边距，唯一不同的是基于box-sizing属性的内容宽度。

＆＃13;

＆＃13;

console.log("Inherit Width: " + document.querySelector(".content-div-inherit").offsetWidth + " - $ Width : " + $(".content-div-inherit").width());

console.log("Border Box Width: " + document.querySelector(".content-div-border-box").offsetWidth + " - $ Width : " + $(".content-div-border-box").width());

console.log("Content Box Width: " + document.querySelector(".content-div-content-box").offsetWidth + " - $ Width : " + $(".content-div-content-box").width());

＆＃13;

.content-div-inherit {
  border: 1px solid black;
  height: 200px;
  margin: 2px;
  padding: 5px;
  width: 200px;
}
.content-div-border-box {
  border: 1px solid black;
  height: 200px;
  margin: 2px;
  padding: 5px;
  width: 200px;
  box-sizing: border-box;
}
.content-div-content-box {
  border: 1px solid black;
  height: 200px;
  margin: 2px;
  padding: 5px;
  width: 200px;
  box-sizing: content-box;
}
.container {
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="content-div-inherit">This element Inherits box sizing Property</div>

  <div class="content-div-border-box">This element has Border Box</div>

  <div class="content-div-content-box">This element has Content Box</div>
</div>

＆＃13;

＆＃13;

＆＃13;