CSS屬性速查表

本文將按照布局類屬性、盒模型屬性、文字類屬性、修飾類屬性這四個分類，對css常用屬性進行重新排列，並最終設定為乙份stylelintrc檔案

1、定位

position

z-index
topbottom
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

}

CSS屬性速查表

本文將按照布局類屬性 盒模型屬性 文字類屬性 修飾類屬性這四個分類，對css常用屬性進行重新排列，並最終設定為乙份stylelintrc檔案 布局類1 定位 position z index topbottom left right2 浮動 float clear3 多列布局 columns col...

CSS的常用屬性速查表 轉）

要想寫出優美的css作品，想象力固然很重要，然而基礎也是不可忽略的。相信大部分人怕寫css的原因是被它龐大的基礎知識體系給嚇到了，在此筆者推薦乙個叫freecodecamp的 通過闖關的方式來學習前端三劍客，用它入門css是最佳的選擇！以下列出的屬性知識點都是筆者用到過的 千萬不要被數量嚇到，其實常...

flex布局屬性速查表

box display flex 任何乙個容器都可以指定為flex布局。注意，設為flex布局以後，子元素的float clear和vertical align屬性將失效。box display inline flex 行內元素也可以使用flex布局。box display webkit flex ...