移动端中不得不说的CSS3属性box-sizing

CSS有两种盒模型标准盒模型和怪异盒模型，按理说，我们应该遵循W3C标准使用标准盒模型，但我发现很多UI框架使用的都是怪异盒模型，比如ionic、vux、和bootstrap、为什么呢？

    直到做了一个小程序的项目遇到了一个这样的问题，本来我写了两个div，它们在flex布局下分别占50%的宽度，我设置width为50%即可，当我画完了，很满意的看了看页。

代码

    *{ margin: 0; padding: 0; box-sizing: conter-box; }

    #val{ display: flex; height: 200px; }

    .val{ width: 50%; color: #fff; font-size: 60px; background: red; }

    .vel{ width: 50%; color: #fff; font-size: 60px; background: #643df2; }

    <div id='val'>

            <div class='val'>左边</div>

            <div class='vel'>右边</div>

    </div>

    如果给左边加上一个边框，左边和右边的不相等了。因为左边加上了边框，所以宽度溢出了，这时候右边就会压缩自己，这样就导致两边不一致了

关键是不好调。因为border必须为数值，而其它的为百分比，这样就很难知道左右该设多少比例，才能让左右两边完全一致了。

而用怪异盒模型，这样的问题就迎刃而解。

*{ margin: 0; padding: 0; box-sizing: border-box; }

这样不管你边框是多宽，左右都是始终相等的。

在做移动端项目的时候都是需要自适应布局的，需要用到大量的百分数，这时候再用标准盒模型，边框进来插一脚无疑会让情况变得很复杂，对自适应布局很不友好，这大概就是很多框架都采用怪异盒子模型的原因吧。