Html 为什么flexbox会更改我的div’；带特定值的s宽度

我尝试使用flex布局创建登录内容，它就像一行中的图标和输入。我用图标和宽度设置输入的宽度：100%，设置宽度：20px和高度：20px。我认为它将输入除特定值之外的所有剩余宽度。结果是图标的大小发生了变化

随着对

flex

的进一步了解，我知道了另一种实现方法，例如

flex:1

输入或设置图标的

min width/height

，但我只想知道为什么

width:100%

会影响兄弟图标的大小

.parent{
宽度：72%；
高度：100px；
边框：1px纯色浅蓝色；
显示器：flex；
对齐项目：居中；
}
.图标{
宽度：20px；
高度：20px；
边框：2倍纯绿；
显示：块；
}
.登录{
宽度：100%；
}
.login:：占位符{
宽度：91px；
}

这是由于造成的。您的

width

和

height

修改实际上并不是来自flexbox，而是来自

width:72%

和边框的计算。请注意，如果去掉

.icon

上的

边框：2px纯绿色

，则

.icon

高度将返回到指定的
20px

如果要阻止这些调整，可以设置
框大小：边框框
，这将使
图标的
20px
宽度
包括所有边框和填充计算：

* {
  box-sizing: border: box;
}

我建议使用全局选择器将其应用于所有元素，
实际上，通常建议设置该值，因为它使元素大小计算更容易处理，而且事实上，大多数框架默认都包含该声明


*{
框大小：边框框；
}
.家长{
宽度：72%；
高度：100px；
边框：1px纯色浅蓝色；
显示器：flex；
对齐项目：居中；
}
.图标{
宽度：20px；
高度：20px；
边框：2倍纯绿；
显示：块；
}
.登录{
宽度：100%；
}
.login:：占位符{
宽度：91px；
}

这是由于造成的。您的
width
和
height
修改实际上并不是来自flexbox，而是来自
width:72%
和边框的计算。请注意，如果去掉
.icon
上的
边框：2px纯绿色
，则
.icon
高度将返回到指定的
20px

如果要阻止这些调整，可以设置
框大小：边框框
，这将使
图标的
20px
宽度
包括所有边框和填充计算：

* {
  box-sizing: border: box;
}

我建议使用全局选择器将其应用于所有元素，
实际上，通常建议设置该值，因为它使元素大小计算更容易处理，而且事实上，大多数框架默认都包含该声明


*{
框大小：边框框；
}
.家长{
宽度：72%；
高度：100px；
边框：1px纯色浅蓝色；
显示器：flex；
对齐项目：居中；
}
.图标{
宽度：20px；
高度：20px；
边框：2倍纯绿；
显示：块；
}
.登录{
宽度：100%；
}
.login:：占位符{
宽度：91px；
}

第一组
框大小：边框框
将边框纳入宽度计算-现在宽度再次小于20px。。。这是因为默认情况下
flex-shrink
值为1（
width:100%
的输入将收缩
图标
）-因此使用
flex-shrink:0
第一组
框大小：边框框
将边框纳入宽度计算-现在宽度再次小于20px。。。这是因为默认情况下
flex-shrink
值为1（
width:100%
的输入将收缩
图标
）-因此使用
flex-shrink:0
是的，我错过了边框，
height
是因为边框，但是影响
width
的因素是什么？是的，我错过了边框，
height
是因为边框，但是什么会影响宽度呢？