CSS总结

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;

---

---

---

---

---

---

---

---

---

---

---