box布局小记

1.

<div style="display: -webkit-box;">
    <div style="width: 100%;">
        <input style="width: 100%;" type="text" value="input会100%" />
    </div>
</div>

<div style="display: -webkit-box;"><input style="width: 100%;"  type="text" value="input不会100%" /></div>

2.

<div id="children1" style="display:-webkit-box;-webkit-box-flex:1;">1</div>

<div id="children2" style="display:-webkit-box;-webkit-box-flex:1;">22</div>

<div id="children3" style="display:-webkit-box;-webkit-box-flex:1;">333</div>

这三个元素宽度不一致，虽然他们的flex都为1。

要想一致，去掉他们的-webkit-box-flex，设置他们的width为33.33%。

 

3.

在uc，qq手机浏览器上，对于input type="file"不设置宽度时，会挤出父元素的宽度，导致布局破坏。

 

box布局属性，将被flex属性替代。

参考：http://www.cnblogs.com/samwu/p/3655196.html