不懂CSS的后端難道就不是好程序猿？
由于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;}
</div>二.復合選擇器：就是兩個或者多個基本選擇器，通過不同方式連接而成的選擇器
1.“交集”選擇器：由兩個選擇器直接連接構成，其結果是選中二者各自元素范圍的交集，其中第 一必須是標記選擇器 ，第 二個必須是類別選擇器或者ID選擇器 ，兩個選擇器之間 不能有空格，必須連續書寫
如：h3.class{color:red;font-size:23px;} div#special{...} 注意兩者間沒有空隔
</div>2.“并集”選擇器：同時選中各個基本選擇器所選擇的范圍，任何形式的選擇器都可以，并集選擇器是多個選擇器 通過逗號連接 而成的，
格式如:h1,h2,h3{color:red;font-size:23px;} 注意中間是有逗號分隔
三.后代選擇器：
寫法：把外層的標記寫在前面， 內層 的標記寫在 后面 ，之間 用空格分隔 ，當標記發生嵌套時，內層的標記就成為外層標記的后代了
舉個栗子：
</div><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>包圍起來的是蘭色
后代選擇器產生的影響 不僅限于元素的“直接后代”，而且會影響到它的“各級后代”
</div>四.子選擇器：也就是只有對 直接后代有影響 的選擇器，而對“孫子”以及對個層的后代不產生作用。
格式如下：p>span{color:blue;}
</div>有個例外的情況，就是如果 外部樣式 放在 內部樣式 的 后面 ，則外部樣式將覆蓋內部樣式。
<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>