在文章開篇之前拋出一些常見的問題:
- text-align: center; 爲什麼內容不居中？
- width: 100px; 爲什麼寬度不生效？
帶這上面最常見的兩個問題，也是令無數後端開發者抓狂。
爲什麼CSS這麼難學？
爲什麼百度無數次都是同樣的答案，還是解決不了我的佈局對齊問題？
爲什麼上一個頁面還有效，換一個頁面同樣的代碼就是代碼不生效？
經過上面的靈魂三問之後，將進入本篇文章的主題，也是小編CSS佈局系列文章的一個開始。後期將會持續爲大家帶來CSS乾貨。
特別是後端開發者在學習 javascript 的過程中並不會覺得有太難學，但是CSS就是不能理解。學過JS或者其它開發語言的開發者們所學習語言的第一個知識點，那便是 數據類型 ，特別是學C和JAVA 等強類型語言的開發者們，絕對是必須完全掌握的一個知識點。那麼CSS中也有一個非常重要的知識點，那就是 元素類型，任何佈局代碼都與元素類型有關，元素類型絕定一切可生效的CSS佈局相關屬性。那麼決定 元素類型 的屬性就是今天的主角 display。
display 定義和用法：規定元素應該生成的框的類型。
最常見的4種元素類型有：
- none：元素不會被顯示。
- inline：內聯元素，元素前後沒有換行符。代表性標記有：<i> <a> <span>
- inline-block：行內塊元素。代表性標記有：<input> <button> <textarea>
- block：塊級元素，此元素前後會帶有換行符。代表性標記有：<div> <ul> <h1>~<h6>
先用一下各個代表性元素做一下最基本的表現效果演示
從上敘的演示效果中發現了兩個問題：
- <span> 元素的 width:100px; 屬性沒有生效；
- <div>元素也沒有因 <body> 元素的 text-align: center; 屬性而居中；
從這一個簡單的示例中恰巧反映了文章開篇中提出的2個問題。造成這一後果的根本原因就是元素的類型不同。下面通過 display 屬性改變它們的元素類型
上圖示例，將兩個元素修改類型後，它們在瀏覽器中的表現形式發生了互換的情況。
希望有遇到上述兩個問題的開發者們，從現在開始能知道爲什麼自己的CSS不會生效的根本原因，不再爲對齊和尺寸設置而抓狂。
這麼一個關鍵的屬性，可能在其他人講解CSS佈局知識的文章 或 視頻教程中都不會被提及，但它卻是如此重要，它是一切佈局屬性的決定者！
在上面的兩個效果示例中有一個 inline-block 類型的 <input> 元素居然能同時擁有居中和寬度兩項屬性的效果。
問：這麼一個方便的元素類型應該多加利用到佈局中嗎？
答：不應該，因爲它存在一些問題，更多使用於佈局的應該是 block 類型的元素。
block 類型元素如何做佈局？這個問題會在小編的下一篇文章中，敬請關注。
在文章的結尾給一心想學好CSS的開發者們留下一個問題，那就是需要去學習一個內容 CSS盒子模型 ，基本上網絡上的文檔或者教程在講解盒子模型這個知識的時候，都是使用 <div> 這個 block 類型的元素去講解的，但好多人學習完後，發現在像 <a> <span> <i> 這種 inline 類型元素上各種不生效，簡直懷疑自己的人生！——握草！無情！
再去重溫一次 盒子模型 吧，通過 改變元素類型，學習 盒子模型 的 4項屬性 在不同類型元素的表現情況。
盒子模型是必須掌握的知識點，是寫好佈局的最根本知識。
——上吧！驕傲的騷年！
關注我，下一篇文章會更加精彩
作者：黃河愛浪 QQ：1846492969，郵箱：[email protected]
公衆號：
web-7258，本文原創，著作權歸作者所有，轉載請註明原鏈接及出處。更多精彩文章，請掃下方二維碼關注我的公衆號
