Question

我有一个圆圈，圆圈的右下部分略微延伸到父div之外。为什么会这样？我怎样才能解决这个问题？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

我们只需一行即可修复所有内容：

将box-sizing: border-box添加到.player-thumb：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

在CSS中有一个名为box-sizing的属性，它定义了如何计算元素的尺寸。有三种选择;

内容框
填充盒
边界框

注意：我省略了initial和inherit，因为它们取决于默认值或父值。

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

Source （图片重新上传到Stack Overflow，因为直接链接无法正常工作）

“内容”框是默认设置，这意味着无论何时定义宽度和高度，填充和边框尺寸都不包含在这些尺寸中。

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

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

现在我们必须为盒子大小选择一个设置：

内容框：

当你不能改变盒子大小时，div的总高度将达到140像素（100 + 30 + 10）。

填充盒：

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

边界框：

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

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

Answer 2

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

请参阅[pen] [1]以查看其行为：

如果您需要圆形边框，请将2px添加到父div。还要检查圆高;

    .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;


    }

圈子走出父母之外

2 个答案: