我正在尝试制作一个简单的 html div，其边框与文本区域一起扩展和收缩。我设法编写了所需的 js 代码来做到这一点，但我总是在 2 个元素之间（在它们展开时在它们的默认位置处）出现大约 2-3 个像素的小间隙*。有什么想法如何解决它吗？*代码片段中似乎没有间隙，但当我在 chrome、FF 和 Edge 中尝试时有间隙。证明：<html><body> <div id="small-box"></div> <textarea id="textarea" onmousemove="resizeBoxWidth()"></textarea> <style> #small-box { font-size: 30; text-align: center; line-height: 3.5; top: 40px; left: 40px; width: 450px; height: 100px; border-color: black; border-style: solid; border-width: 3px; position: absolute; } #textarea { min-height: 100px; max-height: 100px; border-width: 3px; border-color: black; top: 150px; left: 40px; width: 450px; height: 100px; position: absolute; } </style> <script> function resizeBoxWidth() { var smallBox = document.getElementById("small-box"); var textarea = document.getElementById("textarea"); smallBox.style.width = textarea.style.width; } </script></body></html>
2 回答
大话西游666
TA贡献1817条经验 获得超14个赞
这是由于box-sizing，它定义了如何width计算，
默认情况下，在 CSS 盒模型中，分配给元素的宽度和高度仅应用于该元素的内容框。如果元素有任何边框或填充，则会将其添加到宽度和高度，以达到在屏幕上呈现的框的大小。
如果为每个元素提供相同的box-sizing设置，则将以相同的方式计算大小并显示相同的大小。
function resizeBoxWidth() {
var smallBox = document.getElementById("small-box");
var textarea = document.getElementById("textarea");
smallBox.style.width = textarea.style.width;
}
#small-box {
font-size: 30;
text-align: center;
line-height: 3.5;
top: 40px;
left: 40px;
width: 450px;
height: 100px;
border-color: black;
border-style: solid;
border-width: 3px;
position: absolute;
box-sizing: border-box;
}
#textarea {
min-height: 100px;
max-height: 100px;
border-width: 3px;
border-color: black;
top: 150px;
left: 40px;
width: 450px;
height: 100px;
position: absolute;
box-sizing: border-box;
}
<div id="small-box"></div>
<textarea id="textarea" onmousemove="resizeBoxWidth()"></textarea>
元芳怎么了
TA贡献1798条经验 获得超7个赞
通过使用检查工具的短视图，我发现文本区域的默认包含padding: 2px;会影响文本区域的位置和宽度。
与不包含任何 pervious 属性的 div 不同。
添加回答
举报
0/150
提交
取消