据我了解box-sizing,box-sizing:border-box
就是这么做的
width = border-left-width + padding-left + <free space> + padding-right + border-right-width
至少,这正是我设置的情况
div {
box-sizing: border-box;
width: 200px;
border-left: 5px solid green;
padding-left: 10px;
padding-right: 10px;
border-right: 5px solid green;
background: #ebebeb;
}
<div>170px free space</div>
所以,根据我的理解,width
定义了元素的“整体宽度”。但是,如果宽度小于填充+边界宽度的总和,则会发生奇怪的事情:
div, span, input {
box-sizing: border-box;
width: 0; /* <= */
border-top: none;
border-bottom: none;
border-left: 5px solid green;
padding-left: 10px;
padding-right: 10px;
border-right: 5px solid green;
background: #ebebeb;
}
<div></div>
<br>
<span></span>
<br>
<input>
Div的行为与预期一致,跨度似乎显示“<free space>”中的所有“左”,输入显示所有内容(并且只有0px“<free space>”)。
什么解释了这种行为?
编辑:span{display:block}
使跨度表现为div,这使得它至少有点可以理解。但是input{display:block}
没有同样的效果。为什么?
div, span, input {
box-sizing: border-box;
width: 0;
display: block; /* <= */
border-top: none;
border-bottom: none;
border-left: 5px solid green;
padding-left: 10px;
padding-right: 10px;
border-right: 5px solid green;
background: #ebebeb;
}
<div></div>
<br>
<span></span>
<br>
<input>