后端问前端布局问题

Question

不擅长前端。

我布局的时候老是会撑大，比如

<div>
  <div id="left" style=" float:left;width:50%"></div>
  <div id="right" style=" float:right;width:50%"></div>
</div>

由于标准的盒子width指的是内容的宽度，我给leftdiv加个边框布局就乱了，我布局总是从外往里一层一层定大小啊，这个思路不对？
感觉还IE盒子人性化。。。

刚发布问题就查到一个解决方式，请前端同学确认：

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Answer 1

border-box，是以边框线的外边缘来定整体大小，默认的是content-box，是以内容区域为整体大小，也就是你设置的height和width来确定，你这样改是可以的，如果单单左右布局的话，也可以直接给你的right width：50%；改为max-width:50%;也可以设置宽度width：calc(50% - 2px)(在你边框线宽度为1px时)

Answer 2

一般 项目之前reset样式给常用元素都加box-sizing: border-box;