遵循这种心态至多会缩小您可能遇到的问题。
对于这个组件，题目能够是一个词，也能够是多个词。为防止题目卡在右侧的图标上，最好增加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