後台開發寫前端的思路

後台人員剛開始寫前端頁面，最最頭疼的要數頁面布局了： 

- 想讓某個元素居中，網上找了半天也沒有乙個好的方法？ 

- 加個了float：left怎麼整個頁面都亂套了？ 

- 怎麼讓這個元素換行，怎麼讓那個元素不換行？ 

- 怎麼把這幾個div橫向排列不換行？ 

- 看別人的**滿屏都是div，眼花繚亂？ 

- 書了看了，網上的教程也跟著學了，為什麼等到自己要真正開始寫的時候卻寫不出來，那麼多標籤、那麼多css樣式，要用哪個？ 

- …

總之，就是後台開發寫前端很難，思維模式差別很大。雖然大多數人認為寫後台的才是真的的抵達技術巔峰，每天接觸的是伺服器、資料庫、高併發、海量、tcp、黑客。但是卻被前端的標籤、樣式弄得死去活來。 

鑑於自己學習前端的痛苦經歷，寫下這篇部落格，希望給那些後台人員想寫前端或者轉前端的人的一些實用的建議。 

好了，廢話不多說，下面進入正題。 

希望本文能達到乙個目的：看完後基本能實現自定義布局，掌握一些基本布局技巧、能做出自己想要的頁面布局。

首先，理解幾個和布局相關的概念：

行內元素、塊級元素

相信大家都接觸過這兩個概念了，那我問乙個問題，為什麼要搞清楚這兩個概念，很簡單明確知道哪些標籤是行內元素、哪些標籤是塊級元素對布局有直接影響。主要區別是：

行內元素只是行內的元素，不換行 

塊級元素是乙個元素沾滿一行，如果兩個塊級元素寫在一起（比如兩個div），預設是分兩行展示，除非設定float或者display（後面會講到），此外塊級元素還可以設定邊距（盒子模型屬性）。 

行內元素設定width無效，height無效(可以設定line-height)，margin上下無效，padding上下無效。

是否需要換行或者是否需要設定長寬和上下邊框/距

。 首先選用行內元素，比如在一行中有乙個文字需要變顏色/加粗，那麼直接用行內元素span即可。 

看哪些是行內元素，哪些是塊級元素

塊級元素(block)特性：

內聯元素(inline)特性：

塊級元素主要有：

內聯元素主要有：

textarea , tt , u , var

可變元素(根據上下文關係確定該元素是塊元素還是內聯元素)：

css中塊級、內聯元素的應用：

利用css我們可以擺脫上面**裡html標籤歸類的限制，自由地在不同標籤/元素上應用我們需要的屬性。

主要用的css樣式有以下三個：

我們常將元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。

題外話：

內聯元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的，所以可以通過這4個屬性來控制內聯元素的寬度。

內聯元素的內部也可以放塊級元素標籤，而且內部的塊級元素標籤會撐大外部的內聯標籤，所以可以通過放塊元素來控制內聯元素的高度(網上介紹的是內聯元素只能放文字及其他內聯元素)

例如： 測試

附錄：col, colgroup, frameset, html, style, table, tbody, tfoot, thead, title, tr, td 等幾個元素標籤是唯讀的，也就是不能使用innerhtml等進行動態賦值.

盒模型盒子模型，相信大家也是聽到爛了，核心就是margin、padding加上width、height影響乙個塊級元素的大小。 

看資料

position屬性

w3c定義 值

描述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布局

float 可用於實現文字環繞 

善用ul/li

對於明顯列表項的使用ul/li，代替對個div布局，而是使用ul/li裡面包含div

html/css/js書寫流暢

很明顯是先寫html頁面布局，將頁面先拆解寫出html結構，然後利用css渲染

還可以參考其他文章

**：

前端開發團隊協作思路

隨意搜尋yui看到這篇，關於流程中模組化的思路和模組粒度拆分的思路。前端 相對於後端 版本很難控制，並行開發，前端 衝突很容易發生，公共檔案被不同需求所篡改的機率很大，因為前端 是基於頁面的而不是邏輯。所以就要按照修改頻率將其拆分，業務層的拆分越小越好，底層的可以適當的合併。對於css和js同樣適用...

前端到後台ThinkPHP開發整站（7）

今晚我繼續這個專案的前台開發，把前台的做出來了，現在專案進行乙個收尾工作了，還有欄目頁和乙個文章頁的開發，做完這兩個算是完成了。說到這裡感覺有點鬆懈了，把剩下兩個功能頁面做完在吹吧，先看看今天弄的 吧！前台公共控制器 namespace home controller use think contr...

寫jquery外掛程式的思路

不要覺得寫外掛程式很難，只是你把問題想的太複雜了，本文教你在10分鐘內搞定乙個簡單的外掛程式。其實就是把一些常用 實用 通用的功能封裝起來而以，簡單的來講就是把這些 放在乙個方法裡面，可以達到重複使用的效果，這樣就可以不需要每次要用此功能的時候都去重新寫一遍。1.先定義乙個外掛程式 function...