css總結

什麼是css

用於美化頁面, 裝飾頁面的

css樣式規則

#dv {width: 32px; height: 40; color:"red"}

1, 選擇器後面跟一個花括號, 選擇器和花括號之間要有一個空格

2, 花括號內有多個鍵值對, 每一對後面跟個分號

3, 數值不用雙引號, 字符串需要雙引號

css樣式屬性

font-size: 字號大小

​ 單位:

• em: 相對於文本字體大小
• px:像素
• in: 英寸
• cm:釐米
• mm: 毫米
• pt:點

font-family: 字體

​ p{ font-family:“微軟雅黑”;} 直接寫中文xp系統不支持

​ 方法一: 寫對應的英文

​ 方法二: 寫對象的編碼

字體名稱	英文名稱	Unicode 編碼
宋體	SimSun	\5B8B\4F53
新宋體	NSimSun	\65B0\5B8B\4F53
黑體	SimHei	\9ED1\4F53
微軟雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷體_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隸書	LiSu	\96B6\4E66
幼園	YouYuan	\5E7C\5706
華文細黑	STXihei	\534E\6587\7EC6\9ED1
細明體	MingLiU	\7EC6\660E\4F53
新細明體	PMingLiU	\65B0\7EC6\660E\4F53

font-weight: 字體粗細

​ font-weight屬性用於定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。

​ 數字 400 等價於 normal，而 700 等價於 bold。 但是我們更喜歡用數字來表示。

font-style: 字體風格

​ font-style屬性用於定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：

​ normal：默認值，瀏覽器會顯示標準的字體樣式。

​ italic：瀏覽器會顯示斜體的字體樣式。

​ oblique：瀏覽器會顯示傾斜的字體樣式。

font綜合設置

​ 選擇器{font: font-style font-weight font-size/line-height font-family;}

​ 使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。

​ 注意：其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

選擇器

標籤選擇器 (元素選擇器)

標籤名 {鍵:值;鍵:值}; 
例如: div {width:300px; height:300px}
<div></div>

類選擇器

這個類名可以被多個標籤使用, (多個標籤起同一個類名)

.類名 {鍵:值;鍵:值}; 
例如: .dv {width:300px; height:300px}
    <div class = "dv"></div>

多類名選擇器

一個標籤名, 有多個選擇器名

#noe {鍵:值;鍵:值}; 
#tow {鍵:值;鍵:值}; 
#three {鍵:值;鍵:值}; 
例如: #noe #tow #three {width:300px; height:300px}
    <div id="noe tow three"></div>

id選擇器

這個id名只能使用一次, (只能有一個標籤使用)

#id名 {鍵:值;鍵:值}; 
例如: #dv {width:300px; height:300px}
    <div id="dv"></div>

通配符選擇器

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
例如: * {margin: 0; padding: 0;}

僞選擇器

連接僞類選擇器

:link 未訪問的連接

visited 已訪問的連接

:hover 鼠標移動到連接上

active 選定的連接

a {   /* a是標籤選擇器  所有的鏈接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
		}
a:hover {   /* :hover 是鏈接僞類選擇器 鼠標經過 */
			color: red; /*  鼠標經過的時候，由原來的 灰色 變成了紅色 */
}

結構(位置)僞類選擇器

:first-child 選取屬於其父元素的首個子元素的指定選擇器

:last-child 選取屬於其父元素的最後一個字元素的指定選擇器

:nth-child(N) 匹配屬於父元素的第N個字元素, 不論元素類型

:nth-last-child(N) 選取匹配屬於其元素的第N個元素的每一個元素,不論元素類型, 從最後一個元素開始計數

li:first-child { /*  選擇第一個孩子 */
        		color: pink; 
        	}
li:last-child {   /* 最後一個孩子 */
        		color: purple;
        	}
li:nth-child(4) {   /* 選擇第4個孩子  n  代表 第幾個的意思 */ 
				color: skyblue;
        	}

目標僞類選擇器

:target, 用於選取當前活動的目標元素

:target {
		color: red;
		font-size: 30px;
}

複合選擇器

交集選擇器

