HTML中div带边框缩放浏览器出现div位置错位

用浮动布局时， 如果为子元素的宽度指定绝对值，并且子元素具有边框，在缩放浏览器的时候会出现错位现象。
这种现象产生的原因是：
浏览器缩放时，子元素父元素的内容都等比例缩放，而子元素的边框不能等比例缩放，在缩放到达一定程度后，会造成子元素大于父元素，从而产生错位现象。

解决办法:

①在父级div中使用css样式

.parent-div{
  width: 1200px;
  min-width: 1200px;
  height: 500px;
  border: 1px dashed yellow;
  border-radius: 25px;
}

②在子级div中使用百分比设置宽度，并在设置div边框时使用box-sizing: border-box

.left-div {
  float: left;
  width: 40%;
  height: 500px;
  border: 1px dashed yellow;
  box-sizing: border-box;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
.right-div {
  float: right;
  width: 60%;
  height: 500px;
  border: 1px dashed yellow;
  box-sizing: border-box;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

由此，浏览器无论是放大还是缩小，都不会出现div位置错位的现象！