本文將按照布局類屬性、盒模型屬性、文字類屬性、修飾類屬性這四個分類,對css常用屬性進行重新排列,並最終設定為乙份stylelintrc檔案
布局類1、定位
2、浮動position
z-index
topbottom
left
right
3、多列布局float
clear
4、柵格布局columns
columns-width
columns-count
column-rule
column-fill
column-span
column-gap
專門建立的學習q-q-u-n: 731771211,分享學習方法和需要注意的小細節,不停更新最新的教程和學習技巧
(從零基礎開始到前端專案實戰教程,學習工具,全棧開發學習路線以及規劃)
盒模型// 顯示網格
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、彈性盒模型
2、**模型// 彈性容器
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
// 彈性專案
flex
flex-basis
flex-grow
flex-shrink
align-self
order
3、列表模型table-layout
empty-cells
caption-side
border-collapse
border-spacing
list-style
4、盒子尺寸
5、盒子顯示box-sizing
display
width
height
padding
margin
border
border-radius
outline
文字類overflow
clip
resize
visibility
1、文字樣式
2、排版模式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
修飾類writing-mode
text-combine-upright
unicode-bidi
text-orientation
direction
1、顏色
2、變形color
background
isolation
clip-path
mask
filter
box-shadow
opacity
cursor
3、動畫transform
transform-style
transform-origin
perspective
perspective-origin
backface-visibility
專門建立的學習q-q-u-n: 731771211,分享學習方法和需要注意的小細節,不停更新最新的教程和學習技巧
(從零基礎開始到前端專案實戰教程,學習工具,全棧開發學習路線以及規劃)
transition
animation
will-change
stylelint
}
CSS屬性速查表
本文將按照布局類屬性 盒模型屬性 文字類屬性 修飾類屬性這四個分類,對css常用屬性進行重新排列,並最終設定為乙份stylelintrc檔案 1 定位 position z index topbottom left right 2 浮動 float clear 3 多列布局 columns colu...
CSS的常用屬性速查表 轉)
要想寫出優美的css作品,想象力固然很重要,然而基礎也是不可忽略的。相信大部分人怕寫css的原因是被它龐大的基礎知識體系給嚇到了,在此筆者推薦乙個叫freecodecamp的 通過闖關的方式來學習前端三劍客,用它入門css是最佳的選擇!以下列出的屬性知識點都是筆者用到過的 千萬不要被數量嚇到,其實常...
flex布局屬性速查表
box display flex 任何乙個容器都可以指定為flex布局。注意,設為flex布局以後,子元素的float clear和vertical align屬性將失效。box display inline flex 行內元素也可以使用flex布局。box display webkit flex ...