交集選擇器由兩個選擇器構成, 期中第一個爲標籤選擇器, 第二個爲類選擇器, 中間不能有空格

含義: 交集爲並且的意思, (選中的是P標籤, 並且這個標籤的類名叫noe)

標籤名.類名 {鍵:值; ...}
例如: p.noe {width:200px; height:200px}

並集選擇器

由多個選擇器 構成, 可以是標籤選擇器,類選擇器id選擇器. 中間由逗號隔開

含義: 和的意思, (P, ,noe,#tow,三個都這個設置)

標籤名,.類名,#id名 {鍵:值; ...}
例如: p,.noe,#tow {width:200px; height:200px}

後代選擇器 (包含選擇器)

由多個選擇器組成, 可以是標籤,類名, id名, 中間由空格隔開

含義: 層級選中 (選擇爺元素下的, 子元素下的, 曾孫元素, 將該元素設置屬性),

注意: 可以隔代選擇 ,只要是子孫(被包含的)都可以選擇

標籤名 .類名 #id名 {鍵:值; ...}
例如: p .noe #tow {width:200px; height:200px}

子元素選擇器

由多個選擇器組成, 可以是標籤,類名, id名, 中間由大於號隔開

含義: 選擇爺元素下的, 父元素下的, 子元素下的, 曾孫元素, 將該元素設置屬性

注意: 只能選擇自己的子元素, 一層一層選擇下去, 不能跳過子元素直接選中曾孫元素

標籤名>.類名>#id名 {鍵:值; ...}
例如: p>.noe>#tow {width:200px; height:200px}

屬性選擇器

**選擇器	**示例	**含義
E[attr]****		存在attr屬性即可
E[attr=val]****		屬性值完全等於val
E[attr*=val]****		屬性值裏包含val字符並且在“任意”位置
E[attr^=val]****		屬性值裏包含val字符並且在“開始”位置
E[attr$=val]****		屬性值裏包含val字符並且在“結束”位置

/* 獲取到 擁有 該屬性的元素 */
li[type] {
  border: 1px solid gray;
}
/* 獲取 屬性等於某個值的 元素 屬性值 可以使用 引號進行包裹 */
li[type="vegetable"] {
  background-color: green;
}
/* 使用空格分隔的 多個屬性 其中有某個屬性即可獲取 */
li[type~="hot"] {
  font-size: 40px;
}
/* 獲取以某個屬性開頭的語法  */
li[color^='green'] {
  background-color: orange;
}
/* 獲取以某個值 結尾的屬性 */
li[type$='t']{
  color: hotpink;
  font-weight: 900;
}

/* 獲取 屬性中 擁有某個值的 元素 */
li[type*=ea] {
  font-size: 100px;
}
/*  如果屬性的值 只有very 也能夠獲取  用來獲取 多個屬性 並且 使用-連接 */
li[price|='very'] {
  background-color: darkred;
}

<ul>
<li\ type=‘fruit’ color=‘green’>西瓜</li>
<li\ type=‘vegetable’ color=‘greenyellow’>西蘭花</li>
<li\ type=‘meat’>牛肉</li>
<li\ type=‘meat hot’>豬肉</li>
<li\ type=‘drink hot’>可樂</li>
<li\ type=‘drink hot’>雪碧</li>
<li\ price=‘very-cheap’>紅酒</li>
<li\ price=‘very’>白酒</li>
</ul>

僞元素選擇器

1. E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）

2. E::first-line 文本第一行；

3. E::selection 可改變選中文本的樣式；

   p::first-letter {
     font-size: 20px;
     color: hotpink;
   }
   
   /* 首行特殊樣式 */
   p::first-line {
     color: skyblue;
   }
   
   p::selection {
     /* font-size: 50px; */
     color: orange;
   }
   
   

4、E::before和E::after

在E元素內部的開始位置和結束位創建一個元素，該元素爲行內元素，且必須要結合content屬性使用。

div::befor {
  content:"開始";
}
div::after {
  content:"結束";
}

E:after、E:before 在舊版本里是僞元素，CSS3的規範裏“:”用來表示僞類，“::”用來表示僞元素，但是在高版本瀏覽器下E:after、E:before會被自動識別爲E::after、E::before，這樣做的目的是用來做兼容處理。

“:” 與 “::” 區別在於區分僞類和僞元素

css外觀屬性

color: 文本顏色

有三種取值

1.預定義的顏色值，如red，green，blue等。

2.十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。

3.RGB代碼，如紅色可以表示爲rgb(255,0,0)或rgb(100%,0%,0%)。

line-height: 行間距

有三種單位

​ px, em, %

text-align: 水平對齊

1, left: 左對齊(默認)

2, right: 右對齊

3, center: 居中

text-index: 首行縮進

​ 單位 em, 一個 em 就是一個字的寬

letter-spacing: 字間距

​ 字與字之間的距離, 單位可以是數值, 默認值爲normal

word-spacing: 單詞間距

​ 單詞與單詞之間的距離, 單位可以是數值, 默認值爲normal

顏色透明度

​ color: rgba(r,g,b,a) a 是alpha 透明的意思 取值範圍 0~1之間 color: rgba(0,0,0,0.3)

text-shadow:文字陰影

​ 給文字添加陰影

​ text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;

​ h-shadow: 必寫, 水平陰影, 允許負值

​ v-shadow: 必寫, 垂直陰影, 運行負值

​ blur: 可選 模糊距離

​ color: 可選

​

css書寫位置

行內樣式 (內聯樣式)

​ 將樣式直接寫的標籤中

內部樣式(內嵌式)

​ 在head內, 寫style標籤, 在style標籤中寫

外部樣式 (外鏈式)

​ 1, 寫一個css文件, 直接寫在文件內

​ 2, 在需要的頁面, head中引入

<link rel="stylesheet" href="xxx.css">

display: 標籤顯示模式

塊級元素block-level

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。

行內元素inline-level

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。

塊元素 和 行內元素的區別

塊級元素特點:
	1, 總是從新的一行開始
	2, 高,寬,外邊距, 內邊距都 可以控制
	3, 默認寬爲容器的100%
	4, 可以容納行內元素和其他元素

行內元素的特點:
	1, 和相鄰的行內元素在同一行
	2, 高寬無效,但是水平方向的mrign和padding可以設置,垂直方向無效
	3, 默認高度就是內容的高度
	4, 行內元素只能容納文本或其他行內元素

行內塊元素inline-block

在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，可以對它們設置寬高和對齊屬性，有些資料可能會稱它們爲行內塊元素。

行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。
（2）默認寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。

css背景background

background-image背景圖片

background-image : none | url (url) 

none: 無背景圖(默認)

url: 圖片地址, 不要雙號

background-repeat背景平鋪

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

repeat : 　背景圖像在縱向和橫向上平鋪（默認的）

no-repeat : 　背景圖像不平鋪

repeat-x : 　背景圖像在橫向上平鋪 (單橫向平鋪)

repeat-y : 　背景圖像在縱向平鋪 (單縱向平鋪)

background-position背景位置

background-position : length || length

background-position : position || position 

length : 　百分數 | 由浮點數字和單位標識符組成的長度值
position : 　top | center | bottom | left | center | right

1, 設置或檢索對象的背景圖像位置。必須先指定background-image屬性。

2, 默認值爲：(0% 0%)。

3, 如果只指定了一個值，該值將用於橫座標。縱座標將默認爲50%。第二個值將用於縱座標。

background-attachement背景附着

background-attachment : scroll | fixed 

scroll : 　背景圖像是隨對象內容滾動
fixed : 　背景圖像固定

說明： 設置或檢索背景圖像是隨對象內容滾動還是固定的。

背景簡寫

background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

rgba(0,0,0,0.3)背景透明(CSS3)

CSS3支持背景半透明的寫法語法格式是:

background: rgba(0,0,0,0.3);

最後一個參數是alpha 透明度 取值範圍 0~1之間

注意： 背景半透明是指盒子背景半透明， 盒子裏面的內容不收影響。

同樣， 可以給 文字和邊框透明 都是 rgba 的格式來寫。

color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);

