在css编写过程中我们遇到过li宽度为50%，而给li增加了一个border边框，然后本来li为左浮动呈现2排的排版模式无法实现，呈现为一排的情况。最终导致的原因是li的实际宽度当前为50%+1px，所以左浮动后 父元素的宽100%容纳不了50%*2+2px，比如
.box {width:100px;}
.box ul{width:100px;}
.box ul li{width:50%; float:left; border:1px #000000 solid;}
以上代码中li不会呈现2排并列，其中原因是border的宽度给li增加了一个1px的宽度。
那么怎么解决呢？
box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */以上属性规定li的border的宽度在50%以内，并不会变成50%+1px；
版权所有丨如未注明，均为原创，转载请注明本文固定链接！
