CSS屬性速查表

2022-01-17 04:13:57 字數 2630 閱讀 3619

本文將按照布局類屬性、盒模型屬性、文字類屬性、修飾類屬性這四個分類,對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 ...