给出如下代码:
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
height: 100%;
}
.flX {
display: flex;
height: 100%;
}
#wrap {flex-direction: column}
#main {flex-grow: 0}
#preview {
display: flex;
flex-grow: 1;
height: 100%;
width: calc(100% - 256px);
background-color: gainsboro;
}
#properties {
width: 256px;
background-color: linen;
}
#propDrag {
width: 8px;
height: 16px;
background-color: silver;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap" class="flX">
<div id="main" class="flX">
<div id="preview"></div>
<div id="properties" class="flX">
<div id="propDrag"></div>
</div>
</div>
</div>
<script>
const qSlc = function(e) {return document.querySelector(e)},
main = qSlc("#main"),
properties = qSlc("#properties"),
propDrag = qSlc("#propDrag");
let dragProp = false;
function onMouseMove(e) {
let w=window.innerWidth,
x=e.clientX,
pw=w-x;
if (dragProp) {
properties.style.width = pw + 'px'
console.log(w,x,pw,properties.style.width)
}
}
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', () => dragProp = false);
propDrag.addEventListener('mousedown', () => dragProp = true);
</script>
</body>
</html>我注意到当我移动propDrag时，指针和元素之间存在差异。它随着我向左移动而增加。我还注意到属性之间存在差异。宽度在chrome>inspector>元素和它的视窗(当我悬停在chrome>inspector>elements>属性)。我用屏幕标尺测量了一下，在视口中属性矩形下面显示的宽度是正确的。为什么会有这种差异?如何解决?
我找到原因了:)所以我添加了"flex:1"CSS的#预览，并删除:flex-grow &宽度。我还是不明白为什么。