为什么顶部和左侧边界不被视为单线？

Question

div {
  border: 1px solid red;
}
.one {
  height: 20px;
  width: 20px;
}
.two {
  height: 30px;
  width: 30px;
}

<div class="one">
  <div class="two">
  </div>
</div>

在DOM树中，.two div是.one div的子节点。这种父子关系与两个元素的显示无关。

如下图所示，我没有看到顶部和左边框为单线。为什么较小的盒子更接近屏幕的中心？

注意：在计算机图形世界中，显示器的左上角是屏幕的中心。 html / css初学者

Answer 1

这两行没有连接在一起，因为.two元素位于<{strong> .one元素内。

你可以看到一个带有边框的div作为一个房间，周围有一面墙，在这种情况下，它包含另一个房间，周围有一面墙。您似乎期望发生的事情是，将两个“房间”放在彼此的顶部上，而在HTML / CSS中，“房间”放置在内部彼此。如果您想要连接线，可以在.two元素上使用负边距，如下所示：

.two {
    height: 30px;
    width: 30px;
    margin: -1px 0 0 -1px;
}

这样，.two元素看起来就像放在另一个元素之上

Answer 2

我在这里看到两个问题：

  

为什么上边框和左边框没有一条线？

因为css是以这种方式构建的，如果你想要一条线，你必须只使用border-right和border-bottom作为你的内部div。 （或将border-top和border-left设置为0）

  

为什么较小的盒子位于屏幕的中心？

编辑您的编辑：因为.one包含.two，但css中没有边框融合。所以你的大屁股是＆＃34;内部＆＃34;你的小div，但是满溢。

如果您不明白，也许可以尝试使用不同的颜色来区分您的div

Answer 3

use this :

<div id="d1">
     <div id="d2">
 </div>
</div>




#d1{
    height:100px;
    width:100px;
    border-color:black;
    border-width:1px;
    border-style:solid;
}

#d2{
   height:50px;
   width:50px;
   border-color:red;
   border-width:1px;
   border-style:solid;
   position:relative;
    top:-1px;
   left:-1px;
}