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.mzph.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接口访问资源。…