Question

我想知道为什么我为孩子div定义的边框没有包含元素。我使用div标记定义了两个框，并且将边框应用于子div元素。

    #box {
      height: 500px;
      width: 500px;
      background-color: orange;
    }
    
    #upper-half {
      height: 50%;
      width: 100%;
      padding: 0px;
      border: 5px solid black;
    }

       <html>
      <head>
        <meta charset="utf-8">
        <title>Height and width percentages</title>
        <link rel="stylesheet" href="practice.css"/>
      </head>
      <body>
        <div id="box">
          <div id="upper-half">
          </div>
        </div>
      </body>
    </html>

您看到的边框没有完全包围“上半部”框。

要对此进行调查，我使用了浏览器页面检查器，看来盒子的尺寸是509.2 x 259.2。

我现在有几个问题：-

为什么装箱尺寸为：即使填充为零，仍为509.2 x 259.2？
为什么边框没有封闭盒子？
为什么边框与框的左侧，顶部和底部齐平（预期），而不是右侧？

Answer 1

尝试添加 box-sizing：border-box;

框大小的默认值是内容框，它将边框的宽度与内容的宽度相加。将其值设置为边框，它将计算包括边框在内的总宽度

    #box {
      height: 500px;
      width: 500px;
      background-color: orange;
    }
    
    #upper-half {
      box-sizing: border-box;
      height: 50%;
      width: 100%;
      padding: 0px;
      border: 5px solid black;
    }

       <html>
      <head>
        <meta charset="utf-8">
        <title>Height and width percentages</title>
        <link rel="stylesheet" href="practice.css"/>
      </head>
      <body>
        <div id="box">
          <div id="upper-half">
          </div>
        </div>
      </body>
    </html>

有关更多信息，请检查this tutorial

Answer 2

摆脱内盒上的a b c d 0 NaN 1.0 NaN 3 1 NaN NaN NaN 2 2 2.0 1.5 -3.0 1。参见下面的示例。

width:100%

#box {
  height: 500px;
  width: 500px;
  background-color: orange;
}
    
#upper-half {
  height: 50%;
  

  border: 5px solid black;
}

Answer 3

由于您实际上定义了一个框，因此您的问题非常混乱：#box。但这是尝试回答他们的问题：

您的#box是CSS中指定的500px x 500px
＃upper-half不包含#box，因为您已将其定义为包围div的#box的50％x 100％，因此它将是250px x 500px
border规范未包含在总高度或宽度计算中，因此将超出您期望的50％x 100％。它仅在#box的左侧和顶部处于“刷新”状态，这是因为默认情况下，DOM将对象在左侧和顶部对齐。它不是在#box的底部或右边“齐平”，因为您没有告诉它是，只是给出了高度和宽度说明。

如@Damian Peralta所指出的那样，在＃upper-half上使用box-sizing: border-box;可以正确地将其“绑定”在#box内。

边框不在周围

3 个答案: