关于css:FEUX常见CSS边界情况防御处理

遵循这种心态至多会缩小您可能遇到的问题。

对于这个组件，题目能够是一个词，也能够是多个词。为防止题目卡在右侧的图标上，最好增加margin-right: 1rem，以防题目变长。

如果一个按钮与另一个按钮相邻，则为第二个按钮增加一个右边距，以防万一

.button + .button {margin-left: 1rem;}

第一个解决方案是应用文本截断 & max-width。第二个只应用 max-width，但如果标签有很长的文本，它可能会失败。

图像默认背景

img {background-color: #525252;}

object-fit: cover防止头像拉伸

flex-wrap以防止元素溢出

文本截断 + 左边距

overscroll-behavior-y: contain;防止父元素一起滚动

css 变量设置兜底值, 如calc(100% - var(--actions-width, 70px))

应用 min-height 代替height

同理替换 width 为min-width.

不要忘记 background-repeat

当题目有一个很长的词时，它不会换行。
即便咱们应用 overflow-wrap: break-word，它也不起作用。
要更改该默认行为，咱们须要 min-width 将 flex 项的设置为 0。那是因为min-width 默认值是 auto，就会产生溢出。
同样的事件实用于列 flex 包装器，咱们应用min-height: 0。

.card {display: flex;}
.card__title {
    overflow-wrap: break-word;
    min-width: 0;
}

离开选择器
下方有效

/* Don't do this, please */
input::-webkit-input-placeholder,
input:-moz-placeholder {color: #222;}

正确写法

input::-webkit-input-placeholder {color: #222;}

input:-moz-placeholder {color: #222;}

一些渐进加强：

gap
@media
scrollbar-gutter
minmax()
sticky

Defensive CSS
The Just in Case Mindset in CSS

参考资料