[CSS] box model/ display/ position


Posted by yunanpan on 2020-08-21

說明 CSS 中盒模型、display、position 的概念與應用。

什麼是盒模型(box model)?

HTML 的元素都可以視為一個盒子。
盒子從內到外包含元素本身的寬高、paddingbordermargin
預設的 box-sizingcontent-boxcontent 指的是圖片中藍色的區塊,所以paddingbordermargin 都是會往外長的部分。

如果想要在寬=900(粉紅色區塊)中平均放三個 item(灰色區塊),會設定三個 item 的寬為 300,但此時再去調整 padding 或是 border 會發現版面跑版了:

一點美感都沒有的配色

這是因為設定的 300content 的寬,所以調動了 content 以外的部分,就會讓整體的尺寸塞不下寬度 900 的範圍內了。
要解決這個問題,可以將 itembox-sizing 改為 border-box,意思是指將以 contentpadding 為界的範圍改到以 bordermargin 為界。如此就算改動 padding 或是 border 都是往內擠,不會影響到原設定好的寬度:

延續沒有美感的配色

display: inline, block 跟 inline-block 的差別

inline:

  1. 尺寸就是內容,無法靠 heightwidth 設定長寬。
  2. 設定上下的 padding 時,看似面積有變大,但實際的高度依舊是一行的高度。
    如下圖所示,灰色區塊是 display: inline 並且設定 padding 和粉紅色 display: block 排起來的樣子,可以看到灰色和粉紅色的區塊疊在一起,表示灰色 inline 區塊的高度並沒有隨 padding 的值而增高。而要以 margin 調整上下時也無效。
  3. inline 可以排在同一行。
  4. 使用時機:想讓元素在同一行排列且沒有要設定寬高時使用。 <a><span> 等原來設定就是 inline

block:

  1. 尺寸可以以 heightwidth 來設定。
  2. 承第 1 點,所以設定 padding 時是有作用的。
    灰色區域是有設定寬高及 paddingblock,可以看到與粉紅色的區塊並沒有疊在一起,設定的高與 padding 都有算在高度裡。
  3. block 會自己占據一整排。
  4. 使用時機:當元素要占據一整行時。<div><h1><p> 的預設值為 block

inline-block:

  1. inline-block 可以說是 inlineblock 的小孩,結合了 inline 可以排在同一行及 block 可以設定高寬的特性。如下圖是將灰色及粉紅色都調整為 display: inline-block 後的排版:
  2. 灰色與粉紅色區塊中的空白,是由於在寫 html 時 divdiv 之間有字元空格所產生的。
    • 調整父層的 font-size: 0
    • 用 comment < > 夾在中間
  3. 使用時機:希望可以像 inline 一樣可以併排,但又想要可以像 block 一樣可以條寬高時使用。

position: static, relative, absolute 跟 fixed

static:

  1. position 的預設值。
  2. 在沒有想要元素特別改動位置的時候使用。

relative:

  1. 以元素在畫面原本的位置為基準點所做的移動,並且會保留原位置,維持文件的排版流。
  2. 可以運用在元素互換位置,或是廣告視窗內的文字與圖片排版。

absolute:

  1. 如果上一層的 positionstatic,會再繼續往上層找,直到找到 postionstatic 的一層,並以此層為基準點移動元素。如果都沒找到,則會以 body 作為父層。與 relative 不同,並不會保留元素原本的位置,之後的元素會往前遞補,就像是元素從平面被抽離到另一個平面。可設定 z-index 的值調整元素的前後關係。
  2. 可運用於促銷的產品卡右上角會出現的 sale 圖案,或是廣告右上角的叉叉圖示。

fixed:

  1. 以視窗為基準點調整位置,所以當畫面捲動時,也不會改變其位置,會一直顯示在畫面中。
  2. 可以用在 navbar 、返回最上面的圖示,或是總是會跳在畫面正中央的煩人廣告上。
註:預設的原點是元素的的左上角。可搭配 transformtranslate 來調整原點,達到版面置中的效果。









Related Posts

程式導師實驗計畫 Week8 作業與解答

程式導師實驗計畫 Week8 作業與解答

容器化的概念

容器化的概念

超級無敵重要的 Immutable 觀念

超級無敵重要的 Immutable 觀念


Comments