摘要:前面的話本文將按照布局類屬性盒模型屬性文本類屬性修飾類屬性這四個分類,對常用屬性進行重新排列,并最終設置為一份文件布局類定位浮動多列布局柵格布局顯示網格網格線隱式網格
本文將按照布局類屬性、盒模型屬性、文本類屬性、修飾類屬性這四個分類,對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" ], } }
?
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/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的信息,但是我們并不知道這都是什么意思,這篇文章就是為我們而準備的.在調查這些語言...
閱讀 2064·2021-09-22 15:43
閱讀 8618·2021-09-22 15:07
閱讀 1078·2021-09-03 10:28
閱讀 2052·2021-08-19 10:57
閱讀 1061·2020-01-08 12:18
閱讀 2972·2019-08-29 15:09
閱讀 1521·2019-08-29 14:05
閱讀 1640·2019-08-29 13:57