Published on

Course - 網頁實戰入門 (HTML x CSS) Class Day 02

會影響 layout 排版

  1. display
  2. position
  3. float
  4. margin
  5. padding
  6. width/height

max-width 最大寬度

  • 視窗放大縮小時,會跟著視窗跑,可以運用在 RWD
  • 固定寬度的話,視窗放大時會被固定,縮小時會出現橫向捲軸
  • 圖片的話可以給 max-width = 100%,就可以跟著視窗放大縮小

Box Model

  • 使用 margin 不會改變原本 div 的寬度
  • div 裡面的資料作縮排的話用 padding,如果是 div 跟 div 之間的排版的話用 margin
  • border 算是 div 的寬度,所以排版的話還是會從左邊開始排版
  • 如果要了解 div 的大小的話,一般會設定 background 用來測試看看是那裡跑版
  • 使用 margin 時 並不會變色,因為並不是 div 的範圍
  • 使用 padding 時會變色,因為 padding 算是 div 裡面的寬度
  • 如果設計給出來的寬是 400,因為 padding 跟 border 會改變,所以設定寬度時要重新計算

box-sizing

webkit-boz-sizing: border-box;
moz-box-sizing: border-box;
box-sizing: border-box;
  • for IE 8 以上,主要是為了調整 box model 的計算方法,用 border 當成整個容器的最外框去重新計算寬度

float 排版

  • 像是文繞圖的方式移到左邊或是移到右邊
  • 把它想像成 work 的文繞圖一樣,把圖片放在左邊的樣子,就把它設定 float = left,在調整文字的部份可以使用下面兩種方式:
  1. 用 margin 調整,設定文字 margin-left = 圖片的寬度,要注意如果有 border 時的寬度要加上去,不然會有對齊的問題
  2. 用 float 調整,文字直接用 float = left,有可能會有掉下來的問題,後面那個 (文字) 需要給它一個寬度
  • 如果要使用 float 排版的話,全部都要設定寬度,這樣子才會準確的排版
  • 使用 float 排版的話會比較精準,建議使用 float

position

  • 設定的話就會變成像 float 一樣,變成浮動的 html
  • 設定 position = absolute (絕對),html 原本的位置會消失,會從視窗的左上角開始排,可以使用 top 跟 left 排版,是從最左上角開始算,並不是從所在容器算
  • 設定 position = relative (相對),會保留原本 html 的位置,並不會跳脫出原本所在容器,top 跟 left 值是從所在容器的左上角開始算,
  • 如果要用 position 排版的話,最外層需要設定 position = relative,這樣子裡面的有設定 position = absolute 的就會從外層容器開始算,不是從 視窗左上角開始算
  • 不用 position 排版的原因:
  1. 用太多的話會很混亂
  2. 如果內容太少的話,有可能會包不住設定 position = absolute 的容器

display inline-block

  • 可以緊密排列,又有 block 的特性
  • 使用 float 的話需要 清除浮動,inline-block 的話就不用寫,它沒有浮動的問題
  • 上層如果是 float = left,清除的話就是 clear = left
  • 如果是用 float = right,就是 clear = right
  • 也可以寫 clear = both,就不用管是 left 還是 right
  • 使用 inline-block 的話,inline-block 跟 inline-block 之間會有固定間距,所以如果寬度相加起來是 100% 的話,就會因為間距而跑版。有兩種解法可以解決這個問題:
  1. 把 html 的 tag 連在一起就沒有間距
  2. 在 inline-block 的外層設定 font-size = 0px,就可以把 inline-block 的間距清掉,不過還要在裡面設定 font-size
  • 因為解法很麻煩,所以一般的排版不會用 inline-block 取代 float

SMACSS - Module

  • 可以單獨存在而且可重複使用的元件
  • 如果拿掉也不會造成破版
  • 使用 class 定義 Module,不要用 id 跟 html tag
  • 定義子模組的話,在 父模組後面加上 - 作為名稱
  • .menu (父模組)
  • .menu-submenu (子模組)
  • .menu-constrained (子模組)

清除浮動時:

  • 可以加上 一個 div 設定 clear
  • 給外層容器設定一個高度就可以不用寫這個 div,不過這個 div 會受裡面的東西影響
  • 在外層寫 overflow = hidden,作用同 clear = both,可以清除 float 的浮動

排版相關注意事項:

  • menu 選單不是 div 區塊,建議使用 display-block 排版,而使用 margin 的話,就會填補原本間隙的位置
  • 如果 logo 裡面是 img,這個時候使用 float 不設寬度的話,就裡以裡面 img 的寬度為主,所以也可以不用設定寬度,不過還是習慣設定會比較好
  • 如果是有意義的圖片,就用 img 去作,沒有意義的話就用 background
  • 當設定了 padding 跟 margin 的時候,就要記得寬度可能需要調整
  • 可以省略的 class 就可以不用寫
  • 用 box-sizing 的話,可以把 width 改成用 % 比較方便
  • div 裡面只有 img 的話,圖片跟 div 之間會多出一點間距,這個時候可以把 img 的 display 設成 block 就不會有這個問題
  • a 底圖預設的大小是取決於文字
  • 寫比較多層的權重比較大,如果相同的話,比較先後順序
  • 如果大部份的 row 都一樣,只有一個不同的話,可以先對全部都設定一樣,在對小部份作單獨設定
  • nth-child(x) 找到 html 結構裡面的 第 x 個元素
  • 如果是橫向排列跑版的話,9 成跟 float 有關,通常是 width 或者是 overflow = hidden 的問題
  • 容器沒有包住原本的內容的話通常是 overflow = hidden 的問題

SASS 修改 config.rb 建議

  • css_dir => "css"
  • javascripts_dir => "js"

如果是現有專案要導入 scss 的話

  1. 建議 css 路徑不要設定的跟 正常的一樣
  2. 建立 Compass 專案
  3. 複製原有的 css 到 stylesheets,改副檔名 .css 為 .scss
  4. reset 可以改用 compass 的,就可以不用自已寫了 @import "compass/reset";

如果要把 import 的檔案 compile 成一個檔案,就把 scss 的檔名 改成 "_" 開頭,這樣子就會變成一個檔案