1.偽類
　　1. :link
　　2. :visited
　　3. :hover(重要)
　　4. :active
　　5. :focus(input標籤獲取游標焦點)

2.偽元素
　　1.:first-letter
　　2.:before(重要在內部前面新增)
　　3.：after(重要 在內部後面新增)

一、CSS

1.css屬性

　　1.字型

　　字型居中：

.font-dv {
　　　　font-size: 20px;
　　　　font-family: "微軟雅黑";
　　　　font-weight: 700;
　　　　font-style: italic;
　　　　border: 1px solid red;
　　　　height: 100px;
　　　　line-height: 100px; 
　　　　text-align: center;
　　　}

　　font字型連寫

　　- 語法：font:font-styel font-weight font-size/line-height font-family;
　　
　　- PS: 框高=行高 字型垂直居中
　　- 程式碼：font連寫：font: italic 700 20px/100px "微軟雅黑";
　　

1 .font-dv{
2 　　　　height:100px
3 　　　　font: italic 700 20px/100px "微軟雅黑";
4 　　　　border:1px solid red;    
5 　　　　text-align: center;
6 　　}

2.文字屬性
　　1.text-align 對齊（重要）
　　2.text-decoration裝飾（去除a標籤的下劃線(text-decoration:none）
　　3.text-indent 首行縮排
3.背景屬性
　　1.background-color 背景顏色
　　2.background-image 背景圖片（XXX） url（） no-repeat 50% 50%

　　background-color
　　背景顏色

　　background-image
　　背景圖片

　　background-image：url（圖片地址）

　　background-repeat
　　背景平鋪
　　　　值：repeat(預設) | no-repeat | repeat-x | repeat-y

　　background-position
　　　　背景定位
　　　　值：left | right | center | top | bottom

　　　　background-position-x: left | right | center

　　　　background-position-y: center | top | bottom

　　★方位值只寫一個的時候，另外一個值預設居中。
　　　　background-position:right center;
　　　　background-position:center; --> center center;

　　★寫2個方位值的時候，順序沒有要求。
　　　　background-position:20px 30px;

　　★寫2個具體值的時候，第一個值代表水平方向，第二個值代表垂直方向。
　　　　background-position:right center;

　　　　background-attachment
　　定義：設定背景影象是否固定或者隨著頁面的其餘部分滾動。
　　　　值：scroll | fixed

　　背景屬性連寫：
　　　　background: url("../content/images/top.jpg") no-repeat center top;

4.color
　　1.red
　　2.#FF0000
　　3.rgb(255,0,0) -->rgb(255,0,0,0.5)
5.邊框屬性 border
　　1.border-width(邊框寬度)
　　2.border-style(邊框樣式)
　　3.border-color(邊框顏色)
　　簡寫：
　　　　border:1px solid red;
6.css盒子模型
　　1.content(內容)
　　2.padding(內填充) 調整內容和邊框之間距離時使用這個屬性
　　3.border(邊框)
　　4.margin(外邊框) 多用於調整標籤之間的 距離
　　注意：要習慣看瀏覽器console視窗那個盒子模型
7.display(標籤的展現形式)
　　1.inline
　　2.block 選單裡面的a標籤可以設定成block
　　3.inline-block
　　4.none(不讓標籤顯示，不佔位)
8.float(浮動)
　　1.多用於實現佈局效果
　　　　1.頂部的導航條
　　　　2.頁面左右分欄（部落格頁面：左邊20% 右邊80%）
　　2.float
　　　　1.任何標籤都可以浮動，浮動之後都會變成塊級 a標籤float之後就可以設定高寬
　　　　3.float取值：
　　　　　　1.left
　　　　　　2.right
　　　　　　3.none

9.clear清除浮動--》清除浮動的副作用（內容飛出，父標籤撐不起來）
　　1.結合偽元素來實現
　　

.clearfix:after{
　　　　content:"";
　　　　display:"block";
　　　　clear:both;
　　}

　　2.clear取值：
　　　　1.left
　　　　2.right
　　　　3.both
10.overflow
　　1.標籤的內容放不下（溢位）
　　2.取值：
　　　　1.hidden-->隱藏
　　　　2.scroll-->出現滾動條
　　　　3.auto
　　　　4.scroll-x scroll-y
　　　　列子：
　　　　　　圓形頭像的列子
　　　　　　1.overflow：hidden
　　　　　　2.border-radius:50%(圓角)

　　當父盒子沒有定義高度，巢狀的盒子浮動之後，下邊的元素髮生位置錯誤。

　　總結：哪個容器的子元素有浮動，那麼父容器必須要清浮動!

　　◆清除浮動不是不用浮動，清除浮動產生的不利影響。

　　◆清除浮動的方法

　　　　語法：clear: left | right | both

　　　　工作裡用的最多的是clear:both;

　　★額外標籤法
　　　　在最後一個浮動元素後新增標籤,然後標籤中加clear:both;。

　　★給父集元素使用overflow:hidden;(如果有內容出了盒子，不能使用這個方法)

　　★偽元素清除浮動 推薦使用<ul class="nav-ul clearfix">

clearfix:after {
　　content: " ";
　　/*both:left+right*/
　　clear: both;
　　height: 0px;
　　display: block;
　　visibility: hidden;
　　}
<ul class="u1 clearfix" style="overflow:hidden">
<li class="nav-cell">秒殺</li>
<li class="nav-cell">優惠券</li>
<li class="nav-cell">PLUS會員</li>
<li class="nav-cell">閃購</li>
<!-- 第一種：使用而外標籤 -->
<!-- <li style="clear:left;"></li> -->
</ul>

11.定位position
　　1.static(預設)
　　2.relative(相對定位-->相對於原來的位置)
　　3.absolute(絕對定位-->相對於定位過的前輩標籤)
　　4.fixed(固定-->返回頂部按鈕例項)
　　補充：
　　　　脫離文件列的3中方式
　　　　float
　　　　absolute
　　　　fixed
12.opacity(不透明度)
　　1.取值0~1
　　2.和rgba()的區別：
　　　　1.opacity 改變元素\子元素的透明度效果
　　　　2.rgba()只改變北京顏色的透明度效果
13.z-index
　　1.數值越大，越靠近你
　　2.只能作用於定位過的元素