box-sizing:宽度为<padding的bo rder-box

问题描述 投票:0回答:1

据我了解box-sizingbox-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>
html css
1个回答
1
投票

如果你为元素添加一个高度,你会看到它们都是一样的。

div, span, input {
  display: block;
  box-sizing: border-box;
  width: 0;
  padding: 0 10px;
  border: solid green;
  border-width: 0 5px 0 5px;
  background: #ebebeb;
  height: 20px;
}
<div></div>
<br>
<span></span>
<br>
<input>

“元素”本身为0宽度,由蓝色框表示

填充两边都是10px

边界是双方5px

导致总盒子大小为30px

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.