###### background-size背景縮放(CSS3)

background-size: 300px 100px;
background-size: contain;
background-size: cover; 

a) 可以設置長度單位(px)或百分比（設置百分比時，參照盒子的寬高）

b) 設置爲cover時，會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢出部分則會被隱藏。

c) 設置爲contain會自動調整縮放比例，保證圖片始終完整顯示在背景區域。

多背景(CSS3)

以逗號分隔可以設置多背景，可用於自適應佈局

background-image: url('images/gyt.jpg'),url('images/robot.png');

css三大特性

層疊 繼承 優先級

css層疊

是指css的樣式重複, 當瀏覽器發現兩個選擇器設置同一個元素時, 會將另一個的選擇器樣式覆蓋掉,

如果出現樣式衝突, 會按照css書寫的順序, 以最後的樣式爲標準

css基礎

有兩個元素是嵌套關係(父子元素), 給父元素設置樣式, 子元素也會基礎到父元素的樣式

繼承樣式的權重爲0。即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都爲0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。

css優先級

​ 默認樣式 < 基礎樣式 < 通配符 < 標籤名 < class < id < 行內樣式

​ 設置!important該樣式優先級最大

div {
           width: 300px;
           height: 300px;
           background-color: red !important; //無法基礎, 基礎權重爲0
       }

