今天本來打算根據自己的計划進行前端自動化的學習的，無奈早上接到一個任務需求需要新增一個頁面。自從因為工作需要轉前端之后，自己的主要注意力幾 乎都放在JavaScript上面了，對CSS和HTML這方面其實基礎真的很差，今天在寫頁面的時候就被浮動啊、內外邊距啊這些耽誤了不少時間。
反思一下，自己確實在這些基礎方面的不足很多，所以今后的學習筆記主要是我在工作中遇到的一些問題和他們的解決方法。其中可能中會有JS、CSS、HTML各方面的，我會把自己每一天學到的內容都記錄一下，輔助自己打好基礎。
今天在碼代碼的過程中記錄了幾個問題，這幾個問題自己確實也是迷迷糊糊答不上來的：
1.盒模型到底是啥？肯定不是簡單的div..
2.行內元素和塊級元素的區別和他們的特點是什么？
3.CSS的定位機制主要有哪幾種？
第一個問題：盒模型到底是什么？（下面是我查資料看書自己總結的）
盒模型是CSS實現頁面布局的一種思想：把頁面的所有元素都看成一個類似於禮品盒的盒子，禮品盒可能會有好多層包裝組成，那么頁面元素也對應的有內容、邊框、內外邊距等組成。這里特別提醒一下，盒模型是要把元素看成立體的，它確實有空間的屬性，我在后面詳細介紹。
盒模型的概念明白了，就該注意盒模型的種類了
目前有：標准盒子模型和IE盒子模型 2種盒模型。他們各自長這樣：
根據上圖可以看出他們的不同：
標准盒模型：元素的width和height = content
IE盒模型：元素的width和height =( content+border+padding )
因為存在這樣的差異，所以要滿足跨瀏覽器的時候就會比較麻煩。當然兩種方式肯定是標准盒模型比較好，這里有一個解決跨瀏覽器的方案：
在網頁頂部增加DOCTYPE的聲明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這樣會使所有瀏覽器按照W3C標准盒模型去解析頁面元素，就滿足了跨瀏覽器的要求了。
上面還提到了盒子模型是有空間的，主要表現在組成盒子的各個部分的層次不同。他們從上到下的順序是
border----->content、padding----->background-image----->background-color----->margin 如下圖
所以在處理頁面元素的樣式時還需要注意到這點。
第二個問題：行內元素和塊級元素的區別和他們的特點是什么？總結如下：
塊級元素會獨占一行,默認情況下,其寬度自動填滿其父元素寬度.
行內元素不會獨占一行,相鄰的行內元素會排列在同一行里,直到一行排不下,才會換行,其寬度隨元素的內容而變化. 另外
- 塊級元素可以設置width,height屬性.
- 行內元素設置width,height屬性無效，它的長度高度主要根據內容決定.
- 塊級元素即使設置了寬度,仍然是獨占一行.
- 塊級元素可以設置margin和padding屬性.
- 行 內元素的margin和padding屬性,水平方向的padding-left,padding-right,margin-left,margin- right都產生邊距效果,但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom卻不 會產生邊距效果.
- 塊級元素對應於display:block.
- 行內元素對應於display:inline.
塊級元素常見的有：div......行內元素常見的有：a，span
如果想讓一個元素可以設置寬度高度，又讓它以行內形式顯示，我們可以設置display的值為inline-block。
第三個問題：CSS的定位機制主要有幾種？
1.標准文檔流形式（自上向下自左向右）
2.浮動float（主要針對塊級元素設置）
3.絕對定位。
怎么樣，是不是又有問題了。。。浮動是什么？絕對定位又是什么？人生真是一場場問與答啊！這兩個問題明天解決。
2016年1月8日
不積跬步，無以至千里
PS：我查閱的大部分資料都是來自於網絡，如有侵權，請聯系我刪除