box model、display 的三種形式、定位(position)


Posted by saffran on 2021-02-06

CSS 基礎 Part3:盒模型(box model)

什麼是 box model?

每一個 HTML 元素都可以看成是一個盒子,這個盒子會由四個部分所組成,從內到外分別是 content, padding, border, margin。打開開發者工具,就可以看到這個 box model(如下圖所示)

關於 box model,要注意的是 box-sizing 這個屬性
box-sizing 這個屬性可以決定「要用什麼樣的模式來顯示 box model」

  • box-sizing 的預設值是 content-box,意思就是:假設我設定了一個 width, height 各是 100px 的元素,這 100px 只會是「content」的寬高而已,因此如果我想要計算整個元素的寬高,就還要再加上 border 和 padding 的部分。例如我加上 20px 的 padding,那麼元素的寬就會是 100px + 20px(left padding) + 20px(right padding) = 140px

因為 content-box 對開發者來說,計算寬高還要加加減減很麻煩,因此通常都會把 box-sizing 設定為 border-box

  • 如果把 box-sizing 設定為 border-box,意思就是:假設我設定了一個 width, height 各是 100px 的元素,這 100px 就已經是包含 content + border + padding 的部分了。例如我加上 5px 的 border 後,content 就會往內縮,元素的寬高還是一樣會是 100px
    • border-box 對開發者來說很方便,因為不需要再去加加減減的計算寬高,因此通常都會設定成 box-sizing: border-box

參考資料 話說 Box model 是什麼呢?

display 的三種形式:inline、block 與 inline-block

display: inline

  • span, a 這些元素,預設就是 display: inline
  • 調整 width, height 沒有作用(元素的 width, height 都是根據內容來決定的)
  • 調整上下的 margin 沒有作用(只能夠調整左右的 margin)
  • 調整左右的 padding 會把元素左右撐開,也會影響到元素的左右位置
  • 調整上下的 padding 不會改變元素的位置,但還是會以元素 content 為中心點把元素的上下給撐開
  • 使用時機:同一列可以並排多個 inline 元素

display: block

  • div, h1, p 這些元素,預設就是 display: block
  • 調什麼都可以(可以任意調整元素的 width, height, padding, margin)
  • 使用時機:當我想要自己就佔滿一整列(寬度會撐滿整個父元素),不跟其他元素並排

display: inline-block

inline-block 集合了 inline 和 block 的優點

  • button, input, select 這些元素,預設就是 display: inline-block
  • 跟 inline 一樣可以並排
  • 跟 block 一樣可以調整 width, height, margin, padding
  • 使用時機:想要並排多個元素,又想要調整元素的 width, height, margin, padding

CSS 基礎 Part4:定位(position)

position: static

  • 每個元素,預設就會是 position: static
  • static 會順著排版流
  • 會用到的場合:沒有需要特殊的排版時,就可以順著排版流去排

position: relative

  • position: relative 就是「相對定位」
  • 用 top, right, bottom, left 來調整元素「相對於自己在 position: static 時」的位置
  • relative 會順著排版流
  • 只會改變自己的位置,不會影響到其他元素的位置
  • 會用到的場合:要做出彈跳視窗右上角的叉叉按鈕,彈跳視窗就要設定為 position: relative,這樣就可以做為叉叉按鈕的參考點

position: fixed

  • position: fixed 會相對於 viewport (瀏覽器窗口)做定位
  • 會脫離正常的排版流
  • 會用到的場合:網頁右下角的 go-to-top 按鈕,就可以用 position: fixed 來固定在右下角的位置

position: absolute

  • position: absolute 會相對於參考點去做定位,也就是「絕對定位」
  • 如果都沒有找到參考點,那就會以 body 做為參考點去做定位
  • 會脫離正常的排版流
  • 會用到的場合:要做出彈跳視窗右上角的叉叉按鈕,彈跳視窗就要設定為 position: relative,叉叉按鈕設定為 position: absolute,叉叉就可以相對於彈跳視窗去做定位

position: absolute 要怎麼找到參考點?

往上找,找到的第一個「position 不是 static 的元素」就是參考點

z-index

  • z-index 可以決定圖層的順序

sticky

.box 還沒到達 top: 30px 這個位置之前,.box 都會按照正常的排版流(static)

一旦到達了 top: 30px 這個位置,就會被黏住(變成 fixed)

.box:nth-child(2) {
  background-color: pink;
  position: sticky;
  top: 30px;
  z-index: 2;
}

#css







Related Posts

使用 Python 和 PyGame 遊戲製作入門教學

使用 Python 和 PyGame 遊戲製作入門教學

Why you should or shouldn't use Google DNS?

Why you should or shouldn't use Google DNS?

[ Day 06 ] 用 InstaPy 打造 Instagram Bot 吧

[ Day 06 ] 用 InstaPy 打造 Instagram Bot 吧


Comments