css的特殊性

關於CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity，我們稱爲CSS 特性或稱非凡性，它是一個衡量CSS值優先級的一個標準 具體規範入如下：

specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進制，級別之間不可超越。

繼承或者* 的貢獻值	0,0,0,0
每個元素（標籤）貢獻值爲	0,0,0,1
每個類，僞類貢獻值爲	0,0,1,0
每個ID貢獻值爲	0,1,0,0
每個行內樣式貢獻值	1,0,0,0
每個!important貢獻值	∞ 無窮大

例如:

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

注意： 數位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類選擇器的情況。

盒子模式

CSS就三個大模塊： 盒子模型 、 浮動 、 定位

盒子邊框border

border : border-width  border-style  border-color 
例如: border: 1px solid red;

邊框屬性—設置邊框樣式（border-style）

邊框樣式用於定義頁面中邊框的風格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認值）

solid：邊框爲單實線(最爲常用的)

dashed：邊框爲虛線

dotted：邊框爲點線

double：邊框爲雙實線

設置單邊樣式

設置內容	樣式屬性	常用屬性值
上邊框	border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度 樣式 顏色;
下邊框	border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度 樣式 顏色;
左邊框	border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度 樣式 顏色;
右邊框	border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度 樣式 顏色;
樣式綜合設置	border-style:上邊 [右邊 下邊 左邊];	none無（默認）、solid單實線、dashed虛線、dotted點線、double雙實線
寬度綜合設置	border-width:上邊 [右邊 下邊 左邊];	像素值
顏色綜合設置	border-color:上邊 [右邊 下邊 左邊];	顏色值、#十六進制、rgb(r,g,b)、rgb(r%,g%,b%)
邊框綜合設置	border:四邊寬度 四邊樣式 四邊顏色;

圓角邊框

Border-radius: 水平半徑/垂直半徑；
border-radius: 左上角  右上角  右下角  左下角;

單位: px || %

內邊距padding

padding-top:上內邊距

padding-right:右內邊距

padding-bottom:下內邊距

padding-left:左內邊距

當關鍵字後面跟的數值不一樣時, 表達的意思也不一樣

值的個數	表達意思
1個值	padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3像素
2個值	padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3個值	padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4個值	padding:上內邊距 右內邊距 下內邊距 左內邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針

外邊距marign

margin屬性用於設置外邊距。 設置外邊距會在元素之間創建“空白”， 這段空白通常不能放置其他內容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

margin:上外邊距 右外邊距 下外邊距 左外邊

取值順序跟內邊距相同。

清除元素的默認內外邊距

元素之間是有默認內外邊距的

* {
   padding:0;         /* 清除內邊距 */
   margin:0;          /* 清除外邊距 */
}

邊距合併

1, 如果有兩個元素是垂直上下的關係時.	
當上元素設置了下外邊距爲20, 下元素設置了上外邊距爲10. 這個邊距將會合並, 最後的邊距爲最大的哪一方

