遵循这种心态至少会减少您可能遇到的问题。
文章图片
对于这个组件，标题可以是一个词，也可以是多个词。为避免标题卡在右侧的图标上，最好添加margin-right: 1rem，以防标题变长。
文章图片
如果一个按钮与另一个按钮相邻，则为第二个按钮添加一个左边距，以防万一
.button + .button {
margin-left: 1rem;
}
文章图片
第一个解决方案是使用文本截断 & max-width。第二个只使用max-width，但如果标签有很长的文本，它可能会失败。
文章图片
图像默认背景
img {
background-color: #525252;
}【FE.UX-常见CSS边界情况防御处理】
文章图片
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
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少（今天见识到跳槽天花板！！）