设置width:100%再设置margin或padding溢出的问题

第一种情况：

父子组件width都设为100%，子组件中设置了margin，溢出

解决方法：

在父组件中加入display: inline-flex即可

<div style="width: 100%; display: inline-flex;">
    <div style="width: 100%; background-color: #46b6c8; margin: 12px;">sdsdffsdfsdf=====       </div>
</div>

第二种解决方法：

在子组件外层套上一层div，这个div不设置宽度，只设置margin或padding

        <div style="width: 100%;">
            <div style="margin: 12px;">
                <div style="width: 100%; background-color: #46b6c8;">sdsdffsdfsdf=====</div>
            </div>
        </div>

第二种情况：

父子组件width都设为100%，父组件中设置了padding，溢出

解决方法：

在父组件中增加

box-sizing: border-box;

        <div style="width: 100%;box-sizing: border-box; padding: 12px">
            <div style="width: 100%; background-color: #46b6c8;">sdsdffsdfsdf=====</div>
        </div>

另外：有些方法在一个页面上可用，到了另一个页面就不可用了。与子组件的布局有关？？？