解決方法:  避免這種行爲即可

2, 如果有兩個元素嵌套垂直關係.	
父元素沒有上內邊距及邊框, 父元素的上外邊距和子元素的上外邊距發生合併, 合併邊距爲兩者最大的那個值, 即使父元素的上外邊距是0也會發生合併

解決方法:
    1. 可以爲父元素定義1像素的上邊框或上內邊距。
    2. 可以爲父元素添加overflow:hidden

盒子的大小

盒子的總寬度= width+左右內邊距之和+左右邊框寬度之和+左右外邊距之和
盒子的總高度= height+上下內邊距之和+上下邊框寬度之和+上下外邊距之和

注意:

​ 1、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（ img 標籤和 input除外）。

​ 2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況

盒子模型佈局穩定性

按照 優先使用 寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin）。

原因：

1. margin 會有外邊距合併 還有 ie6下面margin 加倍的bug 所以最後使用。

2. padding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。

3. width 沒有問題

盒子陰影

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色  內/外陰影；

1. 前兩個屬性是必須寫的。其餘的可以省略。
2. 外陰影 (outset) 但是不能寫    默認      想要內陰影  inset 
3. 取值爲 正整數

浮動float

標準流:

​ 又叫, 普通流, 文檔流.

​ 當一個頁面元素的排版從上到下, 從左到右依次排序, 快元素會獨佔一行, 行內元素會在一行, 的時候就叫普通流

元素的浮動是指設置了浮動屬性的元素會脫離標準流, 移動到其父元素的中指定的位置

選擇器 {float:屬性值;}

取值:
	left 元素向左浮動
	right: 元素向右浮動
	none: 元素不浮動(默認值)

浮動的特性

1. 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的範圍。

2. 當兩個塊元素浮動時, 會並排顯示, 加了浮動的元素,不佔位置, 位置將會留出來給標準流的元素

3. 元素浮動後具有行內塊元素的特性

清除浮動

​ 有兩個元素是嵌套關係, 父元素沒有高度, 子元素浮動了, 父元素的高度會顯示0

方法一

選擇器{clear:屬性值;}

取值:
	left:	清除左邊的浮動影響
	right:	清除右邊浮動的影響
	both:	同時清除兩邊的浮動影響

方法二

是W3C推薦的做法是通過在浮動元素末尾添加一個空的標籤例如

，或則其他標籤br等亦可。

優點： 通俗易懂，書寫方便

缺點： 添加許多無意義的標籤，結構化較差。 我只能說，w3c你推薦的方法我不接受，你不值得擁有。。。

方法三: overflow

可以給父級添加： overflow爲 hidden|auto|scroll  都可以實現。

優點： 代碼簡潔

缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。

方法四: 使用after僞元素清除浮動

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 專有 */

優點： 符合閉合浮動思想 結構語義化正確

缺點： 由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

方法五: 使用before和after雙僞元素清除浮動

使用方法：

