javascript - 为什么不能将子宽度和高度设置为与父相同？

Question

父元素为div，宽300px，高40px，子元素为input。

myinput = document.getElementById("e2");
myinput.style.cssText ='width:100%;height:100%;padding:0px;margin:0px;'

div{
    width:300px;
    height:40px;
    border:1px solid red;
}

<div id="e1"><input id="e2" type="text" /></div>

我想设置 child 的宽度和高度与 parent 相同，
myinput.style.cssText ='width:100%;height:100%;' 会让 child 比 parent 大。

Answer 1

你需要添加box-sizing: border-box;

myinput.style.cssText ='width:100%;height:100%;box-sizing: border-box;'