CSS屬性速查表

前面的話

  本文將按照布局類屬性、盒模型屬性、文本類屬性、修飾類屬性這四個分類,對CSS常用屬性進行重新排列,并最終設置為一份stylelintrc文件

?

布局類

  1、定位

position
z-index
top
bottom
left
right

  2、浮動

float
clear

  3、多列布局

columns
columns-width
columns-count
column-rule
column-fill
column-span
column-gap

  4、柵格布局

// 顯示網格
display
grid
grid-template-rows
grid-template-columns
grid-column-gap
grid-row-gap
grid-gap
// 網格線
grid-row-start
grid-row-end
grid-row
grid-column-start
grid-column-end
grid-column
grid-area
// 隱式網格
grid-auto-rows
grid-auto-columns
grid-auto-flow
grid-template-rows
grid-template-columns
grid-template-areas
grid-template
//對齊
justify-items
justify-self
align-items
align-self
align-content

?

盒模型

  1、彈性盒模型

// 彈性容器
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
// 彈性項目 flex flex-basis flex-grow flex-shrink align-self order

  2、表格模型

table-layout
empty-cells
caption-side
border-collapse
border-spacing

  3、列表模型

list-style

  4、盒子尺寸

box-sizing
display
width
height
padding
margin
border
border-radius
outline

  5、盒子顯示

overflow
clip
resize
visibility

?

文本類

  1、文本樣式

font
line-height
text-align
vertical-allign text
-indent text-transform text-overflow text-decoration text-shadow
text-justify
text-emphasis white
-space letter-spacing word-spacing word-wrap word-break

  2、排版模式

writing-mode
text-combine-upright
unicode-bidi
text-orientation
direction

?

修飾類

  1、顏色

color
background
isolation
clip-path
mask
filter
box-shadow
opacity
cursor

  2、變形

transform
transform-style
transform-origin
perspective
perspective-origin
backface-visibility

  3、動畫

transition
animation
will-change

?

stylelint

{
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-order"
],
"rules": {
"order/order": [
"declarations",
"custom-properties",
"dollar-variables",
"rules",
"at-rules"
],
"order/properties-order": [
"position",
"z-index",      
"top",
"bottom",      
"left",
"right",
"float",
"clear",
"columns",
"columns-width",
"columns-count",
"column-rule",
"column-rule-width",
"column-rule-style",
"column-rule-color",
"column-fill",
"column-span",
"column-gap",      
"display",
"grid",
"grid-template-rows",
"grid-template-columns",
"grid-template-areas",
"grid-auto-rows",
"grid-auto-columns",
"grid-auto-flow",
"grid-column-gap",
"grid-row-gap",
"grid-template",
"grid-template-rows",
"grid-template-columns",
"grid-template-areas",
"grid-gap",
"grid-row-gap",
"grid-column-gap",
"grid-area",
"grid-row-start",
"grid-row-end",
"grid-column-start",
"grid-column-end",
"grid-column",
"grid-column-start",
"grid-column-end",
"grid-row",
"grid-row-start",
"grid-row-end",      
"flex",
"flex-grow",
"flex-shrink",
"flex-basis",
"flex-flow",
"flex-direction",
"flex-wrap",
"justify-content",
"align-content",
"align-items",
"align-self",
"order",
"table-layout",
"empty-cells",
"caption-side",
"border-collapse",
"border-spacing",
"list-style",
"list-style-type",
"list-style-position",
"list-style-image",
"ruby-align",
"ruby-merge",
"ruby-position",
"box-sizing",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",      
"border",
"border-width",
"border-top-width",
"border-right-width",
"border-bottom-width",
"border-left-width",
"border-style",
"border-top-style",
"border-right-style",
"border-bottom-style",
"border-left-style",
"border-color",
"border-top-color",
"border-right-color",
"border-bottom-color",
"border-left-color",
"border-image",
"border-image-source",
"border-image-slice",
"border-image-width",
"border-image-outset",
"border-image-repeat",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-top",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"border-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius",
"border-top-left-radius",
"outline",
"outline-width",
"outline-color",
"outline-style",
"outline-offset",
"overflow",
"overflow-x",
"overflow-y",
"resize",
"visibility",
"font",
"font-style",
"font-variant",
"font-weight",
"font-stretch",
"font-size",
"font-family",
"font-synthesis",
"font-size-adjust",
"font-kerning",        
"line-height",
"text-align",
"text-align-last",
"vertical-align",      
"text-overflow",
"text-justify",
"text-transform",
"text-indent",
"text-emphasis",
"text-emphasis-style",
"text-emphasis-color",
"text-emphasis-position",
"text-decoration",
"text-decoration-color",
"text-decoration-style",
"text-decoration-line",
"text-underline-position",
"text-shadow",      
"white-space",
"overflow-wrap",
"word-wrap",
"word-break",
"line-break",
"hyphens",
"letter-spacing",
"word-spacing",
"quotes",
"tab-size",
"orphans",
"writing-mode",
"text-combine-upright",
"unicode-bidi",
"text-orientation",
"direction",
"text-rendering",
"font-feature-settings",
"font-language-override",
"image-rendering",
"image-orientation",
"image-resolution",
"shape-image-threshold",
"shape-outside",
"shape-margin",
"color",
"background",
"background-image",
"background-position",
"background-size",
"background-repeat",
"background-origin",
"background-clip",
"background-attachment",
"background-color",
"background-blend-mode",
"isolation",
"clip-path",
"mask",
"mask-image",
"mask-mode",
"mask-position",
"mask-size",
"mask-repeat",
"mask-origin",
"mask-clip",
"mask-composite",
"mask-type",
"filter",
"box-shadow",
"opacity",
"transform-style",
"transform",
"transform-box",
"transform-origin",
"perspective",
"perspective-origin",
"backface-visibility",
"transition",
"transition-property",
"transition-duration",
"transition-timing-function",
"transition-delay",
"animation",
"animation-name",
"animation-duration",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"animation-fill-mode",
"animation-play-state",
"scroll-behavior",
"scroll-snap-type",
"scroll-snap-destination",
"scroll-snap-coordinate",
"cursor",
"touch-action",
"caret-color",
"ime-mode",
"object-fit",
"object-position",
"content",
"counter-reset",
"counter-increment",
"will-change",
"pointer-events",
"all",
"page-break-before",
"page-break-after",
"page-break-inside",
"widows"
],
}
}

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370107.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370107.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370107.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