.clearfix:before,.clearfix:after { 
  content:".";
  display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

優點： 代碼更簡潔

缺點： 由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

定位position

將元素定在某個位置就是定位

元素的定位屬性主要包括定位模式和邊偏移兩部分。

1、邊偏移

邊偏移屬性	描述
top	頂端偏移量，定義元素相對於其父元素上邊線的距離
bottom	底部偏移量，定義元素相對於其父元素下邊線的距離
left	左側偏移量，定義元素相對於其父元素左邊線的距離
right	右側偏移量，定義元素相對於其父元素右邊線的距離

也就說，以後定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等

2、定位模式

在CSS中，position屬性用於定義元素的定位模式，其基本語法格式如下：

選擇器{position:屬性值;}

position屬性的常用值

值	描述
static	自動定位（默認定位方式）
relative	相對定位，相對於其原文檔流的位置進行定位
absolute	絕對定位，相對於其上一個已經定位的父元素進行定位
fixed	固定定位，相對於瀏覽器窗口進行定位

靜態定位static

​ 恢復標準流, left,right等都不能使用, 是默認值

相對定位relative

​ 配置後在標準流的位置還在, 元素相對於該位置定位

絕對定位absolute

​ 配置後不會保留原先的位置, 元素會根據父元素定位, 如果父元素沒有定位, 會根據瀏覽器定位, 瀏覽器滑動, 定位元素也會跟着滑動, 一直保持這個距離

固定定位fixed

​ 固定定位的元素跟父親沒有任何關係，只認瀏覽器。

​ 固定定位完全脫標，不佔有位置，不隨着滾動條滾動。

疊放次序z-index

多個元素定位時, 可能會層疊覆蓋掉其他的元素,

z-index=1;
取值爲數值,  正整數, 或負整數

1. z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上。

2. 如果取值相同，則根據書寫順序，後來居上。

3. 後面數字一定不能加單位。

4. 只有相對定位，絕對定位，固定定位有此屬性，其餘標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。

四種定位總結

定位模式	是否脫標占有位置	是否可以使用邊偏移	移動位置基準
靜態static	不脫標，正常模式	不可以	正常模式
相對定位relative	不脫標，佔有位置	可以	相對自身位置移動
絕對定位absolute	完全脫標，不佔有位置	可以	相對於定位父級移動位置
固定定位fixed	完全脫標，不佔有位置	可以	相對於瀏覽器移動位置

定位模式轉換

跟 浮動一樣， 元素添加了 絕對定位和固定定位之後， 元素模式也會發生轉換， 都轉換爲 行內塊模式，

元素的顯示與隱藏

display 顯示

display 設置或檢索對象是否及如何顯示。

display : none 隱藏對象 與它相反的是 display:block 除了轉換爲塊級元素之外，同時還有顯示元素的意思。

特點： 隱藏之後，不再保留位置。

visibility 可見性

設置或檢索是否顯示對象。

visible : 　對象可視

hidden : 　對象隱藏

特點： 隱藏之後，繼續保留原有位置。（停職留薪）

overflow 溢出

檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。

visible : 　不剪切內容也不添加滾動條。

auto : 　 超出自動顯示滾動條，不超出不顯示滾動條

hidden : 　不顯示超過對象尺寸的內容，超出的部分隱藏掉

scroll : 　不管超出內容否，總是顯示滾動條

CSS用戶界面樣式

鼠標樣式cursor

設置鼠標樣子

cursor :  default  正常 | pointer  小手  | move  移動  |  text  文本

輪廓 outline

是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。

outline : outline-color outline-style  outline-width 

防止拖拽文本域resize

resize：none 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文本域

vertical-align 垂直對齊

vertical-align 不影響塊級元素中的內容對齊，它只針對於 行內元素或者行內塊元素，特別是行內塊元素， 通常用來控制圖片和表單等。

vertical-align : baseline |top |middle |bottom 

baseline: 文字和圖片基線對齊

middle: 文字和圖片中間對齊

top: 文字和圖片頭部對齊

去除圖片底側空白縫隙

如果一個元素沒有基線，比如圖片或者表單等行內塊元素，則他的底線會和父級盒子的基線對齊。 這樣會造成一個問題，就是圖片底側會有一個空白縫隙。

解決方法:

​ 1, 給img vertical-align:middle | top等等。 讓圖片不要和基線對齊。

​ 2, 給img 添加 display：block; 轉換爲塊級元素就不會存在問題了。

css精靈技術

CSS精靈是一種處理網頁背景圖像的方式。它將一個頁面涉及到的所有零星背景圖像都集中到一張大圖中去，然後將大圖應用於網頁，這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像即可全部展示出來

將圖標生成兼容性字體文件包

推薦網站： http://icomoon.io

阿里巴巴矢量圖庫

http://www.iconfont.cn/

fontello

http://fontello.com/

在線定製你自己的icon font字體圖標字庫，也可以直接從GitHub下載整個圖標集，該項目也是開源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

字庫 目前已經有369個圖標了。

Glyphicon Halflings

http://glyphicons.com/

這個字體圖標可以在Bootstrap下免費使用。自帶了200多個圖標。

Icons8

https://icons8.com/

提供PNG免費下載，像素大能到500PX

圖標使用

1. 輸入阿里矢量圖庫地址

2. 搜索自己需要的的圖標

3. 點擊放入購物車
   

   3.點擊購物車
   
   ​ 4.下載代碼
   

​

​ 5.解壓文件包, 將括號中的文件複製到需要的項目中

​ 6.打開index.html文件

​ 7.查看使用教程

滑動門

設置文本背景時, 文本長度不一樣, 背景需要更改, 不想更改的情況下使用該技術

核心技術就是利用CSS精靈（主要是背景位置）和盒子padding撐開寬度, 以便能適應不同字數的導航欄。

一般的經典佈局都是這樣的：

<li>
  <a href="#">
    <span>導航欄內容</span>
  </a>
</li>

li {
    float: left;
    height: 33px;
    line-height: 33px;
    background: url(img/ao.png); /*設置爲背景圖片 */
    padding-left: 15px; 
    margin: 0 10px;
}

a {
    display: inline-block;
    height: 33px;
    background: url(img/ao.png) no-repeat right top; /*給a標籤也設置背景*/
    padding-right: 15px; /*將右邊補齊*/
}

伸縮佈局(CSS3)

CSS3在佈局方面做了非常大的改進，使得我們對塊級元素的佈局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用。

主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向

側軸：與主軸垂直的軸稱作側軸，默認是垂直方向的

方向：默認主軸從左向右，側軸默認從上到下

主軸和側軸並不是固定不變的，通過flex-direction可以互換。

Flex佈局的語法規範經過幾年發生了很大的變化，也給Flexbox的使用帶來一定的侷限性，因爲語法規範版本衆多，瀏覽器支持不一致，致使Flexbox佈局使用不多

2、各屬性詳解****

a、flex-direction調整主軸方向（默認爲水平方向）

b、justify-content調整主軸對齊

c、align-items調整側軸對齊

d、flex-wrap控制是否換行

e、align-content堆棧（由flex-wrap產生的獨立行）對齊

f、flex-flow是flex-direction、flex-wrap的簡寫形式

g、flex子項目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配

h、order控制子項目的排列順序，正序方式排序，從小到大

此知識點重在理解，要明確找出主軸、側軸、方向，各屬性對應的屬性值

過渡(CSS3)

過渡（transition)是CSS3中具有顛覆性的特徵之一，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換爲另一種樣式時爲元素添加效果。

