後端工程師必學的前端 css 知識
後端工程師雖然大部分工作都是跟伺服器快取資料庫打交道，但有時也需要寫一些前端程式碼。
有些公司的OAM後臺基本是由後端工程師承包的，所以前端基礎知識是必須要掌握的；就算開發中不直接寫前段程式碼，瞭解前端知識能讓我們跟前端小夥伴更愉快的交流。
Js對於後端小夥伴來說不算難點，能夠順手的使用（當然十分依賴 jQuery），涉及到 css 就會有點懵逼了。
後臺開發一般不會用到太難的前端技巧，能夠在完成正確佈局的基礎上，再稍微做一些美化，就已經夠用了。
下面的內容有一些程式碼樣例，這是一部分前置的 css 樣式。
.
把元素放到正確的位置上
1）文件流
瀏覽器會把 html 元素按照從上到下，從左到右依次排放。
Html 中全部元素都是盒模型，盒子會佔用一定的空間，依次排放在HTML中，形成了文件流。
某些特殊的 css 樣式會把元素脫離文件流。某個元素脫離文件流後，在文件流中的其他元素將忽略該元素並填補其原先的空間。
1.1）float 浮動方式脫離文件流
示例：
效果：
給中間的紅色塊新增浮動：
效果：
紅色塊在原來的行內向左浮動並脫離了文件流，下面的綠色塊頂上來了。
float 還有一些其他用法，但float一般不常用，這裡不多做討論。
1.2）使用定位脫離文件流
如果給元素設定了 position 屬性，且該屬性的值是 absolute 或者 fixed，則元素也會脫離文件文件流。
脫離前的程式碼示例：
效果：
脫離後：
效果：
雖然兩個紅色塊還在原來的坑上，但實際上它們已經不佔文件流了，所以下面的兩個綠色塊都上來了。
1.3）display: none
設定 display 屬性為 none，脫離文件流，並不在頁面展示了。
2）display 樣式
display 樣式決定了元素的展現形式。
display 有很多取值，比如上面提到的 none 值表示不在頁面展示。
對於後端小夥伴來說，除了 none 外，只需要再瞭解三個值就足夠用了，它們分別是 block，inline-block，inline。
2.1）block 塊元素
塊元素在瀏覽器中展示時，通常會以新行來開始（和結束）。
常見的（display 預設為 block）塊元素有 <h1>...<h6>, <p>, <ul>, <table>, <div>, <pre>。
舉個栗子：
效果為：
三個塊級元素各佔一行。同時你可能會發現這三個元素上下之間有間距，這是因為 p h1-h6 標籤預設是有 margin-top margin-bottom 的。
同時 可以給塊級元素設定高寬 ，寬度未設定時預設是 100%。
2.2）inline 元素
行內（inline）元素會在一行內從左向右排布，如果一行排滿了，會往下一行堆疊。
常見的行內元素有 span label b i sub sup，等文字格式化標籤。
舉個栗子：
效果為：
細心的話，你會發現上面這些元素都設定了 w100 這個類，但是高寬都沒有變化。這是因為 行內元素不能設定高寬，只會根據內容的高寬自適應 。
ps:每個行內元素之間的空格是因為在編輯前裡兩個標籤之間有個回車以及多個 tab（空格），這些不可見字元被當成一個空格展示了。最後兩個元素沒有間隔，所以中間沒有空格。
2.3）inline-block 行內塊
行內塊元素既可以設定高寬，又可以像行內元素一樣並排排列。
常見的行內塊元素有 img input button select等。
示例：
效果為：
2.4）display小結
各個元素都有自己預設的 display 屬性，但我們可以給元素設定 display 屬性覆蓋預設的屬性。
比如給 div 設定 display: inline-block，就可以讓塊兒並排排列了。給 span 設定 display:inline-block，就可以設定高寬了。
示例：
效果：
3）position 樣式
position 決定了元素的定位方式。
設定定位後，可以通過設定 top right left bottom 樣式來設定元素的位置。
其中，relative 定位的 top right left bottom 值是相對於其原來位置的偏移。
absolute fixed 定位的 top right left bottom 值是距離其包含塊內邊框的距離。
程式碼示例：
<div class="container relative">
<div class="red" style="height: 200px">
<div class="green absolute w100" style="right: 10px; bottom: 20px">
</div>
</div>
<div class="green relative" style="height: 300px; width: 500px; margin: 0 auto; top: -20px; border: 5px solid red">
<div class="red absolute w100" style="right: 10px; bottom: 20px">
</div>
</div>
</div>
效果：
使用 calc 與百分比自適應寬度
在做後臺頁面時，經常會有這樣的場景：左側選單寬度不變，右側面板跟隨瀏覽器寬度變化。
解決方案：父元素寬度 100%，左側選單寬度固定，右側面板寬度為 calc(100% - (兩個塊的內外邊距邊框之和+左側寬度))
示例：
效果：
vertical-align:top 行內塊常用的上下對齊
在寫表單或者某些特殊佈局時，多個並列的行內塊可能高度不一，通常來說，把他們頂部對齊是比較好看的。
示例：
效果：
box-shadow 讓塊變得更有立體感
在使用面板、按鈕、輸入框等可互動內容或大塊內容時，設定適當的盒陰影效果能夠增加頁面立體感。
效果：
transition 增加使用者體驗
transition 能夠讓不同狀態之前的樣式變化有個漸變的過程。也是常用的優化手段。
常與 hover 同時使用。
示例：
效果
border-radius 的高階用法
border-radius 除了可以設定簡單的圓角外，還可以單獨為不同的角設定不同的弧度；所有角設定 50% 還能實現橢圓（或者圓形）。
示例：
效果：
Line"/>
最後
文章分享就到這裡了，更多幹貨可以關注一下小編。
自己是一個五年的全棧工程師，這裡推薦一下我的前端學習交流群： 731771211 ，裡面都是學習前端的，群裡會不定期更新最新的教程和學習方法，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的web前端黨歡迎加入，
點選： ofollow,noindex">前端