资讯专栏INFORMATION COLUMN

CSS属性速查表

thursday / 974人阅读

摘要:前面的话本文将按照布局类属性盒模型属性文本类属性修饰类属性这四个分类,对常用属性进行重新排列,并最终设置为一份文件布局类定位浮动多列布局栅格布局显示网格网格线隐式网格

前面的话

  本文将按照布局类属性、盒模型属性、文本类属性、修饰类属性这四个分类,对CSS常用属性进行重新排列,并最终设置为一份stylelintrc文件

 

布局类

  1、定位

</>复制代码

  1. position
  2. z-index
  3. top
  4. bottom
  5. left
  6. right

  2、浮动

</>复制代码

  1. float
  2. clear

  3、多列布局

</>复制代码

  1. columns
  2. columns-width
  3. columns-count
  4. column-rule
  5. column-fill
  6. column-span
  7. column-gap

  4、栅格布局

</>复制代码

  1. // 显示网格
  2. display
  3. grid
  4. grid-template-rows
  5. grid-template-columns
  6. grid-column-gap
  7. grid-row-gap
  8. grid-gap
  9. // 网格线
  10. grid-row-start
  11. grid-row-end
  12. grid-row
  13. grid-column-start
  14. grid-column-end
  15. grid-column
  16. grid-area
  17. // 隐式网格
  18. grid-auto-rows
  19. grid-auto-columns
  20. grid-auto-flow
  21. grid-template-rows
  22. grid-template-columns
  23. grid-template-areas
  24. grid-template
  25. //对齐
  26. justify-items
  27. justify-self
  28. align-items
  29. align-self
  30. align-content

 

盒模型

  1、弹性盒模型

</>复制代码

  1. // 弹性容器
  2. display
  3. flex-direction
  4. flex-wrap
  5. flex-flow
  6. justify-content
  7. align-items
  8. align-content
  9. // 弹性项目
  10. flex
  11. flex-basis
  12. flex-grow
  13. flex-shrink
  14. align-self
  15. order

  2、表格模型

</>复制代码

  1. table-layout
  2. empty-cells
  3. caption-side
  4. border-collapse
  5. border-spacing

  3、列表模型

</>复制代码

  1. list-style

  4、盒子尺寸

</>复制代码

  1. box-sizing
  2. display
  3. width
  4. height
  5. padding
  6. margin
  7. border
  8. border-radius
  9. outline

  5、盒子显示

</>复制代码

  1. overflow
  2. clip
  3. resize
  4. visibility

 

文本类

  1、文本样式

</>复制代码

  1. font
  2. line-height
  3. text-align
    vertical-allign
  4. text-indent
  5. text-transform
  6. text-overflow
  7. text-decoration
  8. text-shadow
    text-justify
    text-emphasis
  9. white-space
  10. letter-spacing
  11. word-spacing
  12. word-wrap
  13. word-break

  2、排版模式

</>复制代码

  1. writing-mode
  2. text-combine-upright
  3. unicode-bidi
  4. text-orientation
  5. direction

 

修饰类

  1、颜色

</>复制代码

  1. color
  2. background
  3. isolation
  4. clip-path
  5. mask
  6. filter
  7. box-shadow
  8. opacity
    cursor

  2、变形

</>复制代码

  1. transform
  2. transform-style
  3. transform-origin
  4. perspective
  5. perspective-origin
  6. backface-visibility

  3、动画

</>复制代码

  1. transition
  2. animation
    will-change

 

stylelint