在CSS3裏使用transition可以實現補間動畫（過渡效果），並且當前元素只要有“屬性”發生變化時即存在兩種狀態(我們用A和B代指），就可以實現平滑的過渡，爲了方便演示採用hover切換兩種狀態，但是並不僅僅侷限於hover狀態來實現過渡。

語法格式:

transition: 要過渡的屬性  花費時間  運動曲線  何時開始;

屬性	描述	CSS
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。	3
transition-property	規定應用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費的時間。默認是 0。	3
transition-timing-function	規定過渡效果的時間曲線。默認是 “ease”。	3
transition-delay	規定過渡效果何時開始。默認是 0。	3

運動曲線示意圖：

img {
  width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%;
  transition:transform 0.5s ease-in 0s;
}
img:hover {
  transform:rotate(180deg);
}

2D變形(CSS3)

轉換是CSS3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、變形、縮放，甚至支持矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠Flash纔可以實現的效果。

變形轉換 transform

• 移動 translate(x, y)

translate(50px,50px);

使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素。

可以改變元素的位置，x、y可爲負值；

 translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
 translateX(x)僅水平方向移動（X軸移動）
 translateY(Y)僅垂直方向移動（Y軸移動）

縮放 scale(x, y)

transform:scale(0.8,1);

可以對元素進行水平和垂直方向的縮放。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。

scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）
scaleX(x)元素僅水平方向縮放（X軸縮放）
scaleY(y)元素僅垂直方向縮放（Y軸縮放）

scale()的取值默認的值爲1，當值設置爲0.01到0.99之間的任何值，作用使一個元素縮小；而任何大於或等於1.01的值，作用是讓元素放大

旋轉 rotate(deg)

可以對元素進行旋轉，正值爲順時針，負值爲逆時針；

transform:rotate(45deg);

1. 當元素旋轉以後，座標軸也跟着發生的轉變
2. 調整順序可以解決，把旋轉放到最後
3. 注意單位是 deg 度數

傾斜 skew(deg, deg)

transform:skew(30deg,0deg);

該實例通過skew方法把元素水平方向上傾斜30度，處置方向保持不變。

可以使元素按一定的角度進行傾斜，可爲負值，第二個參數不寫默認爲0。

transform-origin可以調整元素轉換的原點

 div{transform-origin: left top;transform: rotate(45deg); }  /* 改變元素原點到左上角，然後進行順時旋轉45度 */    

3D變形

rotateX() 就是沿着 x 立體旋轉.(翻轉)

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

rotateY()沿着y軸進行旋轉(翻轉)

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

rotateZ()沿着z軸進行旋轉(翻轉)

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

透視(perspective)

電腦顯示屏是一個2D平面，圖像之所以具有立體感（3D效果），其實只是一種視覺呈現，通過透視可以實現此目的。

透視可以將一個2D平面，在轉換的過程當中，呈現3D效果。

注：並非任何情況下需要透視效果，根據開發需要進行設置。

perspective有兩種寫法

1. 作爲一個屬性，設置給父元素，作用於所有3D轉換的子元素
2. 作爲transform屬性的一個值，做用於元素自身

理解透視距離原理：

開門案例

body {
}
.door {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  border: 1px solid gray;
  perspective: 1000px;
  background: url('images/dog.gif') no-repeat center/cover;
  position: relative;
}
.door > div {
  box-sizing: border-box;
  border: 1px solid black;
}
.left {
  float: left;
  width: 50%;
  height: 100%;
  background-color: brown;
  transform-origin: left center;
  transition: 1s;
  position: relative;
}
.left::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  right: 0px;
  transform: translateY(-10px);
  border: 1px solid whitesmoke;
}
.right {
  width: 50%;
  height: 100%;
  float: left;
  background-color: brown;
  transform-origin: right center;
  transition: 1s;
  position: relative;
}
.right::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  left: 0px;
  transform: translateY(-10px);
  border: 1px solid whitesmoke;
}
.door:hover .left {
  transform: rotateY(-130deg);
}
.door:hover .right {
  transform: rotateY(130deg);
}

