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

Question

父元素是div，其宽度为300px，高度为40px，输入了子元素。

...    
$ layout_background .~ (FillStyleSolid transparent)
...

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>将使孩子比父母大。

Answer 1

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

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

Answer 2

默认情况下，input具有border-width: 2px;，因此您必须按如下所示设置输入的border-width:0px;

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

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

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