CSS 屬性辭典 154 條
每個屬性做什麼、常用的值有哪些、會不會傳給子元素，一行說清。
版面11
決定元素當作哪種盒子處理、內容溢出時怎麼辦的一類屬性。
display決定元素當作哪種盒子來處理。任何版面都從這個屬性開始。visibility顯示或隱藏。用 hidden 藏起來後，位置照樣占著。float讓元素浮到一側，文字從旁邊繞過去。如今這活兒由 flex 和 grid 接手。clear把元素擠到前面所有浮動元素的下方。overflow決定溢出的內容是裁掉還是可以捲動。overflow-x只管左右方向溢出時怎麼辦。overflow-y只管上下方向溢出時怎麼辦。box-sizing決定寬高算不算進內距和邊框。border-box 最省心。aspect-ratio把寬高鎖成固定比例，只給一邊也能自動算出另一邊。container-type把元素立成容器查詢的基準，讓子元素按容器寬度而非視窗寬度變化。isolation新建一個堆疊脈絡，把混合模式擋在裡面不外溢。
彈性與格線24
把元素排成行、擺進格子的一類屬性。今天的版面大半靠這兩套。
flex-direction決定彈性子項排成橫排還是直排。flex-wrap放不下的時候，是換行還是硬擠在一行裡。flex一次寫完伸、縮、基準三個值。flex: 1 就是平分剩餘空間。flex-grow剩餘空間按什麼比例分給這一項。flex-shrink空間不夠時，這一項按什麼比例被壓縮。flex-basis伸縮之前，這一項的起始尺寸。justify-content沿主軸方向把子項對齊或分散。align-items沿交叉軸方向把子項對齊。align-self單獨給某一項改掉交叉軸的對齊方式。align-content換行之後，行與行之間怎麼分布。gap子項之間留出的空隙，不影響外側邊緣。row-gap只設行與行之間的空隙。column-gap只設欄與欄之間的空隙。order不動 HTML 順序，只改視覺上的先後。改多了會讓螢幕閱讀器錯亂。grid-template-columns定義格線有幾欄、每欄多寬。grid-template-rows定義格線有幾列、每列多高。grid-template-areas用名字畫出版面草圖，再讓各元素認領自己的區域。grid-column這個元素從第幾條直線跨到第幾條。grid-row這個元素從第幾條橫線跨到第幾條。grid-auto-flow沒明確擺放的元素，自動往哪個方向填。grid-auto-rows自動產生的那些列有多高。place-items一行寫完兩個方向上子項的對齊。place-content一行寫完兩個方向上整塊內容的分布。justify-items沿行內方向，把每個子項在自己的格子裡對齊。
盒子與間距16
尺寸和間距。外距上下會合併，內距上會鋪背景色。
width元素的寬度。百分比是相對父元素算的。height元素的高度。百分比要父元素有明確高度才生效。min-width寬度的下限，不會比這個值更窄。max-width不會比這個更寬。正文限寬常用它。min-height高度的下限，不會比這個值更矮。max-height不會比這個更高，超出的部分交給 overflow。margin盒子外面的空白。上下兩邊的外距會合併成一個。margin-top盒子上方的外距。margin-right右側的外距。設成 auto 會把盒子推向左邊。margin-bottom盒子下方的外距。margin-left左側的外距。左右都設 auto 就置中了。padding盒子裡面的空白，撐在邊框和內容之間。padding-top邊框和內容之間，上方的空白。padding-right邊框和內容之間，右側的空白。padding-bottom邊框和內容之間，下方的空白。padding-left邊框和內容之間，左側的空白。
文字25
字型、行高、對齊這些決定讀起來什麼樣的屬性。大多會傳給子元素。
font-size文字大小。rem 跟著根元素走，em 跟著父元素走。font-family用哪套字型。按順序往後找，直到找到裝了的那一款。font-weight筆畫的粗細。400 是一般，700 是粗體。font-style要不要斜體。italic 用專門的斜體字，oblique 只是把字壓斜。font一行寫完字型的幾個屬性。沒寫到的會被悄悄重設。line-height行與行之間的高度。不帶單位的數值最好使。letter-spacing字與字之間的間距。標題收緊一點常更好看。word-spacing詞與詞之間的間距。text-align文字在行內往哪邊靠。text-decoration底線、刪除線這些，一行寫完。text-decoration-line只決定畫哪種線：底線、頂線還是刪除線。text-decoration-color只決定那條線的顏色。text-decoration-style那條線是實線、虛線還是波浪線。text-transform把字自動變成全大寫或全小寫，原文不動。text-indent段落第一行縮排多少。text-overflow放不下的文字怎麼收尾，ellipsis 會補上刪節號。text-shadow給文字加陰影。圖片上的字靠它拉開對比。white-space空格和換行是保留還是合併。word-break長單字要不要在中間硬斷開。overflow-wrap一個詞長到撐破容器時，允許在詞內換行。writing-mode文字橫著排還是直著排。vertical-align行內元素在這一行裡上下怎麼對齊。font-variant-numeric數字要不要等寬。表格裡的數字對齊靠它。hyphens換行時允不允許自動加連字號。text-wrap決定換行怎麼斷。balance 會把標題各行長度拉勻。
顏色與背景13
文字色、背景色、漸層和透明度。
color文字的顏色。邊框和某些線條預設也跟著它。background-color背景填哪種顏色，鋪在背景圖的下面。background-image背景鋪的圖片或漸層。可以疊好幾層。background-size背景圖鋪多大。cover 鋪滿，contain 全露。background-position背景圖擺在哪個位置。background-repeat背景圖重不重複鋪。background-attachment捲動時背景跟著走還是釘住不動。background一行寫完背景的所有屬性。沒寫到的會被重設。background-clip背景鋪到哪一層為止。配 text 可以做出漸層字。opacity整體的不透明度，子元素也一起變淡。mix-blend-mode這一層和下面那層用什麼方式混色。accent-color核取方塊、選項按鈕這些原生控制項的主色。color-scheme告訴瀏覽器本頁支援淺色還是深色，原生控制項會照著變。
邊框13
邊框、圓角和陰影。outline 不占位置。
border一行寫完邊框的粗細、線型和顏色。border-width只設邊框的粗細，不動線型和顏色。border-style只設邊框的線型。不寫這個，邊框根本不顯示。border-color只設邊框的顏色，不寫就跟著文字色走。border-top只設上邊框，其餘三邊不動。border-bottom只設下邊框。清單列之間的分隔線常用它。border-radius把四角削圓。50% 變圓形，給個很大的值就成了膠囊形。outline畫在邊框外側的線。它不占位置，所以鍵盤焦點框用它。outline-width只設那條線的粗細。outline-style只設那條線的線型。outline-color只設那條線的顏色。outline-offset那條線離邊框有多遠。box-shadow給盒子加陰影。寫 inset 就變成內陰影。
效果7
模糊、裁切、遮罩這類畫完之後再加上去的效果。
變形與動效14
位移、旋轉和平滑過渡。不動版面，所以畫面不容易抖。
transform位移、旋轉、縮放、傾斜。不觸發重排，所以很快。transform-origin變形以哪個點為中心。transition值變化時讓它平滑過渡而不是一下跳過去。transition-property只對哪些屬性做過渡。transition-delay隔多久再開始過渡。transition-duration過渡持續多長時間。transition-timing-function過渡的快慢曲線。開頭快結尾慢最自然。animation一行寫完動畫的名字、時長、次數這些。animation-name要播哪個 @keyframes。animation-timing-function動畫在一輪之內的快慢曲線。animation-duration動畫播一輪要多久。animation-iteration-count動畫重複幾次。infinite 就是一直播。will-change提前告訴瀏覽器哪裡會變，好讓它準備。濫用反而更慢。perspective3D 變形時，觀察者離畫面多遠。值越小透視越誇張。
定位7
把元素從文件流裡拎出來放到指定位置。前後順序由 z-index 定。
表格4
管表格邊框和欄寬的一類屬性。
清單4
決定清單標記的樣子和位置。
互動9
決定怎麼回應滑鼠、手指和捲動。
列印與其他7
列印和自動編號這些剩下的用途。
怎麼看這一頁
- 會繼承的屬性，在父元素上寫一次，所有子元素都跟著用。和文字有關的屬性大多如此。
- 簡寫屬性會把你沒寫到的值悄悄退回預設值。只寫 background: red，先前設的背景圖也一併沒了。
- 同一個元素上規則撞車時，選擇器越具體的贏。只有具體度一樣時，才輪到寫在後面的贏。
- 做動效盡量用 transform 和 opacity，會順滑得多。改 width 或 top 得重新算一遍版面。
常見問題
Q. CSS 屬性一共有多少個？
光是寫進標準的就有五百多個，但真正常動手的只是其中一部分。這裡按用途收了做頁面時會反覆用到的 154 個。
Q. 「繼承」是什麼意思？
意思是寫在父元素上，子元素不用另寫也照著用。字型、文字色、行高這些和文字有關的屬性大多會繼承；間距和邊框則不會。
Q. 用簡寫屬性有什麼不一樣？
一行能設好幾個值，但沒寫到的那些會退回預設值。只寫 background: red，先前設的背景圖就跟著沒了，原因就在這裡。
Q. 同一個屬性寫了兩遍，哪個贏？
先比選擇器有多具體：id 強過 class，class 強過標籤。具體度一樣時，才輪到寫在後面的贏。!important 能掀翻這套規則，但最好別用。
Q. px 和 rem 該用哪個？
rem 是根字級的倍數，使用者在瀏覽器裡把字調大，它會跟著變大。文字和間距用 rem 更穩妥；像細邊框這種必須始終一樣的值，px 更合適。