遵循這種心態至少會減少您可能遇到的問題。
對於這個元件，標題可以是一個詞，也可以是多個詞。為避免標題卡在右側的圖示上，最好新增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