设为首页 加入收藏

TOP

CSS属性速查表(一)
2019-09-03 03:34:29 】 浏览:30
Tags: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-  
		
CSS属性速查表(一) https://www.cppentry.com/bencandy.php?fid=107&id=249266

首页 上一页 1 2 3 4 下一页 尾页 1/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇whistle手机调试工具使用简单教程 下一篇关于HTML、CSS、JavaScript三者关..