css border-box属性无法使用大填充值

根据MDN我已阅读“border-box通知浏览器计算您指定的宽度和高度值中的任何边框和填充值如果设置了元素的宽度为100个像素，即100个像素将包括任何边界，或者你补上空白，内容框将收缩来吸收多余的宽度”css border-box属性无法使用大填充值

但对我来说我设定了两个格框：

<style type="text/css"> 
    .container{ 
     width: 300px; 
     height: 300px; 
     background: blue; 
     margin: auto; 
    } 

    .child{ 
     width: 150px; 
     height: 150px; 
     background: yellow; 
     border: 2px solid red; 
     box-sizing: border-box; 
     padding: 200em; 
    } 
</style>

<body> 
    <div class="container"> 
     <div class="child"> 
      <h1>test</h1> 
     </div> 
    </div> 


</body>

我已与300像素的高度和宽度，孩子DIV与150像素的高度和宽度与边界框属性div容器中，但我都给予了很大的填充值对孩子的div框200em后容器箱不会收缩以吸收额外的宽度。我想知道为什么呢？

来源

2017-10-28 mystreie

https://stackoverflow.com/questions/9490974/ margin-and-padding-using-em – dippas

你想完成什么？ – agrm

他们是2件独立的事情。边框不限制大小，只是表示最终大小包含边框和填充。因此，如果内框具有边框和填充，并且它扩大到400px，则尺寸将为400px ，包括边框和填充。

一个调整，你可以对你的CSS，进行测试，是使外层的div 300像素，无论是内部的大小：

/* add min and max. */ 
.container { 
    min-width: 300px; 
    min-height: 300px; 
    max-width: 300px; 
    max-height: 300px; 
    background: blue; 
    margin: auto; 
}

来源

2017-10-28 22:36:12 wazz

css border-box属性无法使用大填充值

回答

相关问题