CSS：cascading style sheets 层叠样式表
display:
block: div p h1-h6 ul ol dl pre addres form
inline: span a em i strong
inline-block: img input select textarea button
table: table
table-cell: th td
table-caption: caption
table-row: tr
list-item: li
px em rem vh vw vmin vmax %
*
标签
class
id
div,div
div div
div>div
div+div
div~div
div[type]
div[type=value]
div[type~=value]
div[type=|value]
div[type^=value]
div[type*=value]
div[type&=value]
:link
:visited
:active
:hover
:focus
:first-child
:first-letter
:first-line
:first-of-type
:lang(it)
:last-of-type
:last-child
:nth-child()
:nth-of-type()
:nth-last-child()
:nth-last-of-type()
:only-child
:only-of-type
:empty
:not(div)
::selection
:disabled
:enabled
:checked
::placeholder
width
height
background-image: url();
background-color: rgba(255,255,255);
background-repeat: repeat-x repeat-y no-repeat;
background-size: cover contain ;
background-position: top left bottom center;
background-attachment: scroll fixed;
background: #00FF00 url(bgimage.gif) center/50px no-repeat fixed;
border-style: dotted double dashed solid;
border-width: ;
border-color: ;
border-radius: ;
border-image: url(border.png) 30 round;
direction: ltr rtl ;
color
line-height:2：2倍 200%会被计算出来
text-indent: 10px;
text-align: left right center;
letter-spacing: 10px;
word-spacing: 10px;
text-decoration: underline over line line-through;
text-transform: capitalize uppercase lowercase;
word-break: break-all keep-all;
word-wrap: break-word;
white-space: nowrap;
overflow: hidden auto scroll;
text-overflow: ellipsis;
font-size: 10px;
font-family: "weiruanyahei";
font-weight: 400;
font-style: itatic;
font: style weight size/line-height family;
border-collapse:collapse;
colspan="2"
rowspan="2"
box-sizing: content-box border-box;
opacity: 0-1;
visibility: hidden;
display: none;
float
clear: both;
BFC
position:relative absolute fixed sticky;
边距合并：外边距，父子，字体： 加边框 加padding BFC
行内元素居中text-align: center;
块:margin:0 auto;
padding挣开元素
transform+absolute居中
vertical-align: middle;
display: table-cell;
::placeholder
transform: translateX translateY translateZ rotateX rotateZ rotateY scale skew;
transition: 1s width 1s ;
transition-delay: 1s;
transition-timing-function: cubic-bezier(0.215, -0.340, 0.960, 1.350);
animation-fill-mode: forwards;
animation-direction: reverse;
animation-iteration-count: infinite;
animation-play-state: paused;
display: flex;
flex-direction: row row-reverse column column-reverse;
flex-wrap: no-wrap wrap wrap-reverse;
flex-flow: direction wrap;
justify-content: flex-start flex-end center space-between space-around;
align-items: flex-start flex-end center stretch baseline;
align-content: flex-start flex-end center space-between space-around stretch;
order: -1;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
flex: 0 1 auto;
align-self: flex-start flex-end center stretch baseline;