</>复制代码

  1. {
  2. "extends": "stylelint-config-standard",
  3. "plugins": [
  4. "stylelint-order"
  5. ],
  6. "rules": {
  7. "order/order": [
  8. "declarations",
  9. "custom-properties",
  10. "dollar-variables",
  11. "rules",
  12. "at-rules"
  13. ],
  14. "order/properties-order": [
  15. "position",
  16. "z-index",
  17. "top",
  18. "bottom",
  19. "left",
  20. "right",
  21. "float",
  22. "clear",
  23. "columns",
  24. "columns-width",
  25. "columns-count",
  26. "column-rule",
  27. "column-rule-width",
  28. "column-rule-style",
  29. "column-rule-color",
  30. "column-fill",
  31. "column-span",
  32. "column-gap",
  33. "display",
  34. "grid",
  35. "grid-template-rows",
  36. "grid-template-columns",
  37. "grid-template-areas",
  38. "grid-auto-rows",
  39. "grid-auto-columns",
  40. "grid-auto-flow",
  41. "grid-column-gap",
  42. "grid-row-gap",
  43. "grid-template",
  44. "grid-template-rows",
  45. "grid-template-columns",
  46. "grid-template-areas",
  47. "grid-gap",
  48. "grid-row-gap",
  49. "grid-column-gap",
  50. "grid-area",
  51. "grid-row-start",
  52. "grid-row-end",
  53. "grid-column-start",
  54. "grid-column-end",
  55. "grid-column",
  56. "grid-column-start",
  57. "grid-column-end",
  58. "grid-row",
  59. "grid-row-start",
  60. "grid-row-end",
  61. "flex",
  62. "flex-grow",
  63. "flex-shrink",
  64. "flex-basis",
  65. "flex-flow",
  66. "flex-direction",
  67. "flex-wrap",
  68. "justify-content",
  69. "align-content",
  70. "align-items",
  71. "align-self",
  72. "order",
  73. "table-layout",
  74. "empty-cells",
  75. "caption-side",
  76. "border-collapse",
  77. "border-spacing",
  78. "list-style",
  79. "list-style-type",
  80. "list-style-position",
  81. "list-style-image",
  82. "ruby-align",
  83. "ruby-merge",
  84. "ruby-position",
  85. "box-sizing",
  86. "width",
  87. "min-width",
  88. "max-width",
  89. "height",
  90. "min-height",
  91. "max-height",
  92. "padding",
  93. "padding-top",
  94. "padding-right",
  95. "padding-bottom",
  96. "padding-left",
  97. "margin",
  98. "margin-top",
  99. "margin-right",
  100. "margin-bottom",
  101. "margin-left",
  102. "border",
  103. "border-width",
  104. "border-top-width",
  105. "border-right-width",
  106. "border-bottom-width",
  107. "border-left-width",
  108. "border-style",
  109. "border-top-style",
  110. "border-right-style",
  111. "border-bottom-style",
  112. "border-left-style",
  113. "border-color",
  114. "border-top-color",
  115. "border-right-color",
  116. "border-bottom-color",
  117. "border-left-color",
  118. "border-image",
  119. "border-image-source",
  120. "border-image-slice",
  121. "border-image-width",
  122. "border-image-outset",
  123. "border-image-repeat",
  124. "border-top",
  125. "border-top-width",
  126. "border-top-style",
  127. "border-top-color",
  128. "border-top",
  129. "border-right-width",
  130. "border-right-style",
  131. "border-right-color",
  132. "border-bottom",
  133. "border-bottom-width",
  134. "border-bottom-style",
  135. "border-bottom-color",
  136. "border-left",
  137. "border-left-width",
  138. "border-left-style",
  139. "border-left-color",
  140. "border-radius",
  141. "border-top-right-radius",
  142. "border-bottom-right-radius",
  143. "border-bottom-left-radius",
  144. "border-top-left-radius",
  145. "outline",
  146. "outline-width",
  147. "outline-color",
  148. "outline-style",
  149. "outline-offset",
  150. "overflow",
  151. "overflow-x",
  152. "overflow-y",
  153. "resize",
  154. "visibility",
  155. "font",
  156. "font-style",
  157. "font-variant",
  158. "font-weight",
  159. "font-stretch",
  160. "font-size",
  161. "font-family",
  162. "font-synthesis",
  163. "font-size-adjust",
  164. "font-kerning",
  165. "line-height",
  166. "text-align",
  167. "text-align-last",
  168. "vertical-align",
  169. "text-overflow",
  170. "text-justify",
  171. "text-transform",
  172. "text-indent",
  173. "text-emphasis",
  174. "text-emphasis-style",
  175. "text-emphasis-color",
  176. "text-emphasis-position",
  177. "text-decoration",
  178. "text-decoration-color",
  179. "text-decoration-style",
  180. "text-decoration-line",
  181. "text-underline-position",
  182. "text-shadow",
  183. "white-space",
  184. "overflow-wrap",
  185. "word-wrap",
  186. "word-break",
  187. "line-break",
  188. "hyphens",
  189. "letter-spacing",
  190. "word-spacing",
  191. "quotes",
  192. "tab-size",
  193. "orphans",
  194. "writing-mode",
  195. "text-combine-upright",
  196. "unicode-bidi",
  197. "text-orientation",
  198. "direction",
  199. "text-rendering",
  200. "font-feature-settings",
  201. "font-language-override",
  202. "image-rendering",
  203. "image-orientation",
  204. "image-resolution",
  205. "shape-image-threshold",
  206. "shape-outside",
  207. "shape-margin",
  208. "color",
  209. "background",
  210. "background-image",
  211. "background-position",
  212. "background-size",
  213. "background-repeat",
  214. "background-origin",
  215. "background-clip",
  216. "background-attachment",
  217. "background-color",
  218. "background-blend-mode",
  219. "isolation",
  220. "clip-path",
  221. "mask",
  222. "mask-image",
  223. "mask-mode",
  224. "mask-position",
  225. "mask-size",
  226. "mask-repeat",
  227. "mask-origin",
  228. "mask-clip",
  229. "mask-composite",
  230. "mask-type",
  231. "filter",
  232. "box-shadow",
  233. "opacity",
  234. "transform-style",
  235. "transform",
  236. "transform-box",
  237. "transform-origin",
  238. "perspective",
  239. "perspective-origin",
  240. "backface-visibility",
  241. "transition",
  242. "transition-property",
  243. "transition-duration",
  244. "transition-timing-function",
  245. "transition-delay",
  246. "animation",
  247. "animation-name",
  248. "animation-duration",
  249. "animation-timing-function",
  250. "animation-delay",
  251. "animation-iteration-count",
  252. "animation-direction",
  253. "animation-fill-mode",
  254. "animation-play-state",
  255. "scroll-behavior",
  256. "scroll-snap-type",
  257. "scroll-snap-destination",
  258. "scroll-snap-coordinate",
  259. "cursor",
  260. "touch-action",
  261. "caret-color",
  262. "ime-mode",
  263. "object-fit",
  264. "object-position",
  265. "content",
  266. "counter-reset",
  267. "counter-increment",
  268. "will-change",
  269. "pointer-events",
  270. "all",
  271. "page-break-before",
  272. "page-break-after",
  273. "page-break-inside",
  274. "widows"
  275. ],
  276. }
  277. }

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2265.html

