如題，所以開一篇來做彙整，要查的時候比較方便。
文字相關
white-space 決定「空白」跟「換行」的樣式。
1
2
3
4
5
6
7
8
9
10
11
12
| .box {
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-line;
white-space: pre-wrap;
}
|
word-spacing 設定「單字（空格）」之間的間隔：
1
2
3
4
5
6
| .box {
word-spacing: normal;
word-spacing: 1em;
}
|
letter-spacing 設定「每一個字」的間隔：
1
2
3
4
5
| .box {
letter-spacing: normal;
letter-spacing: 1px;
}
|
word-break 設定文字的換行規則。
詳細介紹可以參考：CSS 之我的文字太長啦
1
2
3
4
5
6
7
8
| .box {
word-break: normal;
word-break: break-all;
word-break: break-word;
}
|
text-shadow 設定文字的陰影
1
2
3
4
5
6
| .text {
text-shadow: 1px 1px 2px black;
text-shadow: 1px 1px 2px black 2px 2px 2px pink;
}
|
排版相關
box-sizing 設定盒子的計算方式
詳細介紹可以參考：CSS 盒模型（box-model）
1
2
3
4
5
6
| .box {
box-sizing: content-box;
box-sizing: border-box;
}
|
overflow 設定該怎麼處理溢出內容
1
2
3
4
5
6
7
8
9
10
| .box {
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
}
|
max-content 讓 width 依照內容來調整
1
2
3
| <div>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
| div {
width: 100px;
height: 50px;
padding: 10px;
border: 1px solid #000;
}
h1 {
font-size: 1em;
background-color: antiquewhite;
width: max-content;
}
|
傳統用 nowrap 的情況，內容寬度是參考容器：
1
2
3
4
5
6
| h1 {
font-size: 1em;
background-color: antiquewhite;
white-space: nowrap;
}
|
max(base ,minimum) 用來設定最小寬度，可以想成是語法糖。
1
2
3
4
5
|
.box {
width: 50%;
min-width: 100px;
}
|
利用 max() 寫成一行：
1
2
3
4
|
.box {
width: max(50%, 100px);
}
|
這兩個結果會是一模一樣的。
min(base ,maximum) 用來設定最大寬度，一樣想成是語法糖。
1
2
3
4
5
|
.container {
width: 90%;
max-width: 1280px;
}
|
利用 min() 寫成一行：
1
2
3
4
|
.container {
width: min(90%, 1280px);
}
|
其他
overscroll-behavior 用來阻止滾軸的傳遞行為
預設是 auto，當子元素滾到邊界時，會傳遞給父元素：
1
2
3
| .modal__inner {
overscroll-behavior: auto
}
|
設定成 contain 後就不會傳遞了：
1
2
3
| .modal__inner {
overscroll-behavior: contain
}
|
scrollbar-gutter 自動預留滾軸空間
備註：要設定這個屬性的元素 overflow 必須是 visible 以外的值才有效，另外 <body> 沒辦法用。
1
2
3
4
5
| .container {
scrollbar-gutter: auto
scrollbar-gutter: stable
scrollbar-gutter: stable both-edges
}
|
預設是 auto，當滾軸出現的時候容易跑版：
stable 會在右邊預留空間（自動加上一段 padding）
stable 會在左右邊都預留空間（自動加上一段 padding）
scroll-snap-type 和 scroll-snap-align
簡單來說想成是一種排版用的盒子（像 Flex 或 Grid）：
scroll-snap-type 用來設定容器scroll-snap-align 用來設定子元素。
這個屬性能做出這樣的效果：
設定方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .container {
scroll-snap-type: x mandatory;
scroll-snap-type: x proximity;
scroll-snap-type: both mandatory ;
}
.item {
scroll-snap-align: start;
scroll-snap-align: end;
scroll-snap-align: center;
}
|
start：
end：
center：
mandatory 與 proximity 的差別參考下圖。
mandatory：
proximity：
pointer-events 設定鼠標事件，可以做出讓上面那層碰不到，只能碰到下面的。
備註：因為這個屬性會繼承，所以下面的記得要在設定一次。
以下把 <a> 的鼠標事件停用，所以只有 <span> 上的 :hover 會被觸發：
1
2
3
| <a href="#">
<span>enable-event</span>
</a>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| a {
pointer-events: none;
display: inline-block;
text-decoration: none;
width: 100px;
height: 100px;
background-color: rgba(0,0,0,0.5);
text-align: center;
}
a:hover span {
color: red;
}
span {
pointer-events: all;
line-height: 100px;
color: white;
}
span:hover {
color: red;
}
|
Output：
