background是背景顏色的縮寫(xiě)

如果要加背景圖片的大小，方式是：顏色 圖片 平鋪方式 位置 / 背景圖片大小

background-repeat平鋪方式有:no-repeat(不平鋪),repeat(平鋪),repeat-x(X軸平鋪),repeat-y(Y軸平鋪)

linear-gradient()函數(shù)，用于設(shè)置背景的線性漸變汉规，該函數(shù)的第一個(gè)參數(shù)值是漸變的方向，后面的參數(shù)值是漸變的顏色

background:linear-gradient(to left top,red,blue,green,purple)

radial-gradient()函數(shù)啄枕，用于設(shè)置背景的徑向漸變脆淹，該函數(shù)不需要傳漸變方向漓糙，直接傳漸變的顏色，從中間向外漸變

background:radial-gradient(red,blue,green)

text-shadow文本陰影，屬性值分別是：X軸偏移量 Y軸偏移量 陰影的模糊半徑 陰影顏色

vertical-align樣式病曾，圖片的對(duì)齊方式鲫竞，可以設(shè)置圖片兩端文本相對(duì)于圖片的對(duì)齊方式，屬性值包括：top bottom middle

border的邊框類(lèi)型：solid(實(shí)線),double(雙實(shí)線),dashed(虛線),dotted(點(diǎn)線)

outline:none;是去掉文本框的輪廓線

list-style:none;是去掉列表符號(hào)

text-decoration:none;是去掉下劃線

margin:0 auto;是盒子居中顯示

display屬性：

塊級(jí)元素：特點(diǎn)是獨(dú)占一行，可以識(shí)別寬高屬性。

行級(jí)元素：特點(diǎn)是按行顯示，一行不夠放暮的，會(huì)自動(dòng)換行翩伪，不識(shí)別寬高屬性，它的實(shí)際大小還是由內(nèi)容決定。

inline-block表示行內(nèi)塊元素，既有塊級(jí)元素可以識(shí)別寬高的特點(diǎn)，也有行內(nèi)元素在一行的特點(diǎn)

box-shadow盒子陰影视乐，屬性值分別是：X軸偏移量 Y軸偏移量 模糊半徑 陰影顏色彰檬，

box-shadow: 10px 10px 5px blue;

第一個(gè)屬性值設(shè)置為inset，表示內(nèi)陰影

box-shadow: inset 0px 0px 30px blue;

border-radius是圓角邊框

overflow屬性用于設(shè)置溢出處理郎笆，屬性值包括：visible(溢出部分顯示，是默認(rèn)值),hidden(溢出部分隱藏),scroll(溢出部分凄吏，通過(guò)滾動(dòng)條查看),如果內(nèi)容不溢出远舅，還是會(huì)出現(xiàn)滾動(dòng)條的區(qū)域,auto(自動(dòng)，如果內(nèi)容溢出痕钢，出現(xiàn)滾動(dòng)條,沒(méi)有溢出图柏，不會(huì)出現(xiàn)滾動(dòng)條區(qū)域)

overflow:hidden; white-space:nowrap; text-overflow:ellipsis;文本的溢出處理,三個(gè)缺一不可，overflow溢出部分隱藏任连，white-space屬性設(shè)置空白處理蚤吹，屬性值nowrap，表示設(shè)置文本不換行随抠，屬性值pre,表示保留空格裁着，text-overflow屬性設(shè)置文本溢出處理，屬性值ellipsis表示文本溢出部分顯示...

display:-webkit-box;

overflow:hidden;text-overflow:ellipsis;

word-break:break-all;

-webkit-box-orient:vertical;//子元素應(yīng)該被水平或垂直排列

-webkit-line-clamp:3;//3行后顯示省略號(hào)

多行文本溢出處理

position定位,static(不定位拱她，是默認(rèn)值),relative(相對(duì)定位),是相對(duì)于自己重新定位二驰，通過(guò)top, bottom, left,right屬性控制定位的偏移量,absolute(絕對(duì)定位),絕對(duì)定位是根據(jù)離它最近的父級(jí)定位元素進(jìn)行定位,fixed(固定定位),就是根據(jù)瀏覽器的視口進(jìn)行定位,z-index(元素屬性定位),默認(rèn)情況下，后面的元素會(huì)蓋住前面的元素秉沼，通過(guò)z-index屬性桶雀，可以修改定位元素的層疊順序矿酵，值越小越靠下，值越大越靠上背犯，可以為負(fù)數(shù)坏瘩，默認(rèn)值為0

opacity透明度盅抚，是設(shè)置整個(gè)元素的透明度漠魏，取值范圍是：0-1,0是全透明，1是不透明

結(jié)構(gòu)偽類(lèi)選擇器,:first-child(表示指定標(biāo)簽的一個(gè)):last-child(表示指定標(biāo)簽的最后一個(gè)):nth-child(n)(表示指定標(biāo)簽的第n個(gè)),odd表示所有奇數(shù)行,(也可以用2n-1)妄均，even表示所有偶數(shù)行柱锹，(也可以用2n)

:first-child計(jì)算索引時(shí)，統(tǒng)計(jì)的是所有的子元素丰包，:first-of-type計(jì)算索引時(shí)禁熏，只統(tǒng)計(jì)指定的子元素

iframe是內(nèi)嵌框架，用于當(dāng)前網(wǎng)頁(yè)中邑彪，嵌入另一個(gè)完整的網(wǎng)頁(yè)瞧毙，通過(guò)src屬性設(shè)置目標(biāo)網(wǎng)頁(yè)的地址，frameborder屬性設(shè)置邊框寄症，屬性值包括0和1,scrolling屬性設(shè)置是否顯示滾動(dòng)條宙彪，屬性值包括no和yes和auto

video標(biāo)簽用于播放視頻，src屬性設(shè)置視頻路徑,controls屬性設(shè)置顯示空間的按鈕有巧，autoplay屬性設(shè)置自動(dòng)播放释漆，loop屬性設(shè)置循環(huán)播放，可以通過(guò)source子標(biāo)簽篮迎，給video標(biāo)簽添加視頻路徑男图，該方式可以同時(shí)添加多個(gè)視頻路徑

audio是音頻標(biāo)簽

transition過(guò)渡屬性,css從一種狀態(tài)變化到另一種狀態(tài)的過(guò)程,transition四個(gè)屬性(all:表示過(guò)渡全部，過(guò)度時(shí)間甜橱，等待時(shí)間逊笆，動(dòng)作函數(shù))，如果設(shè)置了兩個(gè)時(shí)間岂傲，第一個(gè)是過(guò)渡時(shí)間难裆，第二個(gè)是過(guò)渡等待時(shí)間。過(guò)渡時(shí)間的單位是秒(s)毫秒(ms)

transition-timing-function設(shè)置過(guò)渡的動(dòng)作函數(shù)：屬性值:ease(表示先快速后慢速),linear(勻速),ease-in(加速),ease-out(減速),ease-in-out(先加速在減速)

animation動(dòng)畫(huà),屬性值沒(méi)有順序要求譬胎，如果同時(shí)設(shè)置動(dòng)畫(huà)時(shí)間和等待時(shí)間差牛，第一個(gè)是動(dòng)畫(huà)時(shí)間，第二個(gè)是等待時(shí)間堰乔。animation-iteration-count設(shè)置動(dòng)畫(huà)的播放次數(shù)偏化，infinite表示無(wú)限次，屬性值也可以給具體的次數(shù)镐侯。animation-play-state表示播放的狀態(tài)侦讨，默認(rèn)值running(播放),paused(暫停)驶冒，animation-direction動(dòng)畫(huà)的方向，normal(正向),reverse(反向),alternate(正反方向重復(fù)運(yùn)動(dòng))alternate-reverse(反正方向重復(fù)運(yùn)動(dòng))韵卤，animation-fill-mode表示填充模式骗污，就是動(dòng)畫(huà)結(jié)束后，元素回到什么位置沈条，屬性值包括：backwards(回到原點(diǎn)位置),forwards(停在結(jié)束位置),both(在開(kāi)始動(dòng)畫(huà)出處等待需忿，在動(dòng)畫(huà)結(jié)束處停止)

transform變形，scale()變形函數(shù)蜡歹，設(shè)置元素縮放屋厘，translate()變形函數(shù)，傳一個(gè)參數(shù)月而，表示X軸方向平移汗洒，傳兩個(gè)參數(shù)，第二個(gè)參數(shù)是Y軸方向平移父款，rotate()變形函數(shù)溢谤，設(shè)置元素旋轉(zhuǎn)，deg(度數(shù))憨攒，也可以是turn(圈)世杀，正數(shù)是順時(shí)針，負(fù)數(shù)是逆時(shí)針浓恶，skew()變形函數(shù)玫坛，設(shè)置元素傾斜，傳一個(gè)參數(shù)包晰，表示X軸方向傾斜度數(shù)湿镀，傳兩個(gè)參數(shù)，第二個(gè)參數(shù)是Y軸方向傾斜度數(shù)伐憾。

perspective勉痴，3D變形，屬性設(shè)置瀏覽器的視距树肃，就是告訴瀏覽器平移到眼睛的距離是多少蒸矛，一般范圍會(huì)控制在600px-1200px,

transform-style:preserve-3d;

transform:rotateY(45deg) rotateZ(-45deg);

animation:love 4s infinite alternate;

visibility屬性設(shè)置元素的顯示方式，屬性值包括：hidden(隱藏),visible(顯示)

backface-visibility屬性設(shè)置元素的背面顏色

backface-visibility:hidden,表示背面隱藏

i?標(biāo)簽胸嘴，專(zhuān)門(mén)用于定義字體標(biāo)簽

display屬性雏掠，彈性盒子，設(shè)置元素的類(lèi)型：none(不顯示),inline(行內(nèi)元素),block(塊級(jí)元素),inline-block(行內(nèi)塊元素)

flex-direction屬性劣像，設(shè)置子元素的排列方式乡话，屬性值包括：row(橫向),column(縱向),row-reverse(橫向方向),column-reverse(縱向方向)

justify-content子元素對(duì)齊方式抽莱，主軸的排列方式桅滋，屬性值包括：flex-start(開(kāi)始處對(duì)齊),flex-end(結(jié)束處對(duì)齊),center(居中對(duì)齊),space-between(平均分布襟沮，開(kāi)始和結(jié)束處頂格),space-around(平均分布怠褐，兩邊留有一半的間隔空間),space-evenly(平均分布，每個(gè)元素兩端的間隔相等)

align-items輔軸的排列方式闸婴，flex-start(開(kāi)始處對(duì)齊),flex-end(結(jié)束處對(duì)齊),center(居中對(duì)齊),baseline(首行文本的基線對(duì)齊),stretch(拉伸對(duì)齊)

注意：主軸不一定是橫向坏挠，排列方式如果是橫向，主軸就是橫向邪乍，排列方式如果是縱向降狠，主軸就是縱向

flex-wrap屬性，設(shè)置彈性盒子內(nèi)溺欧，子元素?fù)Q行方式喊熟，屬性值包括：nowrap(不換行),wrap(換行),wrap-reverse(反向換行)

align-content屬性柏肪，設(shè)置子元素?fù)Q行后姐刁，每行元素在輔軸上的對(duì)齊方式，屬性值包括：flex-start(開(kāi)始處對(duì)齊),flex-end(結(jié)束處對(duì)齊),center(居中對(duì)齊),space-between(平均分布烦味，開(kāi)始和結(jié)束處頂格),space-around(平均分布聂使，兩邊留有一半的間隔空間),space-evenly(平均分布，每個(gè)元素兩端的間隔相等)

總結(jié)：不換行谬俄，輔軸上的對(duì)齊方式用align-items,換行后柏靶，輔軸上的對(duì)齊方式用align-content,一旦設(shè)置了align-content,align-items屬性就失效了

order屬性，設(shè)置子元素的排列順序溃论，默認(rèn)值是1屎蜓，值越小越靠前，值越大越靠后

align-self屬性用于設(shè)置彈性子元素自身在 輔軸 方向上的對(duì)齊方式

flex屬性用于指定彈性子元素如何分配空間钥勋，.a為flex:5,.b為flex:1,表示剩余的空間炬转，a占5份，b占1份