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? ? %
*
標(biāo)簽
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%會(huì)被計(jì)算出來(lái)
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
行內(nèi)元素居中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;