@(工作笔记)

css-record

[TOC]

css单位

CSS 单位

CSS 有几个不同的单位用于表示长度。

一些设置 CSS 长度的属性有 width, margin, padding, font-size, border-width, 等。

长度有一个数字和单位组成如 10px, 2em, 等。

数字与单位之间不能出现空格。如果长度值为 0，则可以省略单位。

对于一些 CSS 属性，长度可以是负数。

有两种类型的长度单位：相对和绝对。

浏览器支持

下表中的数字表示支持该长度单位的最低浏览器版本。

注意: Internet Explorer 9 通过不标准的名称 vm 来支持 vmin 。

相对长度

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

	提示: rem与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

绝对长度

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

像素或许被认为是最好的"设备像素"，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

accent-color auto
align-content normal
align-items normal
align-self auto
alignment-baseline auto
all
animation-delay 0s
animation-direction normal
animation-duration 0s
animation-fill-mode none
animation-iteration-count 1
animation-name none
animation-play-state running
animation-timing-function ease
app-region none
appearance none
aspect-ratio auto
backdrop-filter none
backface-visibility visible
background-attachment scroll
background-blend-mode normal
background-clip border-box
background-color rgb(45, 58, 75)
background-image none
background-origin padding-box
background-position-x 0%
background-position-y 0%
background-repeat-x
background-repeat-y
background-size auto
baseline-shift 0px
block-size 743.891px
border-block-end-color rgb(0, 0, 0)
border-block-end-style none
border-block-end-width 0px
border-block-start-color rgb(0, 0, 0)
border-block-start-style none
border-block-start-width 0px
border-bottom-color rgb(0, 0, 0)
border-bottom-left-radius 0px
border-bottom-right-radius 0px
border-bottom-style none
border-bottom-width 0px
border-collapse separate
border-end-end-radius 0px
border-end-start-radius 0px
border-image-outset 0
border-image-repeat stretch
border-image-slice 100%
border-image-source none
border-image-width 1
border-inline-end-color rgb(0, 0, 0)
border-inline-end-style none
border-inline-end-width 0px
border-inline-start-color rgb(0, 0, 0)
border-inline-start-style none
border-inline-start-width 0px
border-left-color rgb(0, 0, 0)
border-left-style none
border-left-width 0px
border-right-color rgb(0, 0, 0)
border-right-style none
border-right-width 0px
border-start-end-radius 0px
border-start-start-radius 0px
border-top-color rgb(0, 0, 0)
border-top-left-radius 0px
border-top-right-radius 0px
border-top-style none
border-top-width 0px
bottom auto
box-shadow none
box-sizing content-box
break-after auto
break-before auto
break-inside auto
buffered-rendering auto
caption-side top
caret-color rgb(0, 0, 0)
clear none
clip auto
clip-path none
clip-rule nonzero
color rgb(0, 0, 0)
color-interpolation srgb
color-interpolation-filters linearrgb
color-rendering auto
color-scheme light
column-count auto
column-fill balance
column-gap normal
column-rule-color rgb(0, 0, 0)
column-rule-style none
column-rule-width 0px
column-span none
column-width auto
contain none
contain-intrinsic-block-size auto
contain-intrinsic-height auto
contain-intrinsic-inline-size auto
contain-intrinsic-width auto
content normal
content-visibility visible
counter-increment none
counter-reset none
counter-set none
cursor auto
cx 0px
cy 0px
d none
direction ltr
display block
dominant-baseline auto
empty-cells show
fill rgb(0, 0, 0)
fill-opacity 1
fill-rule nonzero
filter none
flex-basis auto
flex-direction row
flex-grow 0
flex-shrink 1
flex-wrap nowrap
float none
flood-color rgb(0, 0, 0)
flood-opacity 1
font-family "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif
font-feature-settings normal
font-kerning auto
font-optical-sizing auto
font-size 16px
font-stretch 100%
font-style normal
font-synthesis-small-caps auto
font-synthesis-style auto
font-synthesis-weight auto
font-variant-caps normal
font-variant-east-asian normal
font-variant-ligatures normal
font-variant-numeric normal
font-variation-settings normal
font-weight 400
forced-color-adjust auto
grid-auto-columns auto
grid-auto-flow row
grid-auto-rows auto
grid-column-end auto
grid-column-start auto
grid-row-end auto
grid-row-start auto
grid-template-areas none
grid-template-columns none
grid-template-rows none
height 743.891px
hyphens manual
image-orientation from-image
image-rendering auto
inline-size 2446px
inset-block-end auto
inset-block-start auto
inset-inline-end auto
inset-inline-start auto
isolation auto
justify-content normal
justify-items normal
justify-self auto
left auto
letter-spacing normal
lighting-color rgb(255, 255, 255)
line-break auto
line-height 18.4px
list-style-image none
list-style-position outside
list-style-type disc
margin-block-end 0px
margin-block-start 0px
margin-bottom 0px
margin-inline-end 0px
margin-inline-start 0px
margin-left 0px
margin-right 0px
margin-top 0px
marker-end none
marker-mid none
marker-start none
mask none
mask-type luminance
max-block-size none
max-height none
max-inline-size none
max-width none
min-block-size 100%
min-height 100%
min-inline-size 0px
min-width 0px
mix-blend-mode normal
object-fit fill
object-position 50% 50%
offset-distance 0px
offset-path none
offset-rotate auto 0deg
opacity 1
order 0
orphans 2
outline-color rgb(0, 0, 0)
outline-offset 0px
outline-style none
outline-width 0px
overflow-anchor auto
overflow-clip-margin 0px
overflow-wrap normal
overflow-x hidden
overflow-y hidden
overscroll-behavior-block auto
overscroll-behavior-inline auto
overscroll-behavior-x auto
overscroll-behavior-y auto
padding-block-end 0px
padding-block-start 0px
padding-bottom 0px
padding-inline-end 0px
padding-inline-start 0px
padding-left 0px
padding-right 0px
padding-top 0px
page auto
page-orientation
paint-order normal
perspective none
perspective-origin 1223px 371.938px
pointer-events auto
position static
quotes auto
r 0px
resize none
right auto
row-gap normal
ruby-position over
rx auto
ry auto
scroll-behavior auto
scroll-margin-block-end 0px
scroll-margin-block-start 0px
scroll-margin-bottom 0px
scroll-margin-inline-end 0px
scroll-margin-inline-start 0px
scroll-margin-left 0px
scroll-margin-right 0px
scroll-margin-top 0px
scroll-padding-block-end auto
scroll-padding-block-start auto
scroll-padding-bottom auto
scroll-padding-inline-end auto
scroll-padding-inline-start auto
scroll-padding-left auto
scroll-padding-right auto
scroll-padding-top auto
scroll-snap-align none
scroll-snap-stop normal
scroll-snap-type none
scrollbar-gutter auto
shape-image-threshold 0
shape-margin 0px
shape-outside none
shape-rendering auto
size
speak normal
stop-color rgb(0, 0, 0)
stop-opacity 1
stroke none
stroke-dasharray none
stroke-dashoffset 0px
stroke-linecap butt
stroke-linejoin miter
stroke-miterlimit 4
stroke-opacity 1
stroke-width 1px
tab-size 8
table-layout auto
text-align start
text-align-last auto
text-anchor start
text-combine-upright none
text-decoration-color rgb(0, 0, 0)
text-decoration-line none
text-decoration-skip-ink auto
text-decoration-style solid
text-decoration-thickness auto
text-indent 0px
text-orientation mixed
text-overflow clip
text-rendering optimizelegibility
text-shadow none
text-size-adjust 100%
text-transform none
text-underline-offset auto
text-underline-position auto
top auto
touch-action auto
transform none
transform-box view-box
transform-origin 1223px 371.945px
transform-style flat
transition-delay 0s
transition-duration 0s
transition-property all
transition-timing-function ease
unicode-bidi normal
user-select auto
vector-effect none
vertical-align baseline
visibility visible
white-space normal
widows 2
width 2446px
will-change auto
word-break normal
word-spacing 0px
writing-mode horizontal-tb
x 0px
y 0px
z-index auto
zoom 1
-webkit-border-horizontal-spacing 0px
-webkit-border-vertical-spacing 0px
-webkit-box-align stretch
-webkit-box-decoration-break slice
-webkit-box-direction normal
-webkit-box-flex 0
-webkit-box-ordinal-group 1
-webkit-box-orient horizontal
-webkit-box-pack start
-webkit-box-reflect none
-webkit-font-smoothing antialiased
-webkit-highlight none
-webkit-hyphenate-character auto
-webkit-line-clamp none
-webkit-locale auto
-webkit-mask-box-image-outset 0
-webkit-mask-box-image-repeat stretch
-webkit-mask-box-image-slice 0 fill
-webkit-mask-box-image-source none
-webkit-mask-box-image-width auto
-webkit-mask-clip border-box
-webkit-mask-composite source-over
-webkit-mask-image none
-webkit-mask-origin border-box
-webkit-mask-position-x 0%
-webkit-mask-position-y 0%
-webkit-mask-repeat-x
-webkit-mask-repeat-y
-webkit-mask-size auto
-webkit-perspective-origin-x
-webkit-perspective-origin-y
-webkit-print-color-adjust economy
-webkit-rtl-ordering logical
-webkit-tap-highlight-color rgba(0, 0, 0, 0.18)
-webkit-text-combine none
-webkit-text-decorations-in-effect none
-webkit-text-emphasis-color rgb(0, 0, 0)
-webkit-text-emphasis-position over right
-webkit-text-emphasis-style none
-webkit-text-fill-color rgb(0, 0, 0)
-webkit-text-security none
-webkit-text-stroke-color rgb(0, 0, 0)
-webkit-text-stroke-width 0px
-webkit-transform-origin-x
-webkit-transform-origin-y
-webkit-transform-origin-z
-webkit-user-drag auto
-webkit-user-modify read-only
-webkit-border-image none
-webkit-ruby-position before
-webkit-text-orientation vertical-right