由於H5在移動端的發展如日中天，現在大部分公司對高級前端需求也是到處挖牆角，前端薪資也隨之水漲船高，那公司沒有配備專用的前端怎么辦呢？
作為老板眼中的“程序猿” 前端都不會是非常無能的表現，那作為后端人員需要不需要懂前端呢？為了提升價值還是需要懂點的，不然一點問題就找前端，那是不是讓別人瘋了……
前端先從最常見的調樣式說起吧，重要知識點之盒子模型，這里就不嘰嘰歪歪那些難懂的概念，直接看下面的圖吧。
什么叫做外邊距，內邊距……
圖1：英文版
通俗點就是下面的圖：
圖2：中文版
再看看總寬度與總高度的計算，應該都看得懂：
圖3
之所以要知道寬度與高度的計算，當你在一行內容后面再加個按鈕時，這個按鈕會隨着瀏覽器的大小滿屏的到處亂飛，雖然你左調右調寬度，定位，就差那一兩個像素的事會讓你抓狂，這時你就要學會計算那剛剛好的幾像素問題。
那這里就再講講多個元素之間要注意的問題：
padding只存在於一個盒子內部，所以通常它不會涉及與其他盒子之間的關系和相互影響的問題。
margin則用於調整不同的盒子之間的位置關系。
① 行內元素之間的水平margin
圖4 行內元素之間的水平margin
兩個塊之間的距離為：30px+40px=70px。
② 塊級元素之間的豎直margin
圖5 塊級元素之間的豎直margin
如果不是行內元素，而是豎直排列的塊級元素，margin的取值情況就會有所不同。
兩個塊級元素之間的距離不是margin-bottom與margin-top的總和，而是兩者中的較大者，如圖所示。這個現象稱為margin的“塌陷”（或稱為“合並”）現象，意思是說較小的margin塌陷（合並）到了較大的margin中。
有時你想給一個按鈕加個背景佬的啊，竟然無效果！一查原來是被其它樣式覆蓋了，怎么回事？那就要了解CSS樣式優先級
CSS樣式中會有外部樣式、內部樣式和內聯樣式同時應用於同一個元素，就是使多重樣式的情況。
一般情況下，優先級如下：
（外部樣式）External style sheet <（內部樣式）Internal style sheet <（內聯樣式）Inline style
行內樣式（直接在元素上打style=""）》 ID樣式(用id=標識)》 類別樣式（class=""） 》 標記樣式（寫在head中或css文件中）
標准的寫法當然是將樣式統一寫在css的文件中方便復用管理，頁面中盡量不要寫樣式，保持代碼的整潔性。（看到一鍋粥的頁面你是不是會有一種看到大海的感覺……）
那怎么定位到我想到的元素呢？CSS選擇器出場
一.基本CSS選擇器有標記選擇器、類別選擇器、ID選擇器3種：
1.標記選擇器
每一種HTML標記的名稱都可以作為相應的標記選擇器的名稱，如h1,p,div等等
2.類別選擇器
類別選擇器的名稱可以由用戶自定義
格式如下：.class{color:green;font-size:20px;}
3.ID選擇器
與類別選擇器相試
格式如下：#id{color:green;font-size:20px;}
二.復合選擇器：就是兩個或者多個基本選擇器，通過不同方式連接而成的選擇器
1.“交集”選擇器：由兩個選擇器直接連接構成，其結果是選中二者各自元素范圍的交集，其中第一必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器，兩個選擇器之間不能有空格，必須連續書寫
如：h3.class{color:red;font-size:23px;} div#special{...} 注意兩者間沒有空隔
2.“並集”選擇器：同時選中各個基本選擇器所選擇的范圍，任何形式的選擇器都可以，並集選擇器是多個選擇器通過逗號連接而成的，
格式如:h1,h2,h3{color:red;font-size:23px;} 注意中間是有逗號分隔
三.后代選擇器：
寫法：把外層的標記寫在前面，內層的標記寫在后面，之間用空格分隔，當標記發生嵌套時，內層的標記就成為外層標記的后代了
舉個栗子：
<html> <head> <title>后代選擇器</title> <style type="text/css"> p span{ color:red } span { color:blue; } </style> </head> <body> <p>嵌套<span>用CSS</span>標記的方法</p>嵌套之外的<span>標記</span>不生效 </body> </html>
效果：
效果是：“用CSS”的顯示紅色，其他用<span>包圍起來的是蘭色
后代選擇器產生的影響不僅限於元素的“直接后代”，而且會影響到它的“各級后代”
四.子選擇器：也就是只有對直接后代有影響的選擇器，而對“孫子”以及對個層的后代不產生作用。
格式如下：p>span{color:blue;}
有個例外的情況，就是如果外部樣式放在內部樣式的后面，則外部樣式將覆蓋內部樣式。
<head> <style type="text/css"> /* 內部樣式 */ h3{color:green;} </style> <!-- 外部樣式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/> <!-- 設置：h3{color:blue;} --> </head> <body> <h3>測試！</h3> </body>
這里就先講兩個常用甚而知識點，等有空再補其它內容……
最后還是那個問題：后端程序猿必須要懂前端么？投票
福利：同學們注意了下載源碼已上傳至公眾號【一個碼農的日常】回復：數據庫，NET 即可自行下載，以后會定期更新