排版技巧

當我們設計網頁時，CSS 排版屬性是非常重要的，它可以用來控制元素的尺寸、位置和排列方式。以下我們要帶大家看這些常見的 CSS 排版屬性和使用方法：

display 屬性是 CSS 排版其中一個最常用的屬性之一，這個屬性可以控制 HTML 元素在網頁上的顯示方式。每個 HTML 元素都有一個預設的 display 值，大部分元素的 display 屬性預設值為 block 或 inline 其中一個。

block 區塊元素常見的區塊元素標籤：<div>、<p>、 <form>以及 HTML5 新出現的元素，例如：<header> 、 <footer>、 <section> 等等。
- 區塊元素，佔據一整行。
- 元素寬度預設占滿父元素寬度100%。
- padding、margin 的水平與垂直設定皆會影響排版。
- 可設定寬高。
inline 行內元素常見的行內元素標籤：<span>、<a>、<img>
- 行內元素，元素寬度由它的內容決定，內容寬度=元素寬度。
- 元素可在同一行內呈現，圖片或文字均不換行。
- 只有水平方向的Padding、Margin會影響排版。
- 設定寬高無效。
inline-block 行內區塊
- 以 inline 的方式呈現，但同時擁有 block 的屬性。
- 可設定元素的寬高。
- padding、margin 的水平與垂直設定皆會影響排版。
none 畫面上不會有元素在，不會有長度寬度，也不會佔用畫面任何空間。另外常見的隱藏屬性 visibility: hidden; 畫面上看不到元素，但元素仍然存在，有長度寬度，會佔空間。

float 屬性最常見的例子就是你在報紙版面上會看到的文繞圖及圖繞文效果。

position的用途是「設定物件在定位時所要的參考對象」，position屬性值為：static、relative、absolute、fixed 或 sticky。

relative 相對位置使用 top、right、bottom 和 left 屬性來控制元素相對於其原始位置的偏移量。
absolute 絕對位置
- 往父層尋找有設定 position 但非 static 的元素。
- 以父層為基準 top、right、left、bottom 來決定要設定在哪裡。
fixed 固定位置
- 參考空間為視窗的範圍。
- 當頁面滾動時，元素的位置不會改變。
sticky 黏性位置在可捲動的元素裡呈現 fixed效果。

前面已經提到了 CSS display屬性的一些用法，而flexbox也是它的其中一員，flex可以讓我們更輕鬆地創建自適應性的布局，以及靈活的對齊方式，接下來我們透過簡易的圖解來帶大家了解各種flexbox的屬性質變化。

flexbox具有主軸起點、終點、尺寸與交錯軸起點、終點、尺寸的特性可以進行布局規畫

.flex-container { flex-direction: row | row-reverse | column | column-reverse; }

flex-wrap 在內元素超出外容器範圍時決定是否要換行的屬性。 .flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }
justify-content 用來設定主軸對齊排序。

.flex-container { justify-content: flex-start | flex-end | center | space-between | space-around; }

我們先簡單介紹一下內元件屬性，之後會再整理一篇 Flex 空間計算規則的教學給大家 🤪。

flexbox 的好姐妹。（待續）

Flex 推出至今已成為主流的 CSS 排版屬性，許多 CSS 框架也都是使用 Flex 來作排版。請大家回去多多練習，可以至下方參考資料的Flexbox playground搭配範例，動手試試看會更了解 Flex 如何使用喔！

Last updated 9 months ago