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

4 回答

• 2

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

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

  对于border-box，给定的宽度包括边框和填充 . 再次，利润额外/外 .

  使用填充框，给定宽度仅包括填充，但不包括边框 . 再次，利润是额外的/外部的，它们总是（相对于定义的 width ） .

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

  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>
  

  回复于 2024-05-07T14:30:14+08:00
• 1

  保证金确实影响宽度

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

  元素的总高度=高度顶部填充底部填充顶部边界底部边界顶部边缘底部边距

  在这里

  width = 200px 5px（padding-left）5px（右边填充）2px（左边距）2px（边距右边）1px（border-left）1px（border-right）= 216px .

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

  希望这可以帮助

  检查此代码段，它使用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>
  

  回复于 2024-05-07T14:30:14+08:00
• -1

  Yes ，箱型包括保证金 . 框模型代表形成正文文档的四条边： margin area ， border area ， padding area 和 content area . 我帖子底部的图片可能对您有所帮助 .

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

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

  边框区域将填充区域扩展到包含边框的区域 . 它是边框边缘内的区域，其尺寸是边框宽度和边框高度 . 此区域取决于由border-width属性或速记边框定义的边框大小 . 边缘区域扩展边界区域，其中空区域用于将元素与其邻居分开 . 它是边缘边缘内的区域，其尺寸是边距框宽度和边距框高度 .

  如果 don't want 包含 margin area ，则可以使用 box-sizing 属性 .

  • box-sizing: border-box 将导致box-model仅使用 content, padding and border area .

  • box-sizing: content-box 将只计算 content area without padding, border and margin area .

  • box-sizing: padding-box 将仅使用 content and padding area .

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

  

  回复于 2024-05-07T14:30:14+08:00
• 1

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

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

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

  基本上，当未指定box-sizing时，box-sizing的默认值是inherits，它是content-box .

  因此，主要是宽度计算取决于box-sizing属性 . offsetWidth始终是内容填充边距，唯一不同的是基于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>
  

  回复于 2024-05-07T14:30:14+08:00