1).彌補html語言的不足
2).縮減頁面**，提高訪問速度;
3).**減少，頁面檔案就會小，占用網路頻寬就少，客戶端開啟速度就快，使用者體驗就會更好
4).結構清晰，有利於seo優化
5).有利於搜尋引擎優化
6).縮短改版時間
7).對**的重構有很好的支援
主要結合屬性：background-position
解決方法
(1) 用padding替代
(2) 給外層元素加乙個邊框
(3) 給該元素或者父元素加浮動
(4) 給父元素加overflow:hidden(溢位隱藏)
margin: auto; 對有寬度的塊級元素設定居中對齊
text-align: center; 為了讓內聯元素或內聯塊元素居中，給父元素設定text-align: center;，相當於內聯元素是其塊級父元素的文字內容
給該元素設定heigt:100%;width:100%;
給body和html都設定height:100%; body,html
1). 設定不換行 white-space:nowrap
2). 設定溢位隱藏 overflow:hidden
3). 設定文字溢位顯示省略號 text-overflow: ellipsis;
條件(1) 父元素不設定高度 (2) 給子元素設定浮動
解決1). 給父元素設定 overflow:hidden;
弊端: 如果父元素外面有其他元素,設定完後,會被隱藏掉
2). (1) 在浮動元素的後面新增乙個塊級元素 (2) 給該塊級元素設定 clear:left/right/both; 清除浮動
(1)只對塊級元素才生效 (2)清除前面浮動元素帶給後面正常元素的乙個影響
弊端: 頁面中會出現很多空的div,造成**冗餘(多餘)
3). 完美清除法(通過偽元素的方式)
高度塌陷的元素::after
可以繼承 ：
字型類：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
link和@import的區別
1). 載入順序，對於link來說，結構和樣式是同時載入，對於@import，先載入結構，再載入樣式，如果網路差的情況下，
只顯示顯示結構，對使用者體驗不好
2). link來說除了可以引入css檔案之外，還可以引入其他檔案，@import來說只能引入css
(1)摳網頁圖示：在.com或者.cn後面輸入 /f**icon.ico 回車後圖示出現，儲存至本地，不要更改名字，因為一般網頁
圖示都叫f**icon.ico的名字
(2) 通過link引入
rel: 值為icon 代表關聯的是圖示檔案型別
type: 值images/x-icon 代表當前型別是型別
href: 值為圖示的路徑
3) .link可以支援所有的瀏覽器，@import低版本的ie不支援
4). js可以控制通過link引入進來元素的樣式，但是不能控制@import引入進來的樣式
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; 水平垂直居中
元素彈性盒也可以
觸發條件
1. overflow:hidden/scroll/auto;
2. float: left/right；
3. position: absolute/fixed
4. display: inline-block/table-caption(**標題)/table-cell(**單元格)/flex(彈性盒)/inline-flex(內聯彈性盒)
特性在bfc的區域內，浮動元素的高度會計算在內--》 解決高度塌陷
bfc的區域不會和浮動元素重疊--》解決浮動給後面元素帶來的影響
bfc區域內的元素不會影響到外面的元素 --》解決margin的重疊
瀏覽器的字首
谷歌瀏覽器 -webkit-
歐鵬瀏覽器 -o-
火狐 -moz-
ie瀏覽器 -ms- ie10及上才支援c3屬性
寬度和高度都設定為0 width:0;height:0
四周的邊框都設定透明 border:30px solid transparent;
留下對方向的邊框，設定具體的邊框顏色
總寬 = 內容區width+padding左右+border左右+margin左右
box-sizing:border-box;
總寬 = width+margin左右
ie低版本缺失文件宣告,也會觸發怪異盒模型
box-shadow:陰影水平偏移 陰影垂直偏移 陰影模糊程度 陰影大小(可選) 陰影顏色 陰影位置(可選，在裡面就是inset)
值數值px
數值%(可能會使背景圖拉變形)
關鍵字cover:背景圖不斷拉伸，直到充滿整個盒子才停止拉伸，所以可能會導致背景圖被裁切，但是不會變形
contain:背景圖不斷拉伸，直到碰到盒子邊緣，才停止拉伸，可能會導致盒子出現留白的情況，背景圖不會變形
transform: translate(x位移,y位移) 只寫乙個值代表x軸位移
transform: translate3d(x,y,z)
實現元素的水平垂直的居中：
優點：子元素寬高改變可以自適應變化
子元素不設定寬高也可以拿到寬高的一半
元素transform:scale(x,y) 乙個值代表x和y的縮放
3d裡面沒有傾斜
ie8以上才支援
頭部 header
文章 article
導航 n**
板塊 section
重要內容 main
側邊欄 aside
標題組 hgroup
時間 time ->內聯元素
標記 mark ->內聯元素
底部 footer
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 選擇（上傳）多個 檔案上傳
@media 關鍵字
裝置型別：all(所有裝置)/screen(顯示器、筆記本、移動端裝置)
and 連線符 and兩側有空格
**特性 max-width/min-width
(1)px後面不要加封號
(2)多個**特性用and連線
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
(1)將**寫同一行
(2)給該元素加浮動
(3)給元素加乙個父元素，給父元素設定font-size:0;子元素設定正常的字型大小
ie瀏覽器 -> trident
火狐瀏覽器mozilla-> gecko
蘋果 & 谷歌舊版本 -> webkit
谷歌新版 & 歐鵬 -> blink
(1)定義網頁標題
(2)定義網頁關鍵字
(3)定義網頁描述內容
(4)定義網頁的作者
imgimg
img給的父元素設定font-size:0;
一階段總結複習（HTML CSS）
q 當父盒子巢狀子盒子時，如果父盒子不給邊框子盒子給margin top時，父盒子會掉下來 a 解決方法 1 為父盒子設定border，為外層新增border後父子盒子就不是真正意義上的貼合。2 為父盒子新增overflow hidden 3 為父盒子設定padding值。q 浮動出現的原因，由於在...
一階段專案 框架
關於框架 1.html檔案建立 設定id 2.js事例 function iframe dom else if dom 1 else if dom 2 aa.src bb 2 關於框架高度 onload this.hight 0 var fdh this.document？this.document...
一階段需求分析
軟體需求分析 一引言 編寫目的 為了方便測繪專業對角度計算的使用，編寫乙個可以將弧度與角度相互之間轉換的c 視窗應用程式，以此來提高資料處理的效率。專案風險 我們的風險 主要是開發者王天池和吳國慶承擔，我們的風險有如下幾點 軟體未能正確執行 軟體未能如期完成編寫 測試。軟體工程科目未能及格。而我們現...