css 禁止換行_CSS 的常用屬性速查表
技術標籤：css 禁止換行css字型顏色漸變css文字換行css背景圖片透明度css超出換行css遮罩層從下往上
CSS 的常用屬性速查表
要想寫出優美的 CSS 作品，想象力固然很重要，然而基礎也是不可忽略的。
- 常用分類：
選擇-定位-佈局-盒模型-字型-背景-動畫-其他
Selectors
Type
元素本身，p
Class
類，p.class
ID
id，p#id
Descendant
後代，ul li
Attribute
屬性，input[type="checkbox"]
Sibling
相鄰元素，input ~ label
Univarsal
全選，*
Pseudo-class
偽類，用於選擇特定狀態下的元素
:hover
滑鼠懸浮狀態
:focus
元素本身獲得焦點
:focus-within
元素本身及子元素獲得焦點
:nth-child
第 n 個子元素
:not
不處於某個狀態
:target
URL 的錨點
:checked
單/複選框開關on的狀態
:disabled
禁用狀態
:valid
校驗通過狀
:invalid
校驗不通過狀態
:placeholder-shown
輸入框有佔位符時的情況(也就是使用者還未輸入時的情況)
:empty
空標籤元素
常用場景：欄位缺失、ajax 載入資料為空
Pseudo-element
偽元素，在原先的元素基礎上插入額外的元素，並且它不充當 HTML 的標籤
::before | ::after
標籤的額外 2 個可繪製的元素
::selection
被使用者選中的部分
::placeholder
輸入框的佔位符文字
Positioning
position
- relative：相對定位，元素佔據文件位置，可以有偏移
- absolute：絕對定位，元素不佔位置，相對於父元素定位
- fixed：固定在視窗某一位置
- sticky：“粘”在視窗某一位置
top | left | bottom | right
上下左右的偏移距離
z-index
層疊關係
Display
display
- block：塊級元素
- inline：內聯元素
- flex：彈性盒子佈局
- grid：網格佈局
- contents：充當遮罩的元素(比如給
img套上a並能使其不影響佈局)
Box Model
拿水果舉例子：果核是content，果肉是padding，果皮是border，外界是margin
width | height
寬高
padding | margin
內外邊距
overflow
- visible：超出部分可見
- hidden：超出部分不可見
- scroll：超出部分以滾動條形式顯示
Fonts
常用簡寫： || [ / ] ||
font-weight
字型粗細
font-size
字型大小
font-family
字型種類
line-height
字型行高
Text
text-align
文字對齊
text-overflow
文字超出部分截斷
常用片段：
.text-clamp{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
複製程式碼
text-shadow
文字陰影
text-transform
文字大小寫
text-decoration
文字裝飾樣式
-webkit-text-stroke
文字描邊
white-space
空格處理
- nowrap：使文字永不換行
- pre：保留空格和換行符，但無法自動換行
- pre-wrap：保留空格和換行符，且可以自動換行
Color
color
文字顏色
opacity
顏色透明度
transparent
透明色
currentColor
當前元素color的值
Backgrounds & Borders
背景常用縮寫： || [/ ]
邊框常用縮寫： || ||
background-color
背景顏色
background-image
背景圖片
background-size
背景大小
background-position
背景定位
background-repeat
背景是否重複
background-clip
背景裁剪
border-width
邊框寬度
border-style
邊框樣式
border-color
邊框顏色
border-radius
邊框圓角
box-shadow
陰影：offset-x | offset-y | blur-radius | spread-radius | color
Images
linear-gradient
線性漸變
常見用途：背景色、模擬光、條紋背景等
radial-gradient
徑向漸變
常見用途：背景色、斑點背景、卡片鏤空、微粒效果等
conic-gradient
圓錐漸變
常見用途：餅圖、各種花紋的實現
object-fit
處理替換元素(如img)的變形問題
Filter
filter
作用於元素本身的濾鏡
常用濾鏡：
- blur：高斯模糊
- contrast：對比度
- drop-shadow：投影，常用於給不規則形狀進行
- greyscale：灰度
- hue-rotate：色調變換
backdrop-filter
作用於元素背景的濾鏡
Blending
mix-blend-mode
常用混合模式
- multiply：正片疊底
- screen：濾色
- difference：插值
SVG
clip-path
裁剪路徑，用來裁剪出各種形狀
mask
蒙版，用於建立鏤空效果
letter-spacing
字母間距
pointer-events
滑鼠事件(通常都設為none，表示消除物件的滑鼠事件)
List
list-style-type
列表的marker樣式(通常都設為none，表示消除列表樣式)
counter-reset
重置某個計數器為某一值
counter-increment
給某個計數器增加特定的值
UI
appearance
元素的預設樣式(通常都設為none，表示消除預設外觀)
box-sizing
盒模型型別
- content-box：預設，標準盒模型
- border-box：IE 盒模型(將
border和·padding一併算作長寬)
cursor
游標型別，最常用的是pointer，也就是一隻手
outline
輪廓
user-select
使用者是否能選擇文字(通常都設為none，表示使用者無法選中此文字)
Scroll
scroll-behavior
- auto：預設滾動行為
- smooth：絲滑滾動行為
scroll-snap-type
定義在滾動容器中的一個臨時點(snap point)如何被嚴格的執行
scroll-snap-align
控制將要聚焦的當前滾動子元素在滾動方向上相對於父容器的對齊方式
-webkit-overflow-scrolling
設定為touch可以恢復移動端的彈性滾動
overscroll-behavior
設定為contain可以禁止連鎖滾動效果
Writing Modes
writing-mode
定義了文字水平或垂直排布以及在塊級元素中文字的行進方向。
這裡我們預設是 ltr 文字(左對齊文字)
- horizontal-tb：從左到右水平流動，是預設值
- vertical-lr：從上到下垂直流動，下一垂直行位於上一行右側
- vertical-rl：從上到下垂直流動，下一垂直行位於上一行左側
Transforms
transform
常見的幾何變換：
translate：平移scale：縮放rotate：旋轉skew：斜切
transform-origin
變換中心
transform-style
- flat：預設
- preserve-3d：3d 場景
perspective
透視距離
backface-visibility
物體後方是否可視
Animation
transition
過渡
transition-property
過渡屬性名
transition-duration
過渡時間
transition-delay
過渡延遲
transition-timing-function
過渡緩動函式，內建：ease、linear、ease-in、ease-out、ease-in-out、steps()
自定義緩動函式：cubic-bezier()
animation
動畫
animation-name
動畫名稱
animation-duration
動畫時間
animation-delay
動畫延遲
animation-timing-function
動畫緩動函式
animation-iteration-count
動畫播放次數
animation-fill-mode
動畫填充模式
animation-play-state
動畫播放狀態
@keyframes
關鍵幀
Motion Path
offset-path
路徑的定義
offset-distance
物件在路徑上的位置
Others
attr()
獲取自定義屬性的值作為content生成的內容
var()
CSS 自定義變數
calc()
計算值
@media
媒體查詢，用於適配不同裝置
-webkit-box-reflect
投影
percentage
一些數值型單位具有百分比寫法，那麼這些百分比相對的物件是什麼呢？有 2 種：父元素和自身。
相對父元素：width、height、top、left、margin、padding
相對自身：translateX、translateY
往期精彩
想知道更多？長按/掃碼關注我吧↓↓↓
喜歡就點個"在看"唄^_^