1.引入CSS的目的

1).彌補html語言的不足
2).縮減頁面程式碼，提高訪問速度;
3).程式碼減少，頁面檔案就會小，佔用網路頻寬就少，客戶端開啟速度就快，使用者體驗就會更好
4).結構清晰，有利於seo優化
5).有利於搜尋引擎優化
6).縮短改版時間
7).對網站的重構有很好的支援

2.精靈圖/雪碧圖

主要結合屬性：background-position

優點：
（1）減少瀏覽器的請求次數
（2）減少圖片大小

3.margin的傳遞

解決方法
(1) 用padding替代
(2) 給外層元素加一個邊框
(3) 給該元素或者父元素加浮動
(4) 給父元素加overflow:hidden(溢位隱藏)

4.不同元素型別的居中

margin: auto; 對有寬度的塊級元素設定居中對齊
text-align: center; 為了讓內聯元素或內聯塊元素居中，給父元素設定text-align: center;，相當於內聯元素是其塊級父元素的文字內容

5.全屏頁面

給該元素設定heigt:100%;width:100%;
給body和html都設定height:100%; body,html{height: 100%;}

6.單行文字溢位顯示省略號

1). 設定不換行 white-space:nowrap
2). 設定溢位隱藏 overflow:hidden
3). 設定文字溢位顯示省略號 text-overflow: ellipsis;

7.高度塌陷

條件(1) 父元素不設定高度 (2) 給子元素設定浮動

解決
1). 給父元素設定 overflow:hidden;
弊端: 如果父元素外面有其他元素,設定完後,會被隱藏掉
2). (1) 在浮動元素的後面新增一個塊級元素 (2) 給該塊級元素設定 clear:left/right/both; 清除浮動
(1)只對塊級元素才生效 (2)清除前面浮動元素帶給後面正常元素的一個影響
弊端: 頁面中會出現很多空的div,造成程式碼冗餘(多餘)
3). 完美清除法(通過偽元素的方式)
高度塌陷的元素::after{
content: "嘿嘿";
clear: both; 清除浮動元素帶來的影響
display: block; clear只對塊生效
height: 0; 如果不小心在content寫了內容的特殊處理
overflow: hidden; 超出高度為0的部分直接隱藏
visibility:hidden; 溢不出溢位都隱藏
}

8.表格跨行跨列

9.屬性繼承

可以繼承 ：
字型類：font-size/font-weight/font-style/font-family
文字類: color/text-align/text-indent/line-height
列表類: list-style

不可以繼承：
text-decoration
width/height/padding/margin/border/display

10.樣式表

link和@import的區別
1). 載入順序，對於link來說，結構和樣式是同時載入，對於@import，先載入結構，再載入樣式，如果網路差的情況下，
只顯示顯示結構，對使用者體驗不好
2). link來說除了可以引入css檔案之外，還可以引入其他檔案，@import來說只能引入css
(1)摳網頁圖示：在.com或者.cn後面輸入 /favicon.ico 回車後圖標出現，儲存至本地，不要更改名字，因為一般網頁
圖示都叫favicon.ico的名字
(2) 通過link引入

rel: 值為icon 代表關聯的是圖示檔案型別
type: 值images/x-icon 代表當前型別是圖片型別
href: 值為圖示的路徑
3) .link可以支援所有的瀏覽器，@import低版本的ie不支援
4). js可以控制通過link引入進來元素的樣式，但是不能控制@import引入進來的樣式

11.定位實現元素水平垂直居中

子絕父相： 一般給絕對定位形成參考物的祖先元素，加相對定位給其形成，因為其他定位屬性會脫離文件流，導致一些問題

1). 該元素設定position:absolute;
2). 該元素設定left:50%; 移動到參考物寬度中心的右側,margin-left: -該元素寬度的一半;(這裡不要使用百分數，因為百分數參考的是父元素)
3). 該元素設定top:50%; 移動到參考物高度中心的下側,margin-top: -該元素高度的一半;(這裡不要使用百分數，因為百分數參考的是父元素)

1). 給該元素設定絕對定位
2). 設定四個方向為0 left: 0;right: 0;top: 0;bottom: 0;
3). 該元素設定margin:auto; 水平垂直居中

元素{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);向左和向上拉取當前元素寬高的一半
}

彈性盒也可以

12.BFC: 塊級格式化上下文，獨立渲染的區域

觸發條件
1. overflow:hidden/scroll/auto;
2. float: left/right；
3. position: absolute/fixed
4. display: inline-block/table-caption(表格標題)/table-cell(表格單元格)/flex(彈性盒)/inline-flex(內聯彈性盒)

特性

1. 在BFC的區域內，浮動元素的高度會計算在內--》 解決高度塌陷
2. BFC的區域不會和浮動元素重疊--》解決浮動給後面元素帶來的影響
3. BFC區域內的元素不會影響到外面的元素 --》解決margin的重疊

13.瀏覽器字首

瀏覽器的字首
谷歌瀏覽器 -webkit-
歐鵬瀏覽器 -o-
火狐 -moz-
ie瀏覽器 -ms- ie10及上才支援c3屬性

14.程式碼寫三角形

1. 寬度和高度都設定為0 width:0;height:0
2. 四周的邊框都設定透明 border:30px solid transparent;
3. 留下對方向的邊框，設定具體的邊框顏色

15.盒模型

• 標準盒模型(w3c盒模型)：
  box-sizing:content-box;

​ 總寬 = 內容區width+padding左右+border左右+margin左右

• 怪異盒模型(ie盒模型)：

​ box-sizing:border-box;

​ 總寬 = width+margin左右

​ ie低版本缺失文件宣告,也會觸發怪異盒模型

16.盒子陰影順序不能變

box-shadow:陰影水平偏移 陰影垂直偏移 陰影模糊程度 陰影大小(可選) 陰影顏色 陰影位置(可選，在裡面就是inset)

17.背景圖大小 background-size:寬度 高度;

值
數值px
數值%(可能會使背景圖拉變形)
關鍵字cover:背景圖不斷拉伸，直到充滿整個盒子才停止拉伸，所以可能會導致背景圖被裁切，但是不會變形
contain:背景圖不斷拉伸，直到碰到盒子邊緣，才停止拉伸，可能會導致盒子出現留白的情況，背景圖不會變形

18.變形位移佔位置

transform: translate(x位移,y位移) 只寫一個值代表x軸位移

transform: translate3d(x,y,z)

實現元素的水平垂直的居中：

優點：

1. 子元素寬高改變可以自適應變化
2. 子元素不設定寬高也可以拿到寬高的一半
   元素{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);向左和向上拉取當前元素寬高的一半
   }

transform:scale(x,y) 一個值代表x和y的縮放

3d裡面沒有傾斜

19.H5新增標籤

ie8以上才支援

頭部 header
文章 article
導航 nav
板塊 section
重要內容 main
側邊欄 aside
標題組 hgroup
時間 time ->內聯元素
標記 mark ->內聯元素
底部 footer

音訊標籤 audio
controls 顯示控制元件
loop 迴圈
autoplay 自動播放 ie允許，谷歌禁止了
muted 靜音

視訊 video
controls 顯示控制元件
loop 迴圈
autoplay 自動播放 ie允許，谷歌禁止了（設定靜音可以自動播放）
muted 靜音
poster 視訊沒播放之前顯示在上面的圖片

type="email" 限制使用者必須輸入email型別
type="url" 限制使用者必須輸入url型別
type="range" 產生一個滑動條表單
type="number" 數字
type="search" 產生一個搜尋意義的表單
type="color" 生成一個顏色選擇的表單
type="time" 限制使用者必須輸入時間型別
type="month" 限制使用者必須輸入月型別
type="week" 限制使用者必須輸入周型別
type="datetime-local " 選取本地時間
type="date"

required 必填
min 最小 在number型別用
max 最大 在number型別用
autocomplete 是否自動提示資訊(顯示輸入的歷史記錄) 屬性值 on off
placeholder 文字框的提示資訊
autofocus 自動聚焦。一個頁面只能有一個。
pattern 後面的屬性值是一個正則表示式。 pattern="[A-z]"
novalidate 取消表單內的驗證 加在form身上
multiple 選擇（上傳）多個 檔案上傳

20.媒體查詢

@media 關鍵字
裝置型別：all(所有裝置)/screen(顯示器、筆記本、移動端裝置)
and 連線符 and兩側有空格
媒體特性 max-width/min-width
(1)px後面不要加封號
(2)多個媒體特性用and連線

21.透明度

rgba() a->opacity(0-1) 0: 隱藏 1:不透明 值越小越透明,只透明背景，不影響內容

opacity(0-1) 0: 隱藏 1:不透明 值越小越透明，元素背景和內容都會透明

專門針對ie的相容寫法：
filter: alpha(opacity=value); value的取值是 1-100 1相當於0 100相當於1 取值是整10的取 比如10 20

22.內聯或者內聯塊之間的間距的解決

(1)將程式碼寫同一行
(2)給該元素加浮動
(3)給元素加一個父元素，給父元素設定font-size:0;子元素設定正常的字型大小

23.瀏覽器核心(渲染機制)

ie瀏覽器 -> Trident
火狐瀏覽器Mozilla-> Gecko
蘋果 & 谷歌舊版本 -> webkit
谷歌新版 & 歐鵬 -> Blink

24.網頁頭部優化

(1)定義網頁標題
(2)定義網頁關鍵字
(3)定義網頁描述內容
(4)定義網頁的作者

25.解決圖片自帶底部留白

1. img{display:block}
2. img{vertical-align:middle/top/bottom}
3. img{float:left}
4. 給圖片的父元素設定font-size:0;