CSS属性简表（通常）

CSS属性简表（通常）

位置、布局

======================================

position: relative | absolute | fixed 
z-index： 整数（可负）
top right bottom left： 长度/百分比
display: none | inline | block | inline-block | flex
float: none | left | right
clear: none | left | right | both
overflow(-x/-y): hidden | scroll | auto
box-sizing: content-box | border-box
zoom: 浮点数/百分比
visibility: visible | hidden
(clip)

 

尺寸、边框

======================================

width height (max-/min-)
margin(-TRBL)
padding(-TRBL)

border-width
border-style: solid | double | dotted | dashed
border-color
border-top
border-top-color
border-radius: 长度/百分比
border-top-left-radius
outline
box-shadow： x偏移 y偏移 模糊值 颜色

 

背景、颜色

======================================

width height (max-/min-)
margin(-TRBL)
padding(-TRBL)

border-width
border-style: solid | double | dotted | dashed
border-color
border-top
border-top-color
border-radius: 长度/百分比
border-top-left-radius
outline
box-shadow： x偏移 y偏移 模糊值 颜色

background: url() position/size repeat color;
background: url() position/size repeat attachment clip origin color;
background-image: url()
background-position: 长度/百分比 | center | TRBL
background-size(尺寸大小): 长度/百分比 | cover | contain
background-repeat: repeat | repeat-x/y | no-repeat
(background-attachment(相对滚动)): fixed | local
(background-clip(从何边剪裁)): border-box | padding-box | content-box | text
(background-origin(从何边显示)): padding-box | border-box | content-box

color: HEX | RGB | RGBA | HSL | HSLA
oopacity: [0.0 ~ 1.0]

 

文本相关

======================================

font: weight size/line-height Simsun,Arial;
font: style variant weight size/line-height Simsun,Arial;
(简写格式必须指定font-size和font-family)
font-style: normal | italic | oblique(人为斜体)
font-variant: normal | small-caps(小型大写字母)
font-weight: normal | bold | bolder | lighter | 100-900
font-size: medium | 长度/百分比
font-family:
Sans-serif Helvetica Arial Verdana Tahoma
Serif Georgia Times
SimSun Microsoft YaHei

text-decoration-line: none | underline
text-decoration-color: 
text-decoration-style: solid | double | dotted | dashed | wavy

text-transform
white-space
tab-size
word-break
word-wrap(overflow-wrap)
text-align
text-justify
word-spacing
letter-spacing
text-indent
vertical-align
text-shadow
text-overflow

（white-space: normal pre nowrap pre-wrap pre-line;
overflow-wrap: normal break-word;
word-break: normal keep-all break-all;
text-align: start end l/r center justify;
word/letter-spacing: px %;
vertical-align: baseline sub/super t/b middle text-bottom % px;
line-height: normal px num;）

 

列表表格

======================================

list-style: type position image;
list-style-type: disc | circle | square | none
list-style-position: outside | inside
list-style-image: none | url()

table-layout: auto | fixed;
border-collapse: separate | collapse;
border-spacing: 0 | px;
caption-side: top | bottom;
empty-cells: show | hide;

 

多列

======================================

column-width: auto px;
column-count: auto z;
column-gap: normal px;
column-rule
column-span: none all;
column-fill: auto balance;
column-break-before/after/inside: auto always avoid;

 

其他

======================================

!importantcursor： pointer | wait | move | help | not-allowed | url() x y
border-image-source
border-image-slice: <num> <per> fill;
border-image-width: <len> <num> <per> auto;
border-image-outset: <len> <num>;
border-image-repeat: stretch repeat round space;

 

伪元素

======================================

content: normal/none attr('data-content') url() "string" counter(name, string, l-s-t);
counter-increment: name 1;
.counter1 li:before{content: counter(name)".";}
.counter2 li{counter-increment: name 2;}
}

 

媒体查询

======================================

@media screen and ((device-)width: 1024px) {...}
@import url(example.css) screen and (max-width:800px);
<link media="screen and (min-width:400px) and (max-width:900px)" rel="stylesheet" href="example.css" />

 

单位

======================================

Length: em rem vw/vh vmax/vmin cm mm;
90deg = 0.25turn = 2PI/4rad = 400/4grad
1s = 1000ms

em [当前对象的font-size]
rem [html的font-size]
vw vh [均分为100份]