CSS總結(jié)

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;






















最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.css簡(jiǎn)介 css注釋 /* */ 瀏覽器私有屬性chrome,safari: -webkit-fir...
    萌琦琦de詩(shī)揚(yáng)閱讀 307評(píng)論 0 2
  • 復(fù)習(xí)完CSS后總結(jié)一下,首先看一下CSS的一個(gè)體系結(jié)構(gòu)圖: 大體上分為這八個(gè)部分,參考一下vivijind的css...
    蘇敏閱讀 715評(píng)論 0 3
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,827評(píng)論 1 45
  • 圖片引入標(biāo)簽: 超鏈接標(biāo)簽: 百度 base標(biāo)簽: base標(biāo)簽可以給頁(yè)面的鏈接加上默認(rèn)的路徑,或者默認(rèn)的打開方式...
    錢錢_e3a6閱讀 429評(píng)論 0 0
  • 01生娃后,做全職媽媽還是做職業(yè)女性? 對(duì)于絕大多數(shù)女性而言,生育都是人生中必經(jīng)的一個(gè)階段。可是,生完之后呢?帶娃...
    小贏小歡喜閱讀 1,548評(píng)論 1 5

友情鏈接更多精彩內(nèi)容