寫給後臺人員看的前端開發指南-佈局篇
後臺人員剛開始寫前端頁面，最最頭疼的要數頁面佈局了：
- 想讓某個元素居中，網上找了半天也沒有一個好的方法？
- 加個了float：left怎麼整個頁面都亂套了？
- 怎麼讓這個元素換行，怎麼讓那個元素不換行？
- 怎麼把這幾個div橫向排列不換行？
- 看別人的程式碼滿屏都是div，眼花繚亂？
- 書了看了，網上的教程也跟著學了，為什麼等到自己要真正開始寫的時候卻寫不出來，那麼多標籤、那麼多css樣式，要用哪個？
- …
本人自己也兜兜轉轉學了很久，看了很多視訊教程還有經典書籍，比如《HTML5權威指南》、《CSS權威指南》、《Javascript高階程式指南》、《鋒利的jquery》。看書的時候都能看懂，但是真正上手隨便寫個簡單頁面時感覺整個人都蒙了，不知道從何寫起。仔細想想除了缺乏實踐，但更重要的是前端還是和後臺開發有著很大的本質區別，我個人總結主要有：
- 後臺是單語言，入門和掌握的點比較單一，比如你學php、C/C++、java、python其中的一種，只要買一本入門教程，按照裡面的例子寫就算入門了，程式碼都是單執行緒順序執行，執行流程比較清晰。而前端則需要HMTL、CSS、JS三者一起共同來實現，因此學習的知識比較分散，而且沒有經歷過實踐的話會比較亂；
- 前端知識基本靠實踐和經驗，而這恰恰是經典書籍所欠缺的，書本上都是介紹基本概念，每一個標籤、每一個樣式的使用，而實際頁面需要多方面結合；
- 前端知識太靈活多變，框架一年甚至幾個月大變血一次。
總之，就是後臺開發寫前端很難，思維模式差別很大。雖然大多數人認為寫後臺的才是真的的抵達技術巔峰，每天接觸的是伺服器、資料庫、高併發、海量、TCP、黑客。但是卻被前端的標籤、樣式弄得死去活來。
鑑於自己學習前端的痛苦經歷，寫下這篇部落格，希望給那些後臺人員想寫前端或者轉前端的人的一些實用的建議。
好了，廢話不多說，下面進入正題。
希望本文能達到一個目的：看完後基本能實現自定義佈局，掌握一些基本佈局技巧、能做出自己想要的頁面佈局。
首先，理解幾個和佈局相關的概念：
- 理清行內元素和塊級元素
- 理解盒子模型。width、height、margin、padding、bodder
- position屬性定位
- float屬性
- display屬性
行內元素、塊級元素
相信大家都接觸過這兩個概念了，那我問一個問題，為什麼要搞清楚這兩個概念，很簡單明確知道哪些標籤是行內元素、哪些標籤是塊級元素對佈局有直接影響。主要區別是：
行內元素只是行內的元素，不換行
塊級元素是一個元素沾滿一行，如果兩個塊級元素寫在一起（比如兩個div），預設是分兩行展示，除非設定float或者display（後面會講到），此外塊級元素還可以設定邊距（盒子模型屬性）。
行內元素設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效。
因此，判斷一個位置到底是用行內元素還是塊級元素很明顯的一個判斷方法就是是否需要換行或者是否需要設定長寬和上下邊框/距。 首先選用行內元素，比如在一行中有一個文字需要變顏色/加粗，那麼直接用行內元素span即可。
看哪些是行內元素，哪些是塊級元素
盒模型
盒子模型，相信大家也是聽到爛了，核心就是margin、padding加上width、height影響一個塊級元素的大小。
看資料
position屬性
| 值 | 描述 |
|---|---|
| absolute | 生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。 |
| fixed | 生成絕對定位的元素，相對於瀏覽器視窗進行定位。元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。 |
| relative | 生成相對定位的元素，相對於其正常位置進行定位。因此，”left:20” 會向元素的 LEFT 位置新增 20 畫素。 |
| static | 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。 |
| inherit | 規定應該從父元素繼承 position 屬性的值。 |
display屬性
display 屬性規定元素應該生成的框的型別。w3c定義
看了上面的知識估計還是一頭霧水，沒有關係，下面進行實踐結合：
輕鬆佈局第一條：子元素使用絕對定位
父元素設定position:relative
子元素：position:absolute,”left”, “top”, “right” 以及 “bottom”
可以定位子元素到任意位置。
輕鬆佈局第二條：行內元素與塊級元素轉換
行內元素->塊級元素：display:block ,塊狀元素是獨佔整行的，可以設定寬高
塊級元素->行內元素：display:inline-block，排版可以同放一行。
有了這個轉換就不用float：left難以控制的佈局。
輕鬆佈局第三條：寬高從裡到外
盒子模型大小從最裡面的元素開始往上設定，最先設定最裡面元素的width和height已經margin和padding。那樣外層的div就會自動被撐開，不需要顯示聲明瞭。
幾條實踐技巧
單行文字水平/垂直居中
水平居中可以設定：text-align:center，垂直居中對於單行有個技巧設定行高等於整體高度：line-height:40px;
什麼時候用float:left佈局
善用ul/li
對於明顯列表項的使用ul/li，代替對個div佈局，而是使用ul/li裡面包含div
html/css/js書寫流暢
很明顯是先寫html頁面佈局，將頁面先拆解寫出html結構，然後利用css渲染。