摘要:前面的话本文将按照布局类属性盒模型属性文本类属性修饰类属性这四个分类,对常用属性进行重新排列,并最终设置为一份文件布局类定位浮动多列布局栅格布局显示网格网格线隐式网格
本文将按照布局类属性、盒模型属性、文本类属性、修饰类属性这四个分类,对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
</>复制代码
{
"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"
],
}
}
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/2265.html
摘要:本文整理了个参考手册,希望能够提高你的开发的效率。个优秀的参考手册速查表一个快速参考指南,内容涉及各种函数方法正则表达式以及对象。个优秀的参考手册速查表包含了和有关的文档。这个参考手册主要就是针对选择器的。 本文整理了10个JavaScript参考手册,希望能够提高你的Web开发的效率。 QuicklyCode——速查表和编程素材 你可以在这个网站中找到各种速查表以及其他开发者的资源,...
摘要:这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容,如编辑器的快捷键的命令行的选择器的属性等,这个列表简单收集了常用的工具,可以收藏用于平时的备忘录,需要用到的时候可以及时查阅。 这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容,如编辑器的快捷键、git的命令行、jQuery的API选择器、CSS的flexbox属性等,这个列表简单收集了常用的工具,可以收藏用于平...
摘要:这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容,如编辑器的快捷键的命令行的选择器的属性等,这个列表简单收集了常用的工具,可以收藏用于平时的备忘录,需要用到的时候可以及时查阅。 这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容,如编辑器的快捷键、git的命令行、jQuery的API选择器、CSS的flexbox属性等,这个列表简单收集了常用的工具,可以收藏用于平...
摘要:这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容,如编辑器的快捷键的命令行的选择器的属性等,这个列表简单收集了常用的工具,可以收藏用于平时的备忘录,需要用到的时候可以及时查阅。 这个速查表主要是分享互联网上一些比较常用的工具和技术常用内容,如编辑器的快捷键、git的命令行、jQuery的API选择器、CSS的flexbox属性等,这个列表简单收集了常用的工具,可以收藏用于平...
摘要:原文对于我们开发者来说经常听到一些关于和的信息但是我们并不知道这都是什么意思这篇文章就是为我们而准备的在调查这些语言后我已经发现它们都是一些文件运行后会产生相应文件给我们为什么我们要使用和它们呢因为我们可以避免中需要的重复性人物它们两种语言 原文 对于我们CSS开发者来说经常听到一些关于LESS和SASS的信息,但是我们并不知道这都是什么意思,这篇文章就是为我们而准备的.在调查这些语言...
阅读 2211·2021-09-22 15:43
阅读 9148·2021-09-22 15:07
阅读 1202·2021-09-03 10:28
阅读 2146·2021-08-19 10:57
阅读 1241·2020-01-08 12:18
阅读 3113·2019-08-29 15:09
阅读 1643·2019-08-29 14:05
阅读 1728·2019-08-29 13:57