Question

今天这让我很烦恼。我想要做的是使用box-sizing方法使用100％的父减去一个边距（比如10 px）来控制子对象的大小。

我知道可以使用带有父级和10 px填充的box-sizing函数，然后将子级设置为100％，但我想知道是否可以反过来。

这就是我所拥有的....目前发生的一切是子框100％与父对象相符，边距不可见。

<div id="Parent">
   <div id="Child">
   </div>
</div>

和...

#Parent
{
height:500px;
width:500px;
background-color:red;
}

#Child
{
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;   
box-sizing: border-box;
margin-top:10px;
margin-left:10px;
width:100%;
height:100%;
background-color:green;
}

Answer 1

这是目前唯一安全的方法。作为替代方案，您可以使用像calc（）这样的css3值表达式，但并非所有浏览器都支持它。

http://caniuse.com/#search=calc

您可以在w3c的“CSS3值”页面http://www.w3.org/TR/css3-values/#calc0

上找到一些示例

box-sizing +子对象

1 个答案: