圆圈超出父分区

Question

我有一个圆圈，圆圈的右侧和底部部分稍微延伸到父 div 之外。这是为什么？我该如何解决这个问题？

.player-holder {
  height: 100px;
  max-width: 100px;
  min-width: 50px;
}

.player-thumb {
  margin: auto;
  height: 100%;
  min-width: 50px;
  width: 100px;
  border-radius: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  background-color: #f8f8f8;
  background-image: url("chat-icon.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50px;
}

<div class="player-holder">
  <a href="#">
    <div class="player-thumb"></div>
  </a>
</div>

Answer 1

我们只需一行即可解决所有问题：

将

box-sizing: border-box

添加到

.player-thumb

：

.player-holder {
  height: 100px;
  max-width: 100px;
  min-width: 50px;
}

.player-thumb {
  box-sizing: border-box;
  margin: auto;
  height: 100%;
  min-width: 50px;
  width: 100px;
  border-radius: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  background-color: #f8f8f8;
  background-image: url("chat-icon.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50px;
}

<div class="player-holder">
  <a href="#">
    <div class="player-thumb"></div>
  </a>
</div>

由于没有人解释为什么会发生这种情况，这里是对正在发生的事情的解释：

CSS 中有一个名为

box-sizing

的属性（MDN 上的文档），它定义了如何计算元素的尺寸。有三个选项；

• 内容框
• 填充盒
• 边框

注意：我省略了

initial

、

inherit

和

unset

，因为它们取决于默认值或父值。

下图显示了选项捕获的内容：

来源 （图像在 Stack Overflow 上重新上传，因为直接链接不起作用）

Content-box 是默认值，这意味着每当您定义宽度和高度时，内边距和边框尺寸都不包含在这些尺寸中。

假设您定义了一个高度为 100 像素的 div，顶部填充为 30 像素，底部有一个 10 像素的边框：

.random_div {
    height: 100px;
    padding-top: 30px;
    border-bottom: 10px solid #FFFFFF;
}

现在我们必须选择盒子大小的设置：

内容框：

当您不更改框大小时，div 的总高度将为 140 像素 (100 + 30 + 10)。

填充盒：

当您将 box-sizing 设置为 padding-box 时，div 的总高度将为 110 像素 (100 + 10)。这是因为填充现在包含在 100 像素的高度中。这将为您留下 70 像素的内容空间。

边框：

当您将 box-sizing 设置为 border-box 时，div 的总高度将为 100 像素。所有尺寸都包含在 div 的高度中。

您使用哪一个取决于您。我通常将大部分元素设置为 border-box，因为这对我有用。

Answer 2

您有圆形边框，因此实际圆形宽度将为 102px；

查看这支笔，看看它的行为方式：

如果需要圆形边框，则在父div上添加2px。还要检查圆圈高度；

.player-holder {
    height: 100px;
    max-width: 102px;
    min-width: 50px;
    background-color: red;
}

.player-thumb {
    margin: auto;
    height: calc(100% - 2px);
    min-width: 50px;
    width:100px;

    border-radius: 100%;
    border: 1px solid #ccc;

    overflow: hidden;
    background-color: #f8f8f8;
    background-image: url("chat-icon.png");
    background-repeat: no-repeat;
    background-position: center center;

    background-size: 50px;
}