Css 为什么填充可以有效地创建最小宽度和最小高度，即使框大小设置为border box，以及如何处理它？

带填充的div不能小于其填充所允许的大小

这是预期的行为吗？如果是，我们如何处理

div{
显示：内联块；
高度：50px；
宽度：1px；/*为什么不会*/
填充：10px；
框大小：边框框；
背景：灰色；
动画：动画宽度4s轻松输入输出无限；
}
@关键帧设置宽度动画{
0%{宽度：50px}
50%{宽度：1px}
100%{宽度：50px}
}

是的，这是预期的行为-填充是元素维度的一部分。关于“我们如何处理它”：在您的特定情况下，您还可以设置填充动画：


div{
显示：内联块；
高度：50px；
宽度：1px；
/*为什么不呢*/
填充：10px；
框大小：边框框；
背景：灰色；
动画：动画宽度4s轻松输入输出无限；
}
@关键帧设置宽度动画{
0% {
宽度：50像素
}
50% {
宽度：1px；
填充：0；
}
100% {
宽度：50像素
}
}

<代码> > p>解决方案是考虑父元素，可以强制其宽度等于0，并隐藏溢出：


.parent{
显示：内联块；
动画：动画宽度4s轻松输入输出无限；
背景：红色；
溢出：隐藏；
}
.parent>div{
高度：50px；
填充：10px；
框大小：边框框；
背景：灰色；
最小宽度：0；
宽度：100%；
}
@关键帧设置宽度动画{
0% {
宽度：50像素
}
50% {
宽度：1px
}
100% {
宽度：50像素
}
}

是的，这是行为，你想处理什么？什么是
1x
？没有这样的单位。是的，这是预期的行为。顺便说一句，只要有可能，尝试设置变换动画，这对性能有好处。对于给定的情况，您可以尝试使用scaleX（0），这也将“修复”填充问题。