標籤：圖片 並且 水平垂直 padding 多次 無法 scale 逗號 距離
CSS常用選取器
1、頁面中，所有的CSS代碼，需要寫入到<style></style>標籤中。style標籤的type屬性應該選擇text/css
2、CSS 注釋
CSS修改頁面中的所有標籤，必須藉助選取器選中。
選取器中，可以寫多對CSS屬性，用{}包裹：
每個屬性名稱與屬性值之間用:分隔，多對屬性之間，必須用;分隔。
3、【CSS常用選取器】
①標籤選取器
寫法： HTML標籤名{}
作用： 可以選中頁面中，所有與選取器同名的HTML標籤。
②類別選取器(class選取器)
寫法： .class名{}
調用： 在需要調用選取器樣式的標籤上，使用class="class名"調用選取器
優先順序： >標籤選取器
③識別碼選取器
寫法： #ID名{}
調用： 需要調用樣式的標籤，起一個id="ID名"
優先順序： ID選取器>class選取器
注意： 一個頁面中，不能出現同名ID
【Class選取器與ID選取器的區別】
寫法不同:class選取器用.聲明，ID選取器用#聲明；
優先順序不同： ID選取器>class選取器
作用範圍不同： class選取器可以多次調用，ID選取器只能使用一次。
【選取器的命名規範】
只能有字母、數字、底線、減號組成；
開頭不能是數字。也不能是只有一個減號。
一般，起名要求有語義，使用英文單詞與數位組合。
④通用選取器
寫法： *{}
作用： 可以選中頁面中所有的HTML標籤。
優先順序： 最低！！！
⑤並集選取器
寫法： 選取器1,選取器2,……,選取器n{}
生效規則： 多個選取器取並集，只要標籤滿足其中任意一個選取器，樣式即可生效。
⑥交集選取器
寫法： 選取器1選取器2……選取器n{} 所有選取器緊挨著，沒有分隔
生效規則： 多個選取器取交集，則必須滿足所有選取器的要求，才會生效
⑦後代選取器
寫法： 選取器1 選取器2 …… 選取器n{} 選取器之間空格分隔
生效規則： 只要滿足，後一選取器是前一個選取器的後代，即可成效。（後代包括子代、孫代、重孫代。。。）
通俗的講：只要後一個選取器，在前一個選取器裡面即可。
⑧子代選取器
寫法： 選取器1>選取器2>……>選取器n{} 選取器之間用>分隔
生效規則： 必須滿足，後一個選取器是前一個選取器的直接子代，才會生效。（中間不能間隔任何標籤）
如果需要兩個類名，用空格分隔
匯入方式和優先順序
1、【優先順序的權重問題】
CSS生效的第一原則是“近者優先”！即，哪個選取器作用於最裡層標籤，則這個選取器生效；
當選取器作用於同一層時，可以根據優先順序權重，進行累加計算：
ID選取器*100 > class選取器*10 > 標籤選取器*1
注意： 並集選取器，相當於多個選取器拆開寫，所以，並集選取器的優先順序不能累加。
當選取器作用於同一層，且優先順序權重相等時。則，寫在最後的選取器生效。
2、【引入CSS的三種方式】
① 行內樣式表：直接在HTML標籤中，使用style=""的方式引用；
<div style="height: 100px;"></div>
優點： 使用靈活，優先順序權重最高？
缺點：不符合W3C關於“內容與表現分離”的要求；不利於樣式複用；
② 內部樣式表： 在<head></head>標籤中，使用<style>標籤包裹CSS代碼；
特點： 一定程度的實現了HTML與CSS的分離，但是分離不夠徹底，沒有辦法多頁面共用樣式。
③ 外部樣式表： 將CSS單獨寫入CSS檔案中，並與HTML檔案關聯。
優點： 徹底實現HTML與CSS的分離，符合W3C規範，有利於多頁面複用統一樣式；
[匯入CSS檔案的兩種方式]
a、在<head>標籤中，使用link連結：
<link rel="stylesheet" type="text/css"
href="css/02-CSS.css" />
b、在<style>標籤中，使用@import匯入：
@import url("css/02-CSS.css");
[兩種匯入方式的區別]
① link屬於標準的HTML標籤，而@import不是標準標籤；
② link可以相容所有低版本瀏覽器，而@import只在CSS2之後能用；
③ link是將兩個檔案連結起來，起橋樑作用； 而@import相當於將CSS檔案複製到HTML檔案中；
④ link會在HTML檔案邊載入的過程中，邊連結CSS檔案；
@import會在HTML檔案全部載入完以後，再匯入CSS檔案；
綜上所述，我們使用link連結的方式，載入CSS檔案。
css常用文字屬性
1、CSS中的顏色表示方式
① 直接使用顏色的單詞表示：red、green、blue
② 使用顏色的十六進位數表示：#ff0000 #f00
六位元，兩兩分組，分別表示紅、綠、藍的配比；
③ rgb(0~255,0~255,0~255); 三位元，分別表示紅、綠、藍的配比
rgba(); 第四位元，表示透明度。
2、【CSS常用文字屬性】
a、字型、字型大小類：
① font-weight： 字型粗細。 bold-加粗、normal-正常、lighter-細體
也可以使用100-900數值，400表示normal，700表示bold
② font-style: 字型樣式。 italic-傾斜、normal-正常
③ font-size: 字型大小。 可以寫px單位，也可以寫%
200%表示瀏覽器預設大小(16px)的兩倍=32px
④ font-family: 字型系列(字型族)。
--- 可以直接寫字型名，也可以寫字型系列名。
--- 常用字型系列：serif-襯線體 sans-serif-非襯線體；
--- font-family可以接收多個值，用逗號分隔。表示優先使用第一個，如果沒有這個字型，依次向後使用。 通常，最後一個值放字型系列名；
eg: font-family: "黑體","微軟雅黑",sans-serif;
⑤ font縮寫形式：
--- 順序必須是：
--- font-weight font-style font-size/line-height font-family
--- 不同屬性之間，用空格分隔；
--- font-size/line-height必須一組，用/分隔；
--- font-family多個字型之間，用逗號分隔
---eg： font: bold italic 32px/50px "微軟雅黑",serif;
3、 字型顏色
① color： 字型顏色 可以使單詞、十六進位、RGB等
② opacity： 透明度，可選值0-1
[opacity和RGBA的區別]
--- RGBA本身可以設定顏色，而opacity必須配合其他顏色屬性來用；
---rgba僅僅是讓當前元素設定的顏色透明；
---而opacity，會讓當前元素裡面的所有文字、背景、子項目都透明；
4、行距、對齊、其他類
① line-height: 行高。 可以寫px單位、可以直接寫數字(表示預設行距的幾倍)、可以寫% (表示預設行距的百分比)
行高重要作用： 讓單行文字在div中垂直置中
設定行高等於div的高度，即可讓單行文字垂直置中。
② text-align：設定地區內的行級元素水平對齊left/center/right
③ letter-spacing： 字元間距，字與字之間的距離
④ text-decoration: 文本修飾；
underline-底線、overline-上劃線、line-through-刪除線、none
⑤ overflow： 設定超出地區文字的顯示方式。
---overflow: hidden; 超出地區的文字隱藏不顯示；
--- overflow: scroll; 無論文字多少，都會顯示水平垂直捲軸
---overflow: auto; 自動。文字多顯示捲軸，文字少，不顯示捲軸。
---可以使用overflow-x和overflow-y單獨修改兩個方向的捲軸
overflow-y: scroll; overflow-x: hidden;
⑥ text-overflow：設定行末多餘文字的顯示方式；
--- clip-多餘文字裁剪掉 ellipsis-多餘文字省略符號顯示
--- 顯示省略符號，需要配合white-space: nowrap;使用
---【重點】 設定行末顯示省略符號(三行代碼，缺一不可)
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
⑦ white-space: nowrap; 設定中文行末，不斷行顯示
⑧ text-indent: 首行縮排。
⑨ -webkit-text-stroke: 0.5px blue; 文字描邊。
-webkit-表示只有webkit核心瀏覽器生效、常見的有chrome、safari
⑩ text-shadow: 文字陰影，有四個屬性值，空格分隔；
---水平陰影距離，正數表示陰影右移，負數左移；
--- 垂直陰影距離，正數表示陰影下移，負數上移；
---- 陰影模糊距離， 0表示陰影一點不模糊；
---陰影的顏色；
---eg:text-shadow: 20px -10px 2px blue;
【CSS常用背景屬性】
1、 background-color： 背景色
2、 background-image: 背景圖。使用url("")選擇背景圖片。背景圖和背景色同時存在時，背景圖覆蓋背景色。
3、 background-repeat: 背景圖的重複方式。
no-repeat-不平鋪、repeat-平鋪、repeat-x-x軸平鋪、 repeat-y-y軸平鋪
4、 background-size： 背景圖的大小
[指定寬度高度]
--- 寬度高度的指定，可以寫px，也可以寫%(父容器寬高的百分比)
--- 當寫兩個屬性時，分別表示寬度、高度；
當寫一個屬性時，表示寬度，高度將會等比縮放；
[其他屬性值]
---- contain: 圖片等比縮放，直到寬或高中較大的一邊縮放到100%為止。(可能導致較短的一邊<100%,圖片無法蓋住全部地區)
--- cover： 圖片等比縮放，直到寬或高中較小的一邊縮放到100%為止。(可能導致較大的一邊>100%,圖片超出地區顯示不全)
5、 background-position： 背景圖位移量
--- 指定位置： left/center/right top/center/bottom
當，唯寫一個值時 ，另一個預設置中。
--- 指定座標： 兩個屬性分別表示 ：水平位移 垂直位移
① 座標的值，可以是px單位，也可以是百分數
② 當寫px單位時：
水平方向：正數右移 負數左移 ； 垂直方向： 正數下移 負數上移；
(左負右正 上負下正)
③ 當寫%百分數時：
一般只能是正數。表示的是，去掉圖片的寬高，剩餘空白地區的分布比例。 eg：background-position:30%; 水平方向去掉圖片寬度，剩餘地區3:7分。
6、list-style： 修改列表小黑點的樣式；
none 去掉小黑點；
7、url(): 可以使用url匯入一個小圖片，作為列表的標識符號
list-style: none;
8、 float: 浮動，可以實現讓區塊層級元素，在一行中顯示。
[偽類別選取器]
1、寫法： 偽類別選取器，在選取器後面，用:分隔，緊接偽類狀態；
eg ： .a:link
2、 超連結的偽類狀態：
:link - 未訪問狀態 :visited - 已訪問狀態
:hover - 滑鼠指上狀態 :active - 啟用選定狀態(滑鼠點下未松)
注意：當超連結多種偽類狀態同時存在時，必須按照link-visited-hover-active的順序，否則會導致部分選取器不生效；
3、 input的偽類狀態：
:hover :focus - 獲得焦點狀態 :active
注意input的多種狀態同時存在時，必須按照上面的順序；
4、 其他標籤，基本只用:hover事件
【margin 外邊距：】
1、唯寫一個值： 表示四周的外邊距均為指定的值；
2、寫兩個值： 第一個數為上下外邊距 第二個數為左右外邊距；
3、寫三個值： 分別表示上、右、下三個方向，左邊預設等於右邊；
4、寫四個值： 表示上、右、下、左 四條邊順時針方向；
5、 margin:0 auto; 設定區塊層級元素，在父容器中水平置中！！！！
【padding 內邊距：】
設定方式，與margin完全相同；
注意：設定padding，將會導致div地區被撐大！！！使用時必須注意div實際的寬高為多少！！！！！
【邊框】
1、設定邊框需要三個屬性： 寬度 樣式 顏色
原則上，三個屬性缺一不可，順序可以隨便修改；
2、可以使用top、right、bottom、left分別設定四個邊
盒模型
1、當父盒子包裹子盒子，給子盒子添加margin-top時，子盒子與父盒子的上邊線並不能分開，而是會導致兩個盒子同時下來。
【解決辦法】
--- 1、給父盒子添加一點padding-top;不推薦使用，會導致父盒子結構多餘1px的padding
--- 2、給父盒子添加1px額border-top；同樣會導致1px的多餘空間，不推薦使用；
--- 3、給父盒子或者子盒子添加浮動；可能會由於浮動，一定程度的影響頁面的布局；
--- 4、給父盒子添加overflow屬性，推薦使用；
2、[border-radius 圓角]
-- 1、border-radius可以接受8個屬性，分別表示：
X軸（左上 右上 右下 左下角）、Y軸（左上 右上 右下 左下角）
eg：border-radius:10px 20px 30px 40px/10px 20px 30px 40px
-- 2、縮寫形式
唯寫X軸，Y軸將預設等於X軸；
四個角寫不全，預設對角相等；
唯寫一個值，預設8個數相等；
eg：border-radius:50px 20px；
=border-radius:50px 20px/50px 20px；
=border-radius:50px 20px 50px 20px/50px 20px 50px 20px
--- 3、當圓角弧度>=正方形邊長一半，將會顯示為圓形；
3、[border-image 圖片邊框]
--- 1、border-image：一共可以放10個屬性值：
①圖片的路徑：url（）
②圖片的切片寬度：4個值，分別代表上、右、下、左四條邊。
通過4條切線切割，可以將圖片分為9宮格。9宮格四個角分別對應邊框的四個角(不會進行任何 展開)，9宮格四個邊分別對應四條邊框（會根據設定進行展開/平鋪/重複等操作）
注意：寫的時候必須不能帶px單位；
③邊框的寬度:4個值，分別代表上、右、下、左4條邊框的寬度；
注意：寫的時候，必須帶px單位，與切片寬度用/分隔；
④邊框的重複方式： ：stretch（展開） round（鋪滿） repeat（重複）
[repeat與round的區別]
round：會對四條邊進行適當的展開壓縮，確保四條邊可以重複整數;
repeat:會保持每條邊的長度比例不變，可能導致四角處，無法顯示一條完整的邊；
--- 2、屬性值的寫法：border-image:① ②/③px ④；
--- 3、border-image在webkit核心的瀏覽器中，必須帶-webkit-首碼；
【outline 外圍線】
顯示早border外面，並且不會佔據空間，可能會覆蓋四周的內容。
4、[box-shadow: 盒子陰影]
1/6個屬性值，用空格分隔：
①X軸陰影距離（必選）：可正可負，正-右移 負-左移；
②Y軸陰影距離(必選)：可正可負，正-下移 負-上移；
③陰影模糊半徑（可選）：只能為正，預設為0，數值越大，陰影越模糊；
④陰影擴充半徑（可選）：可正可負，預設為0.數值增大，陰影擴大；數值減小陰影縮小；
⑤陰影顏色（可選）：預設為黑色；
⑥內外陰影（可選）：預設為外陰影。inset為內陰影；
二、浮動
1、標準流中的塊級盒子，寬度將會自動伸展為100%；
而浮動的塊級盒子，寬度不會自動伸展，而是由內容撐開；
2、 當一個盒子浮動， 標準流中未浮動的其他盒子，將視浮動盒子不存在而佔據浮動盒子原來的位置。(浮動盒子，會蓋在這個盒子的上方)
但是，未浮動盒子中的文字內容，將會受到浮動盒子寬度的影響。(未浮動盒子中的內容，不會被浮動盒子蓋住)
3、由於第二條的原因。
可以給受影響的盒子，添加clear屬性，清除掉浮動盒子對自身的影響。
clear可選值：left-清除左浮動影響， right-清除右浮動影響；
both-同時清除左右浮動影響 ，常選；
4、 父盒子沒有指定高度。 如果子盒子沒有浮動，則父盒子的高度可以被子盒子撐開。
如果，父盒子中的所有子盒子都浮動，則父盒子高度將變為0；
[解決所有子盒子浮動，父盒子高度塌陷的問題]
① 給父盒子也添加浮動；
② 給父盒子添加overflow屬性； 推薦使用！！！
③ 在父盒子最後，添加一個高度為0的空div。 給這個div添加clear: both;屬性，清除掉浮動效果。
5、[盒子模型分類]
---1、 標準盒子(W3C盒子)： 我們設定的寬度和高度，僅僅包含content部分； 再添加padding或border，會導致盒子變大；
--- 2、 IE盒子(怪異盒子)： 我們設定的寬度和高度，包含content+padding+border； 再添加padding或border，會壓縮content地區，但盒子總大小不變；
[手動設定盒子類型]
box-sizing: border-box; 怪異盒子；
box-sizing: content-box; 標準盒子； 預設效果。
CSS新增屬性
一、display 屬性
可以設定元素以何種狀態顯示，可選值：
none: 隱藏元素；
block：顯示為區塊層級元素；
inline： 顯示為行級元素；
inline-block: 顯示為內聯區塊層級元素。 本身將是一個行級元素，但是，擁有區塊層級元素的所有屬性。 比如寬度、高度、margin、padding等。。。
[常見的inline-block層級的標籤]
<img /> <input /> <textarea></textarea> <td></td>
[隱藏一個元素的方式]
1、寬度或高度設為0px； 配合overflow:hidden; 屬性
2、 display:none; 顯示display:block;
3、 opacity: 0; 設為全透明。 但是元素的空間會佔據；
4、 visibility: hidden; 隱藏元素，但是元素所在空間依然會佔據。 與opacity: 0;效果很像；
顯示visibility隱藏的元素，visibility: visible;
二、【CSS3 新增的屬性首碼】
1、 -webkit- : Chrome/Safari瀏覽器；
2、 -moz- : Firefox瀏覽器；
3、 -ms- : IE瀏覽器；
4、 -o- : Opera 歐朋瀏覽器
【CSS 長度單位】
1、 px： 表示像素。長度是固定的，表示佔分辨率的幾個像素點；
2、 % ： 表示相對於預設值的百分比；
3、 em： 長度與元素的字型大小掛鈎。表示幾倍的字型大小。
4、 rem: 與根項目的字型大小掛鈎。即，與<html>標籤的font-size掛鈎，如果不設定則預設字型大小為16px;
[em與rem區別]
em是與當前元素自身的font-size掛鈎，如果當前元素沒有設定，則向上尋找最近的祖先元素字型大小，直到跟字型大小；
rem與當前元素字型大小無關，直接與根項目字型大小掛鈎。
三、【CSS3 背景屬性】
1、background-clip : 設定背景圖或背景色的裁切顯示地區。
>>> border-box從邊框外緣開始顯示；
>>> padding-box從邊框內緣開始顯示；
>>> content-box從文字內容地區開始顯示;
>>> 如果不在顯示地區的背景圖或者背景色，會被裁切掉不顯示；
2、 background-origin： 設定背景圖從哪開始定位。
>>> border-box: 背景圖左上方從邊框外緣開始；
>>> padding-box: 背景圖左上方從邊框內緣開始；
>>> contentbox: 背景圖左上方從文字內容區開始；
3、 background-origin不會改變背景圖顯示地區的大小，只是決定背景圖的左上方從哪裡開始定位；
background-clip 只負責裁切出顯示地區，但是並不關心背景圖定位在哪；
4、 background-attachment： 背景圖的附著方式；
>>> scroll: 背景圖跟隨地區滾動。預設效果；
>>> fixed: 背景圖充滿整個地區，並且背景圖是固定的，不隨捲軸滾動；
5、background 縮寫形式：縮寫順序
background:background-color background-image background-repeat background-atachment background-position;
transition: 過渡屬性，接受四個屬性值
① 設定那個CSS屬性，參與過渡； 可以直接指定all/none
② 過渡多少時間完成。 通常 .3s .5s
③ 過渡的樣式效果。 通常選ease；
④ 過渡延時幾秒後再開始。 可以省略不寫；
transition屬性可以同時定義多個過渡效果，用逗號隔開。
eg:transition: width .5s ease,height 1.5s ease;
四、[transform 定義變換屬性]
1、常用的變換函數：
>>> translate(10px,10px) 平移,第二個不寫預設為0
常用>>> scale(1.1)（1.1表示倍數） 縮放，第二個不寫，預設等於第一個
>>> rotate(90deg) 旋轉，預設繞Z軸轉可以使用rotateX()等
>>> skew(20deg,30deg) 扭曲，水平、垂直方向扭曲多少度；
2、transform可以同時實現多種變換，用空格分隔
eg: transform: skew(20deg) scale(1.3) translate(100px);
3、transform-origin： 定義變換起點，常用於旋轉變換。
可選值： left/center/right bottom/center/top
也可以直接指定X、Y軸座標點，第一個數為X軸；
例如：transform: rotate(90deg);
transform-origin:right bottom;
表示：繞右下角旋轉90度。
定位
[相對定位position](定位只是用來調整上下層關係)
1、使用position: relative；設定元素為相對定位元素；
2、使用top、right、bottom、left調整元素的位置；
當left和right同時存在時，left生效；當top和bottom同時存在時，top生效；
3、定位機制
①相對定位不會釋放掉元定位是相對於自己原來的定位。當top等屬性不指定時，元素位置不會發生改變；
②相對素在原有文檔流中的位置。不會影響其他文檔流元素的位置；
4、定位元素的Z軸重疊：
①定位元素，預設的Z軸高於普通文檔流元素；
②同為定位元素，“後來者居上”。（後面的蓋住前面的）
③可以使用z-index手動調節定位元素的上下層z軸順序；
z-index預設為0，而且只能作用於定位元素；
【絕對位置】
1、使用position: absolute；設定元素為絕對位置；
2、定位機制：
①相對於第一個非static定位的祖先元素進行定位。(相對於第一個已經進行定位的)
（即：相對於使用了relative、absolute、fixed定位的祖先元素進行定位）
②如果所有的祖先元素都未定位，則相對於瀏覽器左上方進行定位；
③使用absolute的元素，會從文檔流中完全刪除。原有空間會被釋放。
【固定定位 fixed】
1、使用position：fixed；設定固定定位；
固定定位，是一種特殊的絕對位置！！只是祖先元素無法使用定位鎖住；
2、定製機制： 永遠相對於瀏覽器的左上方進行定位，而且不隨捲軸的滾動而滾動；
【z-index 屬性】
1、作用：根據z-index屬性設定的數值，決定元素在z軸方向上的層疊順序；
2、使用要求：
①z-index 只能給定位元素調整層疊順序。
relative、absolute、fixed
②元素的z-index屬性，要考慮父容器z-index的約束
-----如果父容器設定了z-index屬性，則子容器的所有元素，將不能脫離父容器層次的約束。（即，父容器設定了z-index，則子容器只能以父容器的數值為準。再給子容器設定z-index，只能調整子容器在父容器層次之內的層疊次序）
-----如果父容器沒有設定z-index，或者設定為z-index：auto；則子容器調整z-index將不受父容器層次約束。
3、z-index：auto；和z-index：0；的異同：
①z-index：auto；是預設值，與z-index：0；處於同一平面；
②z-index：0 會約束子項目必須與父容器在同一平面；
z-index：auto不會約束子項目的層次；
[clip 屬性]
1、作用：clip屬性用於裁剪圖片標籤，顯示圖片的指定地區
2、使用要求：clip屬性，只能用於有absolute或fixed的圖片標籤上
3、clip屬性，接受一個rect（）函數，函數傳入四個值，分別表示上、右、下、左四條切線的位置
注意：與其他屬性不同的是，rect中的四個值，上、下兩個值的距離都是從上邊量取；左、右兩個值的距離都是從左邊量取
二、負邊距的使用
[1、實現區塊層級元素在父容器中水平置中]
①設定子容器為定位元素
② left：50%； margin-left：-width/2; （垂直置中）
top:50%; margin-top:-height/2 （水平置中）
2、【使用負邊距增大元素的寬度】
①子容器的寬度，不指定；只指定高度、或者由內容撐開高度；
②margin: 0 -50px；可以使左右兩邊，均超出父容器50px；
3、負邊距第二個作用的應用 解決div中多個li之間間隙的問題
CSS基本文法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
