width100%后子元素margin超出怎么解决？

Question

我搜过了，都是说设置box-sizing, 这没border设置了没用。

我现在是把所有的父元素全部margin设置为0来保证width的计算是正确的。有什么好的解决办法？

<style>
.container,.box  {
    width: 100%;
    background-color: black;
}

.box {
    margin-left: 50px;
    background-color: red;
}
</style>
<div class="container">
    <div class="box">我超出了</div>
</div>

Answer 1

// 不给box设置宽度

.container  {
    width: 100%;
    background-color: black;
}

.box {
    margin-left: 50px;
    background-color: red;
}

Answer 2

width 100% 这种样式就不该出现在代码里。除非这个元素不在文档流中。
块级元素的默认表现本身就有宽度适应性。

Answer 3

不设置 width
或者用 calc

Answer 4

.box {
    width: calc(100% - 50px);
    margin-left: 50px;
    background-color: red;
}