Circle离开Parent Div

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的属性，它定义了如何计算元素的尺寸。有三种选择;

• 内容盒
• 填充盒
• 边界框

注：我省略initial和inherit，因为它们依赖于默认值或父值。

下图显示了你什么选项捕获：

Source （Stack Overflow的图像重新上传，因为直接的联系没有工作）

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

比方说，你定义它具有100个像素的高度一个div，填充，顶部是30个像素，并有在这10个像素的底部边框：

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

现在我们将不得不选择箱大小的设置：

内容框：

当你将不会改变盒大小，股利将获得的140个像素（100 + 30 + 10）的总高度。

填充盒：

当您设置箱大小，以填充盒，股利将获得的110个像素（100 + 10）的总高度。这是因为填充现在包含在100像素的高度中。这为您留下70像素的空间用于内容。

边界框：

当你设置框上浆边境盒，股利会得到100个像素的总高度。所有尺寸都包含在div的高度中。

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

Answer 2

你有一圈边框，因此实际的圈宽度将是102px;

看到这个[笔] [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; 


    }