相关文章

  • 参考:10个JavaScript参考手册

    摘要:本文整理了个参考手册,希望能够提高你的开发的效率。个优秀的参考手册速查表一个快速参考指南,内容涉及各种函数方法正则表达式以及对象。个优秀的参考手册速查表包含了和有关的文档。这个参考手册主要就是针对选择器的。 本文整理了10个JavaScript参考手册,希望能够提高你的Web开发的效率。 QuicklyCode——速查表和编程素材 你可以在这个网站中找到各种速查表以及其他开发者的资源,...

    morgan 评论0 收藏0
  • 前端查表大全,分享一些技术和工具的简明教程

    摘要:这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容,如编辑器的快捷键的命令行的选择器的属性等,这个列表简单收集了常用的工具,可以收藏用于平时的备忘录,需要用到的时候可以及时查阅。 这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容,如编辑器的快捷键、git的命令行、jQuery的API选择器、CSS的flexbox属性等,这个列表简单收集了常用的工具,可以收藏用于平...

    xiaochao 评论0 收藏0
  • 前端查表大全,分享一些技术和工具的简明教程

    摘要:这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容,如编辑器的快捷键的命令行的选择器的属性等,这个列表简单收集了常用的工具,可以收藏用于平时的备忘录,需要用到的时候可以及时查阅。 这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容,如编辑器的快捷键、git的命令行、jQuery的API选择器、CSS的flexbox属性等,这个列表简单收集了常用的工具,可以收藏用于平...

    avwu 评论0 收藏0
  • 前端查表大全,分享一些技术和工具的简明教程

    摘要:这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容,如编辑器的快捷键的命令行的选择器的属性等,这个列表简单收集了常用的工具,可以收藏用于平时的备忘录,需要用到的时候可以及时查阅。 这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容,如编辑器的快捷键、git的命令行、jQuery的API选择器、CSS的flexbox属性等,这个列表简单收集了常用的工具,可以收藏用于平...

    chunquedong 评论0 收藏0
  • LESS和SASS的区别与查表-译文

    摘要:原文对于我们开发者来说经常听到一些关于和的信息但是我们并不知道这都是什么意思这篇文章就是为我们而准备的在调查这些语言后我已经发现它们都是一些文件运行后会产生相应文件给我们为什么我们要使用和它们呢因为我们可以避免中需要的重复性人物它们两种语言 原文 对于我们CSS开发者来说经常听到一些关于LESS和SASS的信息,但是我们并不知道这都是什么意思,这篇文章就是为我们而准备的.在调查这些语言...

    qingshanli1988 评论0 收藏0

发表评论

0条评论

thursday

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<