1.什么是css
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標准通用標記語言的一個應用）或XML（標准通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
2.css語法規范
使用html時，需要遵從一定的規范，css也是如此，想要熟練地使用css對網頁進行修飾，首先需要了解css樣式規則
css規則由兩個主要的部分構成：選擇器以及一條或多條聲明
選擇器是用於指定css樣式的html標簽，花括號內是對該對象設置的具體樣式，
屬性和屬性值是以鍵值對的形式出現
屬性和屬性直接用英文的“：”分開
多個鍵值對之間用“;” 進行區分
3.css基礎選擇器
3.1 css選擇器的作用
選擇器就是根據不同需求把不同標簽選出來，這就是選擇器的作用。簡單來說，就是選擇標簽用的。
3.2 選擇器分類
選擇器可分為基礎選擇器和復合選擇器兩大類：
基礎選擇器是由單個選擇器組成
基礎選擇器又包括：標簽選擇器，類選擇器，id選擇器和通配符選擇器
3.3 字體css屬性
font-family 設置字體系列
font-size 設置字號大小
font-style 設置字體樣式 normal：默認值，italic：斜體
3.4 文本css屬性
color 顏色屬性
text-align 文本對齊（right：右對齊，center：居中對齊，left：左對齊）
text-decoration 文本裝飾（underline：下划線，line-through：刪除線，overline：上划線，none：默認）
text-indent 首行縮進 （取值：像素，如果寫了2em，則是縮進當前元素兩個文字大小的距離）
line-height 用於設置行間的距離，可以控制文字行與行間的距離
4.css復合選擇器
4.1 后代選擇器
后代選擇器又稱為包含選擇器，可以選擇父元素里面子元素，其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔，當標簽發生嵌套時，內層標簽就成為外層標簽的后代。
語法：元素1 元素2 { 樣式聲明 }
元素1和元素2之間用空格隔開
4.2 子選擇器
子選擇器只能選擇作為某元素的最近一級子元素，簡單理解就是選親兒子元素。
語法：元素1 > 元素2 { 樣式聲明 }
元素1是父級，元素2是子集，最終選擇的是元素2
4.3 並集選擇器
並集選擇器可以選擇多組標簽，同時為他們定義相同的樣式，通常用於集體聲明，並集選擇器是各選擇器通過英文逗號連接而成，任何形式的選擇器都可以作為並集選擇器的一部分。
語法：元素1,元素2 { 樣式聲明 }
元素1和元素2中間用逗號隔開
4.4 偽類選擇器
偽類選擇器用於向某些選擇器添加特殊的效果，比如給鏈接添加特殊效果，或選擇第一個，第n個元素，偽類選擇器書寫最大的特點就是用冒號（:）表示，比如：hover、:first-child。
因為偽類選擇器很多，比較常用的有鏈接偽類，結構偽類等。
1）鏈接偽類選擇器
a:link /* 選擇所有未被訪問的鏈接 */
a:visited /* 選擇所有已被訪問的鏈接 */
a:hover /*選擇鼠標指針位於其上的鏈接 */
a:active /*選擇活動鏈接（鼠標按下未彈起的鏈接）*/
為了確保生效，請按照 LVHA 的順序進行書寫，:link - :visited - :hover -:active
2）focus偽類選擇器
:focus偽類選擇器用於選擇獲取焦點的表單元素
焦點就是光標，一般情況下，input類表單元素才能獲取，因此這個選擇器也主要針對表單元素來說
input:focus { border-color: yellow; }
5.css的元素顯示模式
5.1 塊元素
常見的塊元素有 h1~h6，p，div，ul，ol，li等，其中div是最典型的塊元素
塊級元素的特點：
1）比較霸道，自己獨占一行；
2）高度、寬度、外邊距以及內邊距都可以控制；
3）寬度默認是容器的100%；
4）是一個容器及盒子，里面可以放行內或者塊級元素。
5.2 行內元素
常見的行內元素有a，strong，b，span，em等，其中span是最典型的行內元素
行內元素的特點：
1）相鄰行內元素在一行上，一行可以顯示多個；
2）高、寬直接設置是無效的；
3）默認寬度就是它本身內容的寬度；
4）行內元素只能容納文本或其他行內元素。
5.3 行內塊元素
在行內元素中有幾個特殊的標簽 <img />、<input />、<td>，它們同時具有塊元素和行內元素的特點。因此稱它們為行內塊元素。
行內塊元素特點：
1）和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙，一行可以顯示多個（行內元素特點）；
2）默認寬度就是它本身內容的寬度（行內元素特點）；
3）高度，行高，外邊距以及內邊距都可以控制（塊級元素特點）。
5.4 元素轉換
特殊情況下，我們需要元素模式的轉換，簡單理解：一個模式的元素需要另外一種模式的特性，比如想要增加鏈接<a>的觸發范圍。
轉換為塊元素：display：block；
轉換為行內元素：display：inline；
轉換為行內塊：display：inline-block；
6.css的背景
通過css的背景屬性，可以給頁面元素添加背景樣式，背景屬性可以設置背景顏色，背景圖片，背景平鋪，背景圖片位置，背景圖像固定等。
6.1 背景顏色
background-color 屬性定義了元素的背景顏色
background-color：顏色值
默認值是transparent，意思是透明的
6.2 背景圖片
background-image 屬性描述了元素的背景圖像，實際開發常見於一些logo或者一些裝飾性的小圖片或者是超大的背景圖片
body { background-image: url(../../../assets/img/avatar.png); }
默認值是none，意思是無背景圖
6.3 背景平鋪
如果需要在html上對背景圖片進行平鋪，可以使用background-repeat屬性
background-repeat: no-repeat | repeat | repeat-x | repeat-y;
默認情況下背景圖片是平鋪的
6.4 背景圖片位置
利用background-position屬性可以改變圖片在背景中的位置
background-position：x y;
參數代表的意思是：x坐標和y坐標，可以使用方位名詞或者精確單位
1）如果指定的兩個值都是方位名詞，則兩個值前后順序無關，比如 left center和 center left是一樣的意思。
2）如果只指定了一個方位名詞，另一個值省略，則第二個默認居中對齊。
3）如果參數值是精確坐標，那么第一個肯定是x坐標，第二個肯定是y坐標。
4）如果只指定了一個數值，那該數值一定是x坐標，另一個默認垂直居中。
6.5 背景圖片固定
background-attachment 屬性設置背景圖片是否固定或者隨着頁面的其余部分滾動。
background-attachment：scroll | fixed
默認為scroll 隨着頁面的滾動而滾動。
6.6 背景復合寫法
為了簡化背景屬性的代碼，我們可以將這些屬性合並簡寫在同一個屬性background 中，從而節約代碼量。
當使用簡寫屬性時，沒有特定的書寫順序，一般習慣約定順序為：
background：背景顏色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖片位置
background：transparent url(image.jpg) repeat-y fixed top ;
6.7 背景顏色半透明
css3為我們提供了背景顏色半透明的效果
background：rgba(0,0,0,0.3);
最后一個參數是alpha透明度，取值范圍在0~1之間
我們可以把0.3的0省略掉，寫為 background：rgba(0,0,0, .3);
7.盒子模型
7.1 邊框border
border可以設置元素的邊框，邊框有三部分組成：邊框寬度、邊框樣式、邊框顏色。
語法：
border：border-width || border-style || border-color
| 屬性 | 作用 |
| border-width | 定義邊框粗細，單位是px |
| border-style | 邊框的樣式 |
| border-color | 邊框顏色 |
邊框的復合寫法：
border：1px solid red; 沒有順序
邊框分開寫法：
border-top：1px solid red; 只設置上邊框，其余同理
表格的細線邊框
border-collapse屬性控制瀏覽器繪制表格邊框的方式，它控制相鄰單元格的邊框。
語法：
border-collapse：collapse; 表示相鄰邊框合並在一起
7.2 內邊距padding
padding屬性用於設置內邊距，即邊框與內容之間的距離。
padding-left、padding-bottom、padding-left、padding-right 可以設置盒子的上下左右內邊距
padding屬性（簡寫屬性）可以有1~4個值
| 值得個數 | 表達意思 |
| padding:5px; | 1個值，代表上下左右都有5像素的內邊距 |
| padding:5px 10px; | 2個值，代表上下內邊距5像素，左右內邊距10像素 |
| padding:5px 10px 20px; | 3個值，代表上內邊距5px，左右內邊距10px，下內邊距20ox； |
| padding:5px 10px 20px 30px; | 4個值，上是5px，右是10px，下是20px，左是30px 順時針 |
7.3 外邊距margin
margin屬性用於設置外邊距，即控制盒子與盒子之間的距離
| 屬性 | 作用 |
| margin-left | 左外邊距 |
| margin-right | 右外邊距 |
| margin-top | 上外邊距 |
| margin-bottom | 下外邊距 |
margin簡寫方式代表的意義和padding完全一樣
外邊距可以讓塊級盒子水平居中，但是必須滿足兩個條件：
1）盒子必須指定了寬度，
2）盒子左右的外邊距都設置為auto。
7.4 外邊距合並
使用margin定義塊元素的垂直外邊框時，可能出現外邊距的合並。
對於兩個嵌套關系的塊元素，父元素有上外邊距同時子元素也有上外邊距，此時父元素會塌陷較大的外邊距值
解決方案：
1）可以給父元素定義上邊框
2）可以給父元素定義上內邊框
3）可以給父元素添加overflow:hidden
7.4 圓角邊框
border-radius 屬性用於設置元素的外邊框圓角
語法：
border-radius：length;
注意:
1）參數值可以為數值或百分比的形式
2）如果是正方形，想要設置為一個圓，把數值修改為高度或者寬度的一半即可，或者直接寫為50%
3）如果是個矩形，設置為高度的一半就可以做
4）該屬性是一個簡寫屬性，可以跟四個值，分別代表左上角、右上角、右下角、左下角
7.5 盒子陰影
css3中新增了盒子陰影，我們可以使用 box-shadow 屬性為盒子設置陰影
語法：
box-shadow：h-shadow v-shadow blur spread color insert;
| 值 | 描述 |
| h-shadow | 必需，水平陰影的位置，允許負值 |
| v-shadow | 必需，垂直陰影的位置，允許負值 |
| blur | 可選，模糊距離 |
| spread | 可選，陰影的尺寸 |
| color | 可選，陰影的顏色。 |
| inset | 可選，將外部陰影（outset）改成內部陰影 |
例如：
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
7.6 文字陰影
css3中新增了文字陰影，我們可以使用 text-shadow 屬性為盒子設置陰影
語法：
text-shadow：h-shadow v-shadow color;
例如：
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
8.浮動
8.1 浮動特性
浮動元素具有行內塊元素特性
- 任何元素都可以浮動，不管原先是什么模式的元素，添加浮動之后具有行內塊元素相似的特性。
- 如果塊級盒子沒有設置寬度，默認寬度和父級一樣寬，但是添加浮動后，它的大小根據內容來決定
- 浮動的盒子中間是沒有縫隙的，是緊挨着一起的
- 行內元素同理
8.2 清除浮動
語法：
選擇器{clear:屬性值;}
| 屬性值 | 描述 |
| left | 不允許左側有浮動元素 |
| right | 不允許右側有浮動元素 |
| both | 同時清除左右兩側的浮動 |
清除浮動方法
1.額外標簽法也稱為隔離法，是w3c推薦的做法 clear:both
2.父級添加overflow屬性
3.父級添加after偽屬性
4.父級添加雙偽屬性
清除浮動常用代碼：
.clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }
9.定位
9.1 定位組成
定位：將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子。
定位=定位模式+邊偏移
定位模式決定元素的定位方式，它通過css的position屬性來設置，其值可以分為四個：
| 值 | 語義 |
| static | 靜態定位 |
| relative | 相對定位 |
| absolute | 絕對定位 |
| fixed | 固定定位 |
邊偏移就是定位的盒子移動到最終位置，有top、bottom、left和right4個屬性。
| 邊偏移屬性 | 示例 | 描述 |
| top | top:80px | 頂端偏移量，定義元素相對於其父元素上邊線的距離 |
| bottom | bottom:80px | 底部偏移量，定義元素相對於其父元素下邊線的距離 |
| left | left:80px | 左側偏移量，定義元素相對於其父元素左邊線的距離 |
| right | right:80px | 右側偏移量，定義元素相對於其父元素右邊線的距離 |
9.2 靜態定位
靜態定位是元素的默認定位方式，無定位的意思
語法：
選擇器 { position：static； }
9.3 相對定位
相對定位是元素在移動位置的時候，是相對於它原來的位置來說的
語法：
選擇器 { position:relative; }
相對定位的特點：
1、它是相對於自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）
2、原來在標准流的位置繼續占有，后面的盒子仍然以標准流的方式對待它。（不脫標，繼續保留原來的位置）
9.4 絕對定位
絕對定位是元素在移動位置的時候，是相對於它祖先元素來說的
語法：
選擇器 { position:absolute; }
絕對定位的特點：
1.如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為准定位（document文檔）
2.如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。
9.5 固定定位
固定定位是元素固定於瀏覽器可視區的位置，主要使用場景：可以在瀏覽器頁面滾動時元素的位置不會改變。
語法：
選擇器 { position:fixed; }
固定定位小技巧：固定在版心右側位置
1、讓固定定位的盒子left:50%，走到瀏覽器可視區（也可以看做版心）的一半位置
2、讓固定定位的盒子margin-left：版心寬度的一半距離，多走版心寬度的一半位置，就可以讓固定定位的盒子貼着版心右側對齊了。
9.6 粘性定位
粘性定位可以被認為是相對定位和固定定位的混合，sticky粘性的
語法：
選擇器 { position:sticky;top:10px; }
粘性定位的特點：
1、以瀏覽器的可視窗口為參照點移動元素（固定定位特點）
2、粘性定位占用原先的位置（相對定位特點）
3、必須添加top、bottom、right、left其中一個才有效
9.7 定位疊放次序
在使用定位布局時，可能會出現盒子重疊的情況，此時，可以使用z-index來控制盒子的前后次序（z軸）
語法：
選擇器 { z-index:1; }
- 數值可以是正整數、負整數或0，默認是auto，數值越大，盒子越靠上
- 如果屬性值相同，則按照書寫順序，后來居上
- 數字后面不能加單位
10.元素的顯示與隱藏
10.1 display屬性
display屬性用於設置一個元素應如何顯示
- display：none；隱藏對象
- display：block；除了轉換為塊級元素之外，同時還有顯示元素的意思
display隱藏元素后，不占有原來的位置
10.2 visibility可見性
visibility屬性用於指定一個元素應可見還是隱藏
- visibility：visible;元素可視
- visibility：hidden;元素隱藏
visibility隱藏元素后，繼續占有原來的位置
10.3 overflow溢出
overflow 屬性指定了如果內容溢出一個元素的框（超過其指定的高度及寬度）時，會發生什么
| 屬性值 | 描述 |
| visible | 不剪切內容也不添加滾動條 |
| hidden | 不顯示超過對象尺寸的內容，超過的部分隱藏掉 |
| scroll | 不管超出內容否，總是顯示滾動條 |
| auto | 超出自動顯示滾動條，不超出不顯示滾動條 |
一般情況下，我們都不想讓溢出的內容顯示出來，因為溢出的部分會影響布局
但是如果有定位的盒子，請慎用overflow:hidden 因為它會隱藏多余的部分