Question

我试图了解边界如何影响内部div的大小和可视化。我在我的应用程序中遇到这个问题，在有错误的字段周围显示边框，我似乎无法正确获取CSS。（顺便说一句，很明显我还没有“获得”CSS。我正在研究它。）

请考虑以下页面：

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Booking Dojo Application</title>

    <style type="text/css">

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#appContainer {
  height: 50px;

  width: 500px;
  background-color: red;
}

#innerContainer {
  height: 50px;
  border-width: 5px;
  border-style: solid;
  /*width: 100%;*/
}

#ruler {
  width: 500px;
  background-color: blue;
  height: 20px;

}

    </style>

  </head>

  <body>
    <div id="ruler"></div>

    <div id="appContainer">
      <div id="innerContainer">
        <span>AHAH</span>
      </div>
        </div>
  </body>

</html>

如果我没有指定内部div的宽度，那么它的宽度与父相同，包括边框。

但是，如果我指定内部div的宽度，就会发生奇怪的事情：Chrome将边框“拉出”，但是......只是向右边？！

我显然缺少一些东西。所以：

为什么我会看到我所看到的内容？
我想做的是，知道应该指定内部div的宽度，以获得与“无宽度”相同的结果吗？（除了在我的应用程序中似乎“工作”的“99％”，但是...... meh）

Answer 1

http://jsfiddle.net/X3gw6/1/

你需要：

 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;

更多信息： http://css-tricks.com/box-sizing/

基本上，内部div的高度和宽度都较大，因为边界......导致了问题......

Answer 2

这是因为边框会增加元素的高度和宽度。所以100％的宽度是500px加上5px左边和5px右边界= 510px。您可以看到width: 490px;使内部容器与其他元素内联：http://jsfiddle.net/2wLQR/

box-sizing: border-box;会阻止它离开：http://jsfiddle.net/2wLQR/1/

Answer 3

默认情况下，边框会添加到宽度。如果您没有指定宽度，则默认设置是占用所有空间并使其适合。所以内部宽度是100％ - 边界。

指定宽度时，默认情况下指定内部宽度。 100％以上的边界＆gt; 100％。

箱上浆：边界框;添加规则意味着您使用边框指定宽度。这是CSS3的一部分。

如果宽度是百分比，但你需要一个固定大小的边框，框大小：border-box;规则使它成为可能。 http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

边界如何影响内部div的大小？

3 个答案: