淺顯的名詞解釋 html：即HyperText Markup Language，超文字標記語言。 css：即Cascading Style Sheets，層疊樣式表。 JavaScript：也稱為ECMAScript，廣義上包括ECMAScript，DOM，BOM。 jQuery：JavaScript框架，write Less，Do More，封裝JavaScript程式碼，優化HTML文件操作、事件處理、動畫設計和Ajax互動。 Ajax：即Asynchronous Javascript And XML，非同步 JavaScript 和 XML，建立互動式網頁應用的網頁開發技術。 Bootstrap：基於HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架。 less： CSS 前處理器，讓 CSS 具有動態性。

SEO：搜尋引擎優化技術：告訴搜尋引擎爬蟲，我們的網站是關於什麼的

空格符 &nbsp < 字元 &lt >字元 &gt

css 的引入：行間樣式，頁面級css，外部css檔案

css選擇器與權重 ！important： Infinity 行間樣式： 1000 id選擇器：100 class選擇器|屬性|偽類：10 標籤選擇器|偽元素：1 萬用字元選擇器：0 進位制：256

父子選擇器： a b 直接子元素選擇器 ： a>b 並列選擇器： ab 分組選擇器： a，b，c 瀏覽器底層原理：遍歷選擇器自右向左。

顏色寫法：純英文單詞（測試用），顏色程式碼，顏色函式。 透明色：transparent。

簡單的三角形畫法：利用border。

實現文字水平垂直居中

首行縮排兩字元：text-indent：2em ；

畫素：px，相對單位。1em=1 font-size。

text-decoration：文字修飾；

cursor：游標

偽類選擇器：hover

行級元素，內聯元素（inline）：內容決定元素所佔位置，不可以通過css改變寬高。 span strong em a del

塊級元素（block）：獨佔一行，可以通過css改變寬高。div p ul li ol form address。

行級塊元素（inline-block）：內容決定大小，可以改變寬高。

凡是帶有inline的元素，都有文字特性。用於解決圖片之間的空隙。改變元素屬性。

盒子的三大部分 盒子壁： border 內邊距：padding 盒子內容：width+heigth 外邊距：margin 盒子模型：margin+border+padding+（content=width+heigth）

body有預設的margin：8px；

層模型：position定位 absolute：脫離原來位置進行定位，最近有定位的父級進行定位，如果沒有有定位的父級，相對於文件進行定位 relative：保留原來位置進行定位，相對於自己原來的位置進行定位。 fixed：相對於頁面位置進行定位

兩欄佈局

兩個經典bug： margin塌陷 BFC：block format context，改變語法規則。 觸發盒子的BFC： 1設定position：absolute 2.display：inline-block 3float：left/right 4overflow：hidden margin合併：兄弟元素垂直方向的margin會合並。 解決：在一個元素上多加上另一個的距離

浮動模型：float：left/right 浮動元素產生了浮動流，所有產生了浮動流的元素，塊級元素看不到他們，產生了BFC的塊級元素和文字類元素以及文字可以看到浮動元素。

偽元素：bofore，after span：：before，span：：after{ content：""; clrea:both; displat:block; }

文字環繞圖片：float的最原始用法。

文字溢位 單行文字打點顯示：css{ white-space：nowrap； overflor：overhidden； text-overflow：ellipsis； } 多行文字截斷處理：css{ 文字高度和div高度處理； overflow：hidden； }

背景圖片的引入和處理 background-image： background-size：100%； background-repeat：no-repeat（repeat-x，repeat-y）； background-position：100px ，100px；(或者top left right bottom center=50% 50%)

行級元素只能巢狀行級元素 塊級元素可以巢狀任何元素，但是p標籤不可以巢狀塊級元素，會被斬斷成兩段。 a標籤裡不可以巢狀a標籤。

inline 和inline-block都是文字類元素

position：absolute/float：left，right設定時，會把元素轉變成inline-block元素。

行級塊元素裡面有文字類內容的時候，外面的文字與其內部文字底部對齊。vertical屬性可以設定對齊方式和距離。

文字前後小圖片的插入：利用偽元素。