我應該使用32位還是64位JVM?

這是我在企業軟件開發生涯中多次遇到的問題。 我不得不每隔一段時間就提供有關配置特定新環境的建議。 而且,很多時候,手頭的問題與“我應該使用32位或64位JVM”有關。 老實說,一開始我只是擲硬幣。 而不是給出合理的答案。 (對不…

python安裝pyecharts清華_基于Python安裝pyecharts所遇的問題及解決方法

最近學習到數據可視化內容,老師推薦安裝pyecharts,于是pip install 了一下,結果...掉坑了,下面是我的跳坑經驗,如果你有類似問題,希望對你有所幫助。第一個坑:這個不難理解,缺少pyecharts-jupyt…

C語言內存分配

C語言內存分配 C語言的內存分配主要有5個區域: 1、棧區:在運行函數時,函數內的局部變量(不包含static變量)、函數返回值的存儲單元在棧區上創建。函數運行結束時這些存儲單元自己主動被釋放。棧區內存分配運算內置于處…

在Ajax方式產生的浮動框中,點擊選項包含某個關鍵字的選項

#!usr/bin/env python #-*- coding:utf-8 -*- """ author: sleeping_cat Contact : zwy24zwy163.com """ #在Ajax方式產生的浮動框中,點擊選項包含某個關鍵字的選項 #通過模擬鍵盤下箭頭進行選擇懸浮框選項from selenium imp…

android studio點擊圖片,如何在Android Studio中的模擬器圖庫中添加圖像?

如何在Android Studio中的模擬器圖庫中添加圖像?我正在開發圖像過濾器應用程序。 但是,如果我沒有任何圖像,就無法真正嘗試。我知道我可以在電話中對其進行測試,但這并不相同,因為我需要錯誤消息和其他內容。我只想從A…

移動端學習目錄

前面的話 iphone4發布是幾年前的事情,而如今早已是移動互聯網的時代。人們不再正襟危坐在電腦前,而更愿意把時間耗費在手機上,隨時隨地地享受互聯網。在移動端可以使用最新最炫的前端技術,而不用再考慮老版本IE的兼容性。當前&…

實踐中的構建者模式

我將不深入討論該模式,因為已經有大量的帖子和書籍對此進行了詳細的解釋。 相反,我將告訴您為什么以及何時應該考慮使用它。 但是,值得一提的是,這種模式與《 四人幫》一書中介紹的模式有些不同。 雖然原始模式著重于抽象化構造步…

python計算汽車的平均油耗_用python對汽車油耗進行數據分析

原標題:用python對汽車油耗進行數據分析- 從http://fueleconomy.gov/geg/epadata/vehicles.csv.zip下載汽車油耗數據集并解壓- 進入jupyter notebook(ipython notebook)并新建一個New Notebook- 輸入命令[python]view plaincopyimportpandas as pdimportnumpy as np…

git常用命令2

##一、git常用命令 ###1、 push文件 * 打開cmd窗口 * 輸入f:,進入f:(自己隨便在自己的電腦上找個位置就行了,這里的f:,表示的是f盤) * 然后輸入mkdir workSpace,會自動在f盤下生成一個workSpace文件夾 * 然…

android移動應用基礎教程源代碼,Android移動應用基礎教程 【程序活動單元Activity】...

本章目錄一、Activity的生命周期1、生命周期狀態2 、生命周期方法3、橫豎屏切換時的生命周期二、Activity的創建配置和關閉1、Activity的創建2、配置Activity3、開啟和關閉Activity三、Intent與IntentFilter1、Intent介紹1.1 意圖的概念1.2 顯式意圖1.3 隱式意圖2、IntentFilte…

elasticsearch中cluster和transport知識

elasticsearch cluster 概述 elasticsearch節點間通信的基礎transport轉載于:https://www.cnblogs.com/wzj4858/p/8126033.html

Python中使用subplot在一張畫布上顯示多張圖

subplot(arg1, arg2, arg3) arg1: 在垂直方向同時畫幾張圖arg2: 在水平方向同時畫幾張圖arg3: 當前命令修改的是第幾張圖 t np.arange(0,5,0.1) y1 np.sin(2*np.pi*t) y2 np.sin(2*np.pi*t) plt.subplot(211) plt.plot(t,y1,b-.) plt.subplot(212) plt.plot(t,y2,r--) plt.s…

Java 8:從PermGen到元空間

您可能已經知道,現在可以下載JDK 8 Early Access 。 這使Java開發人員可以嘗試Java 8的一些新語言和運行時功能。這些功能之一是完全刪除自Oracle自JDK 7發行以來就宣布的Permanent Generation(PermGen)空間。例如,自JDK 7起&…

oracle symonym_ORACLE SYNONYM詳解

以下內容整理自Oracle 官方文檔一 概念A synonym is an alias for any table, view,materialized view, sequence, procedure, function, package, type, Java classschema object, user-defined object type, or another synonym. Because a synonymis simply an alias, it re…

瀏覽器緩存問題原理以及解決方案

瀏覽器緩存問題: 簡單來說,瀏覽器緩存就是把一個已經請求過的Web資源(如html頁面,圖片,js,數據等)拷貝一份副本儲存在瀏覽器中。緩存會根據進來的請求保存輸出內容的副本。當下一個請求來到的時…

Scikit-Learn機器學習入門

現在最常用的數據分析的編程語言為R和Python。每種語言都有自己的特點,Python因為Scikit-Learn庫贏得了優勢。Scikit-Learn有完整的文檔,并實現很多機器學習算法,而每種算法使用的接口幾乎相同,可以非常快的測試其它學習算法。 Pa…

hdu1542 Atlantis(掃描線+線段樹+離散)矩形相交面積

題目鏈接&#xff1a;點擊打開鏈接 題目描寫敘述&#xff1a;給定一些矩形&#xff0c;求這些矩形的總面積。假設有重疊。僅僅算一次 解題思路&#xff1a;掃描線線段樹離散&#xff08;代碼從上往下掃描&#xff09; 代碼&#xff1a; #include<cstdio> #include <al…

瀏覽器滾動條 --- 自定義“衣裳”

由于種種原因&#xff0c;瀏覽器的默認滾動條“衣裳”實在是 (ˉ▽&#xffe3;&#xff5e;)~~&#xff0c;為了“美”&#xff0c;本人結合萬維網各大神給的經驗和自己的實踐&#xff0c;做了此篇總結。若有錯誤&#xff0c;請在評論里給出&#xff0c;我會及時更改。 我在電…

電腦調分辨率黑屏了怎么辦_調顯示器分辨率黑屏怎么辦

調顯示器分辨率黑屏怎么辦調顯示器分辨率黑屏解決方法&#xff1a;1&#xff0c;開機&#xff0c;當快要進入系統選項時&#xff0c;立即按f8鍵進入“高級模式”&#xff0c;因為系統選項界面顯示的時間非常短&#xff0c;可以提早按f8鍵&#xff0c;否則錯過時機就得重來。2&a…

什么是JNDI,SPI,CCI,LDAP和JCA?

JNDI代表Java命名和目錄接口 。 它是用于提供對目錄服務&#xff08;即帶有對象的服務映射名稱&#xff08;字符串&#xff09;&#xff0c;對遠程對象或簡單數據的引用&#xff09;的訪問的API。 這就是所謂的 約束力 。 綁定集稱為上下文 。 應用程序使用JNDI接口訪問資源。…