# 排版的那些事 (display、margin 、Box-Model、position)
>通用輔助小工具:
>:::spoiler
>[Grid Ruler-尺標工具](https://chrome.google.com/webstore/detail/grid-ruler/joadogiaiabhmggdifljlpkclnpfncmj)
>[ColorPick Eyedropper-顏色選取](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg)
>:::

[toc]
## 版面配置
### display 屬性
<!-- overflow、margin、display圖片說明、多行文字斷行 -->
> 來源連結: [display-MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
:::info
在**配置版面**的時候==display==是最重要的屬性。每個HTML元素都有一個預設的display值，不同的元素屬性會有不同的預設值。
大部分元素的display屬性預設值通常是==block==(區塊元素)或==inline==(行內元素)的其中一個。

譬如:< div >< /div > 的display屬性值是block，而< span > < /span > 、 < a > < /a >則是行。內元素
:::
### 幾個常見的display屬性
- block
- inline
- inline-block
- none
#### inline 跟 inline-block、block 差別
:::info
- inline:
- 元素可在同一行內呈現，圖片或文字均不換行，也不會影響其版面配置
- 不可設定長寬，元素的寬高由它的內容撐開
- Tips.我們通常會不會設定行內元素的上下margin或padding，因為排版不會隨著我們設定而改變。但並非不能設定，怎麼驗證呢?我可以用背景顏色來看，實際上會發現是有的。
- block:
- 元素寬度預設會撐到最大，使其占滿整個容器
- 可以設定寬、高、margin、padding，==但仍會占滿一整行==
- inline-block行內區塊
- 以inline的方式呈現，但同時擁有block的屬性
- 可設定元素的寬、高、margin、padding
- 可水平排列
:::
### margin 屬性
- margin:auto;
可以設定區塊元素的寬度，可以避免元素從左到右撐滿容器。可以設定左右外邊距(margin-left、margin-right)為auto 來使其水平置中。
元素在顯示的時候，只會顯示你所指定的寬度，然後將剩餘的寬度平居散落在左右兩邊的邊距上。
:::warning
問題來了! 看到賺到(其實超基本)
當瀏覽器視窗寬度比元素的寬度還要窄的時候，瀏覽器就會出現水平卷軸，請問該怎麼辦?

**方法:
可以使用max-width屬性。**
:::

:::success
進階，當你遇到Margin在父層被推移時，請看下面這篇。
[關於邊界重疊](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
:::

### Box-Model盒模型
:::info
在我們在討論 CSS 寬度時，不得不提到關於 Box Model。當你設定了元素的寬度，卻發現在顯示的時候，元素超過了你所設定的寬度。
這是因為元素的邊框（margin）和內距（padding）會撐開元素。看看下面的例子，我們設定了兩個樣式，這兩個樣式擁有相同寬度設定，但最後元素顯示的實際寬度卻不太一樣
:::
:::warning
問題來了!看到賺到(其實很基本)
那這樣的話，我是不是要常常算算數，在設置時，我們得預想的寬高，好麻煩怎麼辦?

**方法:
box-sizing的CSS屬性解決你的問題。**
當你設定一個元素樣式為box-sizing:border-box。這個元素的內距和邊距，將不會增加元素本身的寬度。
:::

### position 屬性
:::success
為了設計出更複雜的版面配置，我們需要探討關於 position 這個屬性。
:::
:::info
- static
- static 是預設值。任何套用 position: static; 的元素「不會被特別定位」在頁面上特定位置，而是照著瀏覽器預設的配置自動排版在頁面上，所有其他的屬性值都代表該元素會被定位在頁面上。
- relative
- relative 表現的和 static 一樣，除非你增加了一些額外的屬性。
- fixed
- 固定定位的元素會相對於==瀏覽器視窗來定位==，即便頁面捲動，他還是會固定在相同的位置。和 relative 一樣，我們會使用 top 、 right 、 bottom 和 left 屬性來定位。
- **Tips:** **固定定位元素不會保留它原本在頁面應有的空間**，不會跟其他元素的配置互相干擾。
- absolute
- absolute 與 fixed 的行為很像，不一樣的地方在於 absolute 元素的定位是在他所處上層容器的相對位置。
- **注意:** 如果其上層元素沒有可以被定位的元素的話，那它定位就相當於該網頁的所有內容，最左上角的絕對位置。看起來就是這張網頁的絕對位置一樣。所以當你的畫面在捲動時，該元素還是會隨著頁面捲動。請記得，只有套用 position: static 的元素屬於「不會被特別定位」的元素，套用 static 以外的屬性值都算是「可以被定位」的元素。

:::

:::danger
今日回家作業

請幫我完成以下排版

:::
:::success
下次暫定進度:
- CSS 屬性:
- float、flex
- GitHub
- 介紹、使用

或許
- SASS
- 介紹
- BEM命名規則
:::
###### tags: `前端讀書會`