在維護別人的專案時,很多時候無法堅持用自己的準則來面對別人的程式碼,即便重構是一種選擇,但因為很多 BUG 是有急迫性的,前端不會在乎程式碼寫的多漂亮,只在乎現在話面怎麼有問題。
在這情況下,使用 className 堆疊 來調整 CSS 樣式就是一種選擇。
在寫網頁式常用的尺寸單位有 PX、EM、REM。
PX 使用上很直觀,是相對容易入門的單位。
EM、REM 是依照比例做計算,在做響應式網頁有優勢。
有很多方法可以達到水平置中、垂直置中,這邊示範一些筆者比較常使用的寫法。
直接在需要水平置中的元件上使用左右調整 auto
margin: 0 auto;
在寫 CSS 的時候,可以使用繼承的觀念來少寫重複的程式碼。了解繼承的觀念,在閱讀別人的程式碼或是 debug 時,也可以較容易找出 css 有無套用的原因。
文字相關的屬性,預設是有繼承的效果,例如:
font-size | color | font-weight |…
Flex 是屬於 CSS3 的屬性,對於排版的靈活度比起 Float 還要高很多,因為 Flex不只可以水平排列,還能垂直排列。並且每個內部元件都可以在各自作排列。
在開始寫響應式網頁時,必須要在 head 標籤內放入相關的語法。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
在撰寫網頁時,使用 VS Code 、 Bracket 、 CodePen ……等等的編輯器時,只要按出驚嘆號加上 tab 鍵,就會自動產生出基本的網頁語法架構。
! + tab
下面的語法是VS Code按出來的網頁基本語法。
<!DOCTYPE html>
<html lang=”en”>
以下會舉例一些圖片引用的方法,以及運用的技巧。
直接將要載入的圖片路徑放進img標籤裡面。
<img src=”http://lorempixel.com/200/200/food/" alt=””>
一般並不會把高度給固定寫死,否則當裡面的內容資料超出高度時,顯示出來的效果就會不如預期。
CodePen連結
.box1 給了一個固定的高度 height: 50px當裡面的文字數量超過他指定的高度時,就會有部分文字超出底色的範圍,這樣的效果並不是我們想要達到的。
Position屬性的用法有四種: