基本css樣式簡介?background是背景顔色的縮寫如果要加背景圖片的大小，方式是：顔色 圖片 平鋪方式 位置 / 背景圖片大小，現在小編就來說說關于基本css樣式簡介?下面内容希望能幫助到你，我們來一起看看吧!

基本css樣式簡介

background是背景顔色的縮寫

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

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

linear-gradient()函數，用于設置背景的線性漸變，該函數的第一個參數值是漸變的方向，後面的參數值是漸變的顔色

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

radial-gradient()函數，用于設置背景的徑向漸變，該函數不需要傳漸變方向，直接傳漸變的顔色，從中間向外漸變

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

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

vertical-align樣式，圖片的對齊方式，可以設置圖片兩端文本相對于圖片的對齊方式，屬性值包括：top bottom middle

border的邊框類型：solid(實線),double(雙實線),dashed(虛線),dotted(點線)

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

list-style:none;是去掉列表符号

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

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

display屬性：

塊級元素：特點是獨占一行，可以識别寬高屬性。

行級元素：特點是按行顯示，一行不夠放，會自動換行，不識别寬高屬性，它的實際大小還是由内容決定。

inline-block表示行内塊元素，既有塊級元素可以識别寬高的特點，也有行内元素在一行的特點

box-shadow盒子陰影，屬性值分别是：X軸偏移量 Y軸偏移量 模糊半徑 陰影顔色，

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

第一個屬性值設置為inset，表示内陰影

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

border-radius是圓角邊框

overflow屬性用于設置溢出處理，屬性值包括：visible(溢出部分顯示，是默認值),hidden(溢出部分隐藏),scroll(溢出部分，通過滾動條查看),如果内容不溢出，還是會出現滾動條的區域,auto(自動，如果内容溢出，出現滾動條,沒有溢出，不會出現滾動條區域)

overflow:hidden; white-space:nowrap; text-overflow:ellipsis;文本的溢出處理,三個缺一不可，overflow溢出部分隐藏，white-space屬性設置空白處理，屬性值nowrap，表示設置文本不換行，屬性值pre,表示保留空格，text-overflow屬性設置文本溢出處理，屬性值ellipsis表示文本溢出部分顯示...

display:-webkit-box;

overflow:hidden;text-overflow:ellipsis;

word-break:break-all;

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

-webkit-line-clamp:3;//3行後顯示省略号

多行文本溢出處理

position定位,static(不定位，是默認值),relative(相對定位),是相對于自己重新定位，通過top, bottom, left,right屬性控制定位的偏移量,absolute(絕對定位),絕對定位是根據離它最近的父級定位元素進行定位,fixed(固定定位),就是根據浏覽器的視口進行定位,z-index(元素屬性定位),默認情況下，後面的元素會蓋住前面的元素，通過z-index屬性，可以修改定位元素的層疊順序，值越小越靠下，值越大越靠上，可以為負數，默認值為0

opacity透明度，是設置整個元素的透明度，取值範圍是：0-1,0是全透明，1是不透明

結構僞類選擇器,:first-child(表示指定标簽的一個):last-child(表示指定标簽的最後一個):nth-child(n)(表示指定标簽的第n個),odd表示所有奇數行,(也可以用2n-1)，even表示所有偶數行，(也可以用2n)

:first-child計算索引時，統計的是所有的子元素，:first-of-type計算索引時，隻統計指定的子元素

iframe是内嵌框架，用于當前網頁中，嵌入另一個完整的網頁，通過src屬性設置目标網頁的地址，frameborder屬性設置邊框，屬性值包括0和1,scrolling屬性設置是否顯示滾動條，屬性值包括no和yes和auto

video标簽用于播放視頻，src屬性設置視頻路徑,controls屬性設置顯示空間的按鈕，autoplay屬性設置自動播放，loop屬性設置循環播放，可以通過source子标簽，給video标簽添加視頻路徑，該方式可以同時添加多個視頻路徑

audio是音頻标簽

transition過渡屬性,css從一種狀态變化到另一種狀态的過程,transition四個屬性(all:表示過渡全部，過度時間，等待時間，動作函數)，如果設置了兩個時間，第一個是過渡時間，第二個是過渡等待時間。過渡時間的單位是秒(s)毫秒(ms)

transition-timing-function設置過渡的動作函數：屬性值:ease(表示先快速後慢速),linear(勻速),ease-in(加速),ease-out(減速),ease-in-out(先加速在減速)

animation動畫,屬性值沒有順序要求，如果同時設置動畫時間和等待時間，第一個是動畫時間，第二個是等待時間。animation-iteration-count設置動畫的播放次數，infinite表示無限次，屬性值也可以給具體的次數。animation-play-state表示播放的狀态，默認值running(播放),paused(暫停)，animation-direction動畫的方向，normal(正向),reverse(反向),alternate(正反方向重複運動)alternate-reverse(反正方向重複運動)，animation-fill-mode表示填充模式，就是動畫結束後，元素回到什麼位置，屬性值包括：backwards(回到原點位置),forwards(停在結束位置),both(在開始動畫出處等待，在動畫結束處停止)

transform變形，scale()變形函數，設置元素縮放，translate()變形函數，傳一個參數，表示X軸方向平移，傳兩個參數，第二個參數是Y軸方向平移，rotate()變形函數，設置元素旋轉，deg(度數)，也可以是turn(圈)，正數是順時針，負數是逆時針，skew()變形函數，設置元素傾斜，傳一個參數，表示X軸方向傾斜度數，傳兩個參數，第二個參數是Y軸方向傾斜度數。

perspective，3D變形，屬性設置浏覽器的視距，就是告訴浏覽器平移到眼睛的距離是多少，一般範圍會控制在600px-1200px,

transform-style:preserve-3d;

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

animation:love 4s infinite alternate;

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

backface-visibility屬性設置元素的背面顔色

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

i 标簽，專門用于定義字體标簽

display屬性，彈性盒子，設置元素的類型：none(不顯示),inline(行内元素),block(塊級元素),inline-block(行内塊元素)

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

justify-content子元素對齊方式，主軸的排列方式，屬性值包括：flex-start(開始處對齊),flex-end(結束處對齊),center(居中對齊),space-between(平均分布，開始和結束處頂格),space-around(平均分布，兩邊留有一半的間隔空間),space-evenly(平均分布，每個元素兩端的間隔相等)

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

注意：主軸不一定是橫向，排列方式如果是橫向，主軸就是橫向，排列方式如果是縱向，主軸就是縱向

flex-wrap屬性，設置彈性盒子内，子元素換行方式，屬性值包括：nowrap(不換行),wrap(換行),wrap-reverse(反向換行)

align-content屬性，設置子元素換行後，每行元素在輔軸上的對齊方式，屬性值包括：flex-start(開始處對齊),flex-end(結束處對齊),center(居中對齊),space-between(平均分布，開始和結束處頂格),space-around(平均分布，兩邊留有一半的間隔空間),space-evenly(平均分布，每個元素兩端的間隔相等)

總結：不換行，輔軸上的對齊方式用align-items,換行後，輔軸上的對齊方式用align-content,一旦設置了align-content,align-items屬性就失效了

order屬性，設置子元素的排列順序，默認值是1，值越小越靠前，值越大越靠後

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

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!