要想寫出優美的 css 作品,想象力固然很重要,然而基礎也是不可忽略的。元素本身,
p
類,p.class
id,p#id
後代,ul li
屬性,input[type="checkbox"]
相鄰元素,input ~ label
全選,*
偽類,用於選擇特定狀態下的元素
:hover
滑鼠懸浮狀態
:focus
元素本身獲得焦點
:focus-within
元素本身及子元素獲得焦點
:nth-child
第 n 個子元素
:not
不處於某個狀態
:target
url 的錨點
:checked
單/核取方塊開關on
的狀態
:disabled
禁用狀態
:valid
校驗通過狀
:invalid
校驗不通過狀態
:placeholder-shown
輸入框有佔位符時的情況(也就是使用者還未輸入時的情況)
:empty
空標籤元素
常用場景:字段缺失、ajax 載入資料為空
偽元素,在原先的元素基礎上插入額外的元素,並且它不充當 html 的標籤
::before | ::after
標籤的額外 2 個可繪製的元素
::selection
被使用者選中的部分
::placeholder
輸入框的佔位符文字
上下左右的偏移距離
層疊關係
拿水果舉例子:果核是content
,果肉是padding
,果皮是border
,外界是margin
寬高內外邊距
常用簡寫:|| [ / ] ||
字型粗細
字型大小
字型種類
字型行高
文字對齊
文字超出部分截斷
常用片段:
.text-clamp
複製**
文字陰影
文字大小寫
文字裝飾樣式
文字描邊
空格處理
文字顏色
顏色透明度
透明色當前元素color
的值
背景常用縮寫:|| [/ ]
邊框常用縮寫:|| ||
背景顏色
背景背景大小
背景定位
背景是否重複
背景裁剪
邊框寬度
邊框樣式
邊框顏色
邊框圓角
陰影:offset-x | offset-y | blur-radius | spread-radius | color
線性漸變
常見用途:背景色、模擬光、條紋背景等
徑向漸變
常見用途:背景色、斑點背景、卡片鏤空、微粒效果等
圓錐漸變
常見用途:餅圖、各種花紋的實現
處理替換元素(如img
)的變形問題
作用於元素本身的濾鏡
常用濾鏡:
作用於元素背景的濾鏡
常用混合模式
裁剪路徑,用來裁剪出各種形狀
蒙版,用於建立鏤空效果
字母間距
滑鼠事件(通常都設為none
,表示消除物件的滑鼠事件)
列表的marker
樣式(通常都設為none
,表示消除列表樣式)
重置某個計數器為某一值
給某個計數器增加特定的值
元素的預設樣式(通常都設為none
,表示消除預設外觀)
盒模型型別
游標型別,最常用的是pointer
,也就是乙隻手
輪廓使用者是否能選擇文字(通常都設為none
,表示使用者無法選中此文字)
定義在滾動容器中的乙個臨時點(snap point)如何被嚴格的執行
控制將要聚焦的當前滾動子元素在滾動方向上相對于父容器的對齊方式
設定為touch
可以恢復移動端的彈性滾動
設定為contain
可以禁止連鎖滾動效果
定義了文字水平或垂直排布以及在塊級元素中文字的行進方向。
這裡我們預設是 ltr 文字(左對齊文字)
常見的幾何變換:
變換中心
透視距離
物體後方是否可視
過渡過渡屬性名
過渡時間
過渡延遲
過渡緩動函式,內建:ease
、linear
、ease-in
、ease-out
、ease-in-out
、steps()
自定義緩動函式:cubic-bezier()
動畫動畫名稱
動畫時間
動畫延遲
動畫緩動函式
動畫填充模式
關鍵幀路徑的定義
物件在路徑上的位置
獲取自定義屬性的值作為content
生成的內容
css 自定義變數
計算值**查詢,用於適配不同裝置
投影一些數值型單位具有百分比寫法,那麼這些百分比相對的物件是什麼呢?有 2 種:父元素和自身。
相對父元素:width
、height
、top
、left
、margin
、padding
相對自身:translatex
、translatey
喜歡就點個"在看"唄^_^
css 平移到某個位置 CSS知識總結
本週學習了css布局 定位 動畫,方老師解答了很多之前學習中遇到的疑惑,點撥了css學習方法和思路,受益匪淺!根據html構建html樹 dom 根據css構建css樹 cssom 將兩棵樹合併形成渲染樹 render tree layout布局 文件流 盒模型 計算大小和位置 paint繪製 繪製...
css 平移到某個位置 CSS3平移動畫效果
在這篇文章中主要是講如何通過css3實現平移動畫效果,在開始之前先給大家介紹一下與平移動畫有關的css3屬性以及相關的屬性描述。一 transition property 是用來指定當元素其中乙個屬性改變時執行transition效果 例如 長度,寬度,顏色等 二 transition durati...
C 定位Word文件中的某個位置插入文字
利用書籤定位到word文件的指定位置 三種方法 首先在word文件中,設定書籤,並命名 假設建了乙個名為 bm test 的書籤 然後使用c 操作word using msword microsoft.office.interop.word object bk bm test 方法二 使用word文...