基本css樣式簡介（Css樣式大總結）

2023-04-14 11:35:28 2

基本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份