盒子模型计算是否包括保证金？

Question

当我查看我创建的框的实际宽度和实际高度时，尺寸由我在计算中一直知道的内容确认：

宽度 = 边框 + 内边距 + 内容宽度
高度 = 边框 + 内边距 + 内容高度

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

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

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


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

<div></div>

Answer 1

“盒子模型”是@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

是的，盒子模型包括边距。盒子模型代表构成正文文档的四个边缘：ma​​rgin area、border area、padding area和content area。我的帖子底部的图片可能对您有所帮助。

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

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

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

ma​​rgin area 用一个空白区域扩展边界区域，用于将元素与其相邻元素分开。 它是margin边缘内的区域，它的尺寸是margin-box宽度和margin-box高度。

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

• box-sizing: border-box 将导致盒子模型仅使用 内容、填充和边框区域。
• box-sizing: content-box 将仅计算 内容区域，不包括 内边距、边框和边距区域。
• box-sizing: padding-box 将仅使用内容和填充区域。

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

Answer 3

边距影响宽度

一个元素的总宽度=width + left padding + right padding + 左边框 + 右边框 + 左边距 + 右边距

元素的总高度= 高度 + 上边距 + 下边距 + 上边框 + 下边框 + 上边距 + 下边距

这里会

width=200px+5px(padding-left)+5px(right padding)+2px(margin left)+2px(margin right)+ 1px(border-left)+1px(border-right)=216px。

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

希望对你有帮助

检查这段代码 sn-p，它使用 javascript 显示 div 的总宽度

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

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

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

Answer 4

如果您查看代码 sn-p ，我有 3 个 div 一个没有 box-sizing 属性，一个具有 box-sizing 作为边框框，第三个具有内容框。

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

所以，当 box-sizing 被指定为 border-box 时，内容宽度会自动缩小以共享其值用于填充和边框。在给定的示例中，使用 box-sizing : border-box 和宽度为 200px，内容水平长度（宽度）减少到 188px 以使内容 + 填充 + 边框为 200px。 使用 content-box，padding 和 margin 被额外添加到内容宽度 200，因此我们看到宽度为 212px。

基本上不指定box-sizing时，box-sizing的默认值是inherits，就是content-box。

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

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());

.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;
}

<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>