translateX(x)

僅水平方向移動**（X軸移動）

主要目的實現移動效果

translateY(y)

僅垂直方向移動（Y軸移動）

translateZ(z)

transformZ的直觀表現形式就是大小變化，實質是XY平面相對於視點的遠近變化（說遠近就一定會說到離什麼參照物遠或近，在這裏參照物就是perspective屬性）。比如設置了perspective爲200px;那麼transformZ的值越接近200，就是離的越近，看上去也就越大，超過200就看不到了，因爲相當於跑到後腦勺去了，我相信你正常情況下，是看不到自己的後腦勺的。

3D呈現（transform-style）

設置內嵌的元素在 3D 空間如何呈現，這些子元素必須爲轉換原素。

flat：所有子元素在 2D 平面呈現

preserve-3d：保留3D空間

3D元素構建是指某個圖形是由多個元素構成的，可以給這些元素的父元素設置transform-style: preserve-3d來使其變成一個真正的3D圖形。

一般而言，該聲明應用在3D變換的兄弟元素們的父元素上。

翻轉盒子案例(百度錢包)

body {
  margin: 0;
  padding: 0;
  background-color: #B3C04C;

}

.wallet {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.5s;
}

.wallet::before, .wallet::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(./images/bg.png);
  background-repeat: no-repeat;
}

.wallet::before {
  background-position: right top;
  transform: rotateY(180deg);
}

.wallet::after {
  background-position: left top;
  transform: translateZ(2px);
}

.wallet:hover {
  transform: rotateY(180deg);
}

動畫(CSS3)

動畫是CSS3中具有顛覆性的特徵之一，可通過設置多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果。

語法格式：

animation:動畫名稱 動畫時間 運動曲線  何時開始  播放次數  是否反方向;

關於幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意r

@keyframes 動畫名稱 {
  from{ 開始位置 }  0%
  to{  結束  }  100%
}

animation-iteration-count:infinite;  無限循環播放
animation-play-state:paused;   暫停動畫"