後端工程師必知必會的前端 css 知識
後端工程師雖然大部分工作都是跟伺服器快取資料庫打交道,但有時也需要寫一些前端程式碼。
有些公司的OAM後臺基本是由後端工程師承包的,所以前端基礎知識是必須要掌握的;就算開發中不直接寫前段程式碼,瞭解前端知識能讓我們跟前端小夥伴更愉快的交流。
Js對於後端小夥伴來說不算難點,能夠順手的使用(當然十分依賴 jQuery),涉及到 css 就會有點懵逼了。
後臺開發一般不會用到太難的前端技巧,能夠在完成正確佈局的基礎上,再稍微做一些美化,就已經夠用了。
下面的內容有一些程式碼樣例,這是一部分前置的 css 樣式。
.green { background-color: lightseagreen; } .red { background-color: orangered; } .container { border: 1px solid #0000f1; } .w100 { width: 100px; height: 100px; } .w50 { width: 50px; height: 50px; }
把元素放到正確的位置上
1)文件流
瀏覽器會把 html 元素按照從上到下,從左到右依次排放。
Html 中全部元素都是盒模型,盒子會佔用一定的空間,依次排放在HTML中,形成了文件流。
某些特殊的 css 樣式會把元素脫離文件流。某個元素脫離文件流後,在文件流中的其他元素將忽略該元素並填補其原先的空間。
1.1)float
浮動方式脫離文件流
示例:
<div class="container"> <div class="green w100"> </div> <div class="red w50"> </div> <div class="green w100"> </div> </div>
效果:
給中間的紅色塊新增浮動:
<style>
.float {
float: left;
}
</style>
<div class="container">
<div class="green w100">
</div>
<div class="red w50 float">
</div>
<div class="green w100">
</div>
</div>
效果:
紅色塊在原來的行內向左浮動並脫離了文件流,下面的綠色塊頂上來了。
float
還有一些其他用法,但float
一般不常用,這裡不多做討論。
1.2)使用定位脫離文件流
如果給元素設定了 position
屬性,且該屬性的值是 absolute
或者 fixed
,則元素也會脫離文件文件流。
脫離前的程式碼示例:
<div class="container">
<div class="green w100">
</div>
<div class="red w50 ">
</div>
<div class="green w100">
</div>
<div class="red w50 ">
</div>
<div class="green w100">
</div>
</div>
效果:
脫離後:
<style>
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
</style>
<div class="container">
<div class="green w100">
</div>
<div class="red w50 fixed">
</div>
<div class="green w100">
</div>
<div class="red w50 absolute">
</div>
<div class="green w100">
</div>
</div>
效果:
雖然兩個紅色塊還在原來的坑上,但實際上它們已經不佔文件流了,所以下面的兩個綠色塊都上來了。
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>
。
舉個栗子:
<div class="container">
<div class="green">
哈哈
</div>
<h1 class="red w100">呵呵</h1>
<p class="green">
嘿嘿
</p>
</div>
效果為:
三個塊級元素各佔一行。同時你可能會發現這三個元素上下之間有間距,這是因為 p
h1-h6
標籤預設是有 margin-top
margin-bottom
的。
同時可以給塊級元素設定高寬,寬度未設定時預設是 100%
。
2.2)inline
元素
行內(inline
)元素會在一行內從左向右排布,如果一行排滿了,會往下一行堆疊。
常見的行內元素有 span label b i sub sup
,等文字格式化標籤。
舉個栗子:
<div class="container">
<p>
<span class="green w100">哈哈</span>
<label class="red w100">哈哈</label>
<b class="red w100">呵呵</b>
<i class="red w100">呵呵</i>
<sub class="red w100">呵呵</sub>
<sup class="red w100">呵呵</sup>
<span class="green w100">哈哈</span>
<label class="red w100">哈哈</label>
<b class="red w100">呵呵</b>
<i class="red w100">呵呵</i>
<sub class="red w100">呵呵</sub>
<sup class="red w100">呵呵</sup>
<span class="green w100">哈哈</span>
<label class="red w100">哈哈</label>
<b class="red w100">呵呵</b>
<i class="red w100">呵呵</i>
<sub class="red w100">呵呵</sub>
<sup class="red w100">呵呵</sup>
<span class="green w100">哈哈</span>
<label class="red w100">哈哈</label>
<b class="red w100">呵呵</b>
<i class="red w100">呵呵</i>
<sub class="red w100">呵呵</sub>
<sup class="red w100">呵呵</sup>
<span class="green w100">哈哈</span>
<label class="red w100">哈哈</label>
<b class="red w100">呵呵</b>
<i class="red w100">呵呵</i>
<sub class="red w100">呵呵</sub><sup class="red w100">呵呵</sup>
</p>
</div>
效果為:
細心的話,你會發現上面這些元素都設定了 w100
這個類,但是高寬都沒有變化。這是因為行內元素不能設定高寬,只會根據內容的高寬自適應。
ps:每個行內元素之間的空格是因為在編輯前裡兩個標籤之間有個回車以及多個 tab(空格),這些不可見字元被當成一個空格展示了。最後兩個元素沒有間隔,所以中間沒有空格。
2.3)inline-block
行內塊
行內塊元素既可以設定高寬,又可以像行內元素一樣並排排列。
常見的行內塊元素有 img input button select
等。
示例:
<p>
<img src="init.png" class="red w100">
<input class="green w50">
<button class="red w100">哈哈</button>
<select class="green w100">
<option>1</option>
</select>
</p>
效果為:
2.4)display
小結
各個元素都有自己預設的 display
屬性,但我們可以給元素設定 display
屬性覆蓋預設的屬性。比如給 div
設定 display: inline-block
,就可以讓塊兒並排排列了。給 span
設定 display:inline-block
,就可以設定高寬了。
示例:
<span style="display: block" class="red">我看起來像是p標籤了</span>
<div>
<p style="display: inline">香蕉</p>
<p style="display: inline">橙子</p>
<p style="display: inline">大?</p>
</div>
效果:
3)position
樣式
position
決定了元素的定位方式。
position | 描述 |
---|---|
static |
預設值,元素框正常生成。塊級元素生成一個矩形框,作為文件流的一部分,行內元素則會建立一個或多個行框,置於其父元素中。 |
relative |
元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。 |
absolute |
元素框從文件流完全刪除,並相對於其包含塊(離它最近的已經定位--非static 定位的祖先元素)定位。包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉,就好像元素原來不存在一樣。元素定位後生成一個塊級框,而不論原來它在正常流中生成何種型別的框 |
fixed |
元素框的表現類似於將 position 設定為 absolute ,不過其包含塊是視窗本身。(網站的“聯絡客服”按鈕一般是 fixed 定位) |
設定定位後,可以通過設定 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% - (兩個塊的內外邊距邊框之和+左側寬度))
示例:
<div class="container relative" style="width: 100%">
<div style="display: inline-block; width: 100px; height: 200px" class="red">
</div>
<div style="display: inline-block; width: calc(100% - 106px); height: 200px" class="red">
</div>
</div>
效果:
vertical-align:top
行內塊常用的上下對齊
在寫表單或者某些特殊佈局時,多個並列的行內塊可能高度不一,通常來說,把他們頂部對齊是比較好看的。
示例:
<div class="container relative" style="width: 100%">
<div style="display: inline-block; width: 100px; height: 100px; vertical-align: top" class="red">
</div>
<div style="display: inline-block; width: calc(100% - 106px); height: 200px" class="red">
</div>
</div>
效果:
box-shadow
讓塊變得更有立體感
在使用面板、按鈕、輸入框等可互動內容或大塊內容時,設定適當的盒陰影效果能夠增加頁面立體感。
<style>
.panel {
width: 180px;
height: 100px;
box-shadow: 0px 0px 8px red;
}
</style>
<div class="container relative" style="width: 100%; border: none; padding: 10px">
<div class="panel" style="padding: 10px">
<h3>內容介紹</h3>
</div>
</div>
效果:
transition
增加使用者體驗
transition
能夠讓不同狀態之前的樣式變化有個漸變的過程。也是常用的優化手段。
常與 hover 同時使用。
示例:
<style>
.button{
background-color: red;
color: white;
padding: 10px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color .3s;
}
.button:hover {
background-color: darkolivegreen;
}
</style>
<div class="container relative" style="width: 100%">
<button class="button">點我</button>
</div>
效果(原諒這裡沒有 gif):
border-radius
的高階用法
border-radius
除了可以設定簡單的圓角外,還可以單獨為不同的角設定不同的弧度;所有角設定 50% 還能實現橢圓(或者圓形)。
示例:
<h6 class="inline">小圓點</h6>
<div class="inline" style="width: 6px; height: 6px; border-radius: 50%; background-color: red">
</div>
<div class="red" style="border-top-left-radius: 50px; border-bottom-right-radius: 50px; width: 100px; height: 50px">
</div>
效果:
拋棄jQuery,擁抱 vue
至少能提高一倍的工作效率和N倍的可維護性。
以上。