首先,为了铺垫一下,让我们来简单介绍一下:
HTML(超文本标记语言)
<div id="container">
<div id="inner">test</div>
</div>
CSS
#container {
width:300px;
height:150px;
background-color:#d7ebff;
}
#inner {
width:100%;
height:100%;
padding:5px;
background-color:#4c0015;
opacity:.3;
}
这将在所有现代浏览器中产生类似于以下内容的效果:
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box
...它将采用"border-box"模型并获得我认为更直观的行为,但我发现自己试图逻辑上证明这是为什么会是这样,但我无法做到。
对我来说,在表面上看,内部框应始终填满容器的100%宽度,而不管内部框的填充或边框如何。当我尝试将带有边框或类似4px内部填充的文本区域的宽度设置为100%时,我经常遇到这个问题...文本区域总是会溢出容器。
因此,我的问题是...在设置元素的宽度时忽略其边框和填充的默认行为背后的逻辑是什么?