首頁 > 開發者 > JavaScript
CSS學習筆記——盒模型，區塊層級元素和行內元素的區別和區別，css學習筆記
今天本來打算根據自己的計划進行前端自動化的學習的，無奈早上接到一個任務需求需要新增一個頁面。自從因為工作需要轉前端之後，自己的主要注意力幾 乎都放在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 如
所以在處理頁面元素的樣式時還需要注意到這點。
第二個問題：行內元素和區塊層級元素的區別和他們的特點是什嗎？總結如下：
區塊層級元素會獨佔一行,預設情況下,其寬度自動填滿其父元素寬度.
行內元素不會獨佔一行,相鄰的行內元素會排列在同一行裡,直到一行排不下,才會換行,其寬度隨元素的內容而變化. 另外
區塊層級元素常見的有：div......行內元素常見的有：a，span
如果想讓一個元素可以設定寬度高度，又讓它以行內形式顯示，我們可以設定display的值為inline-block。
第三個問題：CSS的定位機制主要有幾種？
1.標準文檔流形式（自上向下自左向右）
2.浮動float（主要針對區塊層級元素設定）
3.絕對位置。
怎麼樣，是不是又有問題了。。。浮動是什嗎？絕對位置又是什嗎？人生真是一場場問答啊！這兩個問題明天解決。
2016年1月8日
不積跬步，無以至千裡
PS：我查閱的大部分資料都是來自於網路，如有侵權，請聯絡我刪除
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
