Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS (属性 (弹性盒子布局 / Flexible Box Layout (. (place-content (. (align-content…
CSS
属性
弹性盒子布局 / Flexible Box Layout
.
place-content
.
align-content
.
end / flex-end
space-evenly
normal / stretch
space-around
start / flex-start
space-between
center
justify-content
sets both the align-content and justify-content properties
align-items
.
start / flex-start
end / flex-end
normal / stretch
center
align-self
.
stretch
center
start
end
aligns flex items of the current flex line overriding the align-items value. If any of the item's cross-axis margin is set to auto, then align-self is ignored.
flex
.
flex-grow, flex-shrink, and flex-basis.
flex-grow
flex-shrink
flex-basis
flex-flow
.
flex-direction and flex-wrap
flex-direction
flex-wrap
order
动画 / Animations
.
animation-name
keyframes
/
Multiple animations
/
animation-name: test1, animation4;
animation-duration
default:0s
s / ms
animation-timing-function
ease
ease-in
ease-out
ease-in-out
linear
step-start
step-end
cubic-bezier(a, b, c, d)
steps(n, end)
steps(n, start)
animation-delay
default:0s
s / ms
animation-iteration-count
number of times an animation cycle should be played before stopping
animation-direction
normal
reverse
alternate
alternate-reverse
/
Multiple animations
/
animation-direction: normal, reverse;
animation-fill-mode
none
forwards
backwards
both
animation-play-state
running
paused
a shorthand property for the various animation properties:
animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.
背景与边框 / Backgrounds & Borders
.
Backgrounds
background
background-clip
.
text
padding-box
content-box
border-box
background-color
.
/
Hexadecimal value
/
background-color: #bbff00; /
Fully opaque
/
background-color: #11ffee00; /
Fully transparent
/
background-color: #11ffeeff; /
Fully opaque
/
/
RGB value
/
background-color: rgb(255, 255, 128); /
Fully opaque
/
background-color: rgba(117, 190, 218, 0.5); /
50% transparent
/
/
HSL value
/
background-color: hsl(50, 33%, 25%); /
Fully opaque
/
background-color: hsla(50, 33%, 25%, 0.75); /
75% transparent
/
/
Special keyword values
/
background-color: currentcolor;
background-color: transparent;
/
Keyword values
/
background-color: red;
background-color: indigo;
background-image
.
url()
linear-gradient()
multiple backgrounds
background-origin
.
padding-box
content-box
border-box
background-position
background-repeat
background-size
.
contain
cover
background-attachment
scroll 父滚子不滚
local 父子都滚
fixed 父子都不滚
background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.
Borders
border
border-width
.
border-style
.
border-color
border-width, border-style, and border-color
border-image
.
border-image-source
border-image-source: repeating-linear-gradient(45deg, transparent, #4d9f0c 20px);
border-image-slice
.
border-image-width
.
border-image-outset
.
rendered
outside the border box
as a result of this property do
not trigger scrolling
. Moreover, these areas
don't capture mouse events.
border-image-repeat
.
repeat
round
space
stretch
border-image-source, border-image-slice, border-image-width, border-image-outset, and border-image-repeat.
border-radius
box-shadow
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
盒子模型 / Box Model
.
box-sizing
content-box(default)
border-box
height
By default
, the property defines the height of the
content area
. If box-sizing is set to border-box, however, it instead determines the height of the border area.
width
By default
, the property defines the width of the
content area
. If box-sizing is set to border-box, however, it instead determines the width of the border area.
max-height
max-height overrides height, but min-height overrides max-height.
max-width
max-width overrides width, but min-width overrides max-width.
min-height
The element's height is set to the value of min-height whenever min-height is larger than max-height or height.
min-width
The element's width is set to the value of min-width whenever min-width is larger than max-width or width.
overflow
.
visible
/
content is not clipped
/
hidden
/
no scrollbars are provided
/
scroll
/
no scrollbars are provided
/
auto
/
append scrollbars if necessary
/
overflow-x
.
overflow-y
.
overscroll-behavior
.
overscroll-behavior-y
.
overscroll-behavior-x
.
margin
.
padding
.
visibility
呈现 / Display
.
<display-outside>
.
inline
The element generates one or more inline element boxes.
block(default)
The element generates a block element box.
<display-inside>
.
flex
The element behaves like a block element and lays out its content according to the flexbox model.
grid
The element behaves like a block element and lays out its content according to the grid model.
flow(default)
The element lays out its contents using flow layout (block-and-inline layout).
table
These elements behave like <table> HTML elements. It defines a block-level box.
<display-internal>
<display-box>
none
Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element
did not exist
). All descendant elements also have their display turned off.
To have an element
take up the space
that it would normally take, but without actually rendering anything,
use the visibility property instead.
<display-legacy>
specifies the
type of rendering box
used for an element. defines how the CSS
formatting box tree
is generated from the document element tree and defines properties controlling it.
基本UI / Basic User Interface
.
caret-color
.
<input>
cursor
.
.
outline
.
Borders vs. outlines
Borders and outlines are very similar. However, outlines differ from borders in the following ways:
Outlines never take up space, as they are drawn outside of an element's content.
According to the spec, outlines don't have to be rectangular, although they usually are.
outline-style
outline-width
outline-color
outline-offset
sets the amount of space between an outline and the edge or border of an element.
outline-style, outline-width, and outline-color.
resize
.
horizontal
vertical
none
both
text-overflow
.
ellipsis
clip
user-select
.
蒙版 / Masking
.
clip-path
<basic-shape>
颜色 / Color
.
.
color
element's
text content
and
text decorations
. It also sets the
currentcolor
value, which may be used as an indirect value on other properties, and is the
default for other color properties, such as border-color.
opacity
文字修饰 / Text Decoration
.
text-decoration
text-decoration-line
.
overline
line-through
underline
text-decoration-color
text-decoration-style
.
double
dotted
dashed
wavy
solid
text-decoration-line, text-decoration-color, and text-decoration-style
text-shadow
多列布局 / Multi-column Layout
.
columns
column-width
specifies the minimum column width. The number of columns will be the maximum number of columns that can fit without any column having a width less than the column-width value. The actual column width may be smaller than the value of column-width if the width of the container is smaller.
column-count
column-width and column-count
内容生成 / Generated Content
.
content
used with ::before and ::after
quotes
render quotation marks.
书写模式 / Writing Modes
.
unicode-bidi
direction
ltr
rtl
sets the direction of
text, table columns, and horizontal overflow.
writing-mode
defines whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
horizontal-tb
vertical-lr
vertical-rl
表格Table
.
<table>
border-spacing
applies only when border-collapse is separate.
caption-side
empty-cells
table-layout
vertical-align
border-collapse
separate
collapse
滤镜 / Filter Effects
.
filter
<filter-function>
blur(radius)
defines the value of the standard deviation to the Gaussian function
brightness(amount)
A value under 100% darkens the image, while a value over 100% brightens it
contrast(amount)
A value under 100% decreases the contrast, while a value over 100% increases it
drop-shadow(offset-x offset-y blur-radius spread-radius color)
This function is somewhat similar to the box-shadow property. The
box-shadow property creates a rectangular shadow
behind an element's entire box, while the drop-shadow() filter
function creates a shadow that conforms to the shape
(alpha channel) of the image itself.
grayscale(amount)
A value of 100% is completely grayscale, while a value of 0% leaves the input unchanged.
hue-rotate(angle)
A value of 0deg leaves the input unchanged. A positive hue rotation increases the hue value and a negative rotation decreases the hue value.
invert(amount)
A value of 100% is completely inverted, while a value of 0% leaves the input unchanged.
opacity(amount)
A value of 0% is completely transparent, while a value of 100% leaves the input unchanged
saturate(amount)
A value under 100% desaturates the image, while a value over 100% super-saturates it. A value of 0% is completely unsaturated, while a value of 100% leaves the input unchanged.
sepia(amount)
A value of 100% is completely sepia, while a value of 0% leaves the input unchanged.
with filters, some browsers provide hardware acceleration for better performance.
backdrop-filter
apply graphical effects such as blurring or color shifting to the
area behind an element
图片 / Images
.
object-fit
fill
contain
cover
none
scale-down
object-position
文字 / Text
.
hanging-punctuation
.
hyphens
.
manual
auto
none
letter-spacing
.
spacing behavior between text characters.
line-break
.
overflow-wrap
.
break-word
normal
text-align
.
left
right
center
justify
text-indent
.
text-justify
.
defines what type of justification should be applied to text when
text-align: justify;
is set on it
text-transform
.
uppercase
lowercase
none
full-width
capitalize
white-space
.
nowrap
pre
pre-wrap
pre-line
word-break
.
word-spacing
.
spacing behavior between tags and words.
定位布局 / Positioned Layout
.
bottom
top
left
right
position
.
static
relative
absolute
fixed
sticky
clear
float
z-index
变形 / Transforms
.
transform
transform-origin
transform-style
transform-box
backface-visibility
perspective
perspective-origin
过渡 / Transitions
.
transition
transition-delay
transition-duration
transition-property
transition-timing-function
网格布局 / Grid Layout
.
grid
grid-template-rows
grid-template-columns
grid-template-areas
Ruby布局 / Ruby Layout
ruby
字体 / Fonts
.
font-face
font
font-style, font-variant, font-weight, font-size, line-height, and font-family
font-style
italic 自带斜体
oblique 强行斜体
normal
font-variant
.
font-variant-caps
.
small-caps
all-small-caps
petite-caps
all-petite-caps
unicase
titling-caps
normal
font-variant-numeric
.
normal
ordinal
slashed-zero
lining-nums
oldstyle-nums
proportional-nums
tabular-nums
diagonal-fractions
stacked-fractions
oldstyle-nums stacked-fractions
font-variant-alternates
.
normal
historical-forms
font-variant-ligatures
.
font-variant-east-asian
.
font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, and font-variant-east-asian
font-weight
.
normal
Same as 400.
bold
Same as 700.
lighter
One font weight lighter than the parent element (among the available weights of the font).
bolder
One font weight heavier than the parent element (among the available weights of the font).
100, 200, 300, 400, 500, 600, 700, 800, 900
font-size
.
xx-small, x-small, small, medium, large, x-large, xx-large
larger, smaller
<length>
<percentage>
line-height
.
normal
<number>
<length>
<percentage>
font-family
.
列表 / List
.
渲染优化 / Will Change
will-change
指针事件 / Pointer Events
.
pointer-events
touch-action
混合模式 / Compositing & Blending
数据类型
<basic-shape>
.
.
clip-path
<angle>
.
deg
grad
rad
turn
<blend-mode>
.
normal(正常)
multiply(正片叠底)
screen(滤色)
overlay(叠加)
darken(变暗)
lighten(变亮)
color-dodge(颜色减淡)
color-burn(颜色加深)
hard-light(强光)
soft-light(柔光)
difference(差值)
exclusion(排除)
hue(色相)
saturation(饱和度)
color(颜色)
luminosity(明度)
<custom-ident>
.
user-defined string used as an identifier
<gradient>
.
Linear gradient
linear-gradient()
Radial gradient
radial-gradient()
Repeating gradient
repeating-linear-gradient()
repeating-radial-gradient()
<image>
<integer>
.
represents a whole number, whether positive or negative. Integers can be used in numerous CSS properties, such as column-count, counter-increment, grid-column, grid-row, and z-index.
<length>
.
represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.
Relative length units
Font-relative lengths
ch
em
ex
rem
Viewport-percentage lengths
vh
vw
vmin
vmax
Absolute length units
px
cm
mm
in
pc
pt
<number>
<percentage>
<ratio>
<resolution>
<shape>
<string>
<time>
<transform-function>
<url>
color
方法
attr()
/
Simple usage
/
attr(data-count);
attr(title);
/
With type
/
attr(src url);
attr(data-count number);
attr(data-width px);
/
With fallback
/
attr(data-count number, 0);
attr(src url, '');
attr(data-width px, inherit);
attr(data-something, 'default');
calc()
minmax()
语法
规则
media
import
font-face
keyframes
charset
选择器
Basic Selectors
Combinators
Pseudo-classes
:active
:any
:any-link
:checked
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:focus-within
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited
