[ CSS 03 ] 盒模型（box model）與定位（position）

設計時加了 border 和 margin，他是內容物往外長，但是設計師跟你說要 200px * 100px，自己還要加加減減扣掉 border 和 margin，非常麻煩，所以可以利用 box-sizing

box-sizing: content-box; 內容物寬高
box-sizing: border-box; 意思是把 border 和 margin 都會考慮進來

補充 : MDN (The box model)

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

display屬性基本上可分為兩種顯示模式，一種是行內元素(inline)，另一種為區塊元素(block)

常見區塊元素標籤：div、ul li、p、h1
常見行內元素標籤：span、a、imput、img

block : 元素寬度預設會撐到最大，使其占滿整個容器，多個元素會換行來呈現，並不會並排，div， h1， p...調什麼都可以
inline 行內元素 : 預設代表 span， a 。調寬高沒用，元素的寬高是根據內容決定，上下邊距沒用，只有左右會變
inline-block : button, input, select
對外像 inline 可併排，對內像 block 可調各種屬性

px : 像素，圖像的基本單位是像素px（沒有比像素更精細的單位了）
em : 以母元素的基礎字體大小作為倍數的單位
母元素 12px
1em = 12px
2em = 24px
....

rem : 以根元素的基礎字體大小作為倍數的單位

定位（position）

static : 不會被特別定位在頁面上特定位置，而是照著瀏覽器預設的配置自動排版在頁面上。

relative :在一個設定為 position: relative 的元素內設定 top 、 right 、 bottom 和 left 屬性，會使其元素「相對地」調整其原本該出現的所在位置，而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間，都不會影響到原本其他元素所在的位置。

fixed : viewport，相對於瀏覽器做定位，即便頁面捲動，它還是會固定在相同的位置。和 relative 一樣，會使用 top 、 right 、 bottom 和 left 屬性來定位。

absolute : 某個參考點做定位，往上找不是 static 做定位

.box {
  position: relative;
}

.box {
  position: absolute;
  top: 10px;
  right: 10pz;
}

決定圖層順序 z-index

z-index: 2; 數字越大越前面

sticky

沒有到特定位置時是 static，滾到最上面時就變成 fixed 狀態

補充好用工具 :

Normalize.css
他是一個 css 的檔案
What does 100% mean in CSS? : % 所遵照的元素是?

補充文章 :
圖解 Flexbox 基本屬性

Flexbox

justify-content 屬性定義了瀏覽器之間，如何分配順著彈性容器主軸(或者網格行軸)的元素之間及其周圍的空間。

flex-start: 元素和容器的左端對齊。
flex-end: 元素和容器的右端對齊。
center: 元素在容器裏居中。
space-between: 均勻排列每個元素，首個元素放置於起點，末尾元素放置於終點。
space-around: 元素周圍保持相等的距離。

align-items

flex-start: 元素與容器的頂部對齊。
flex-end: 元素與容器的底部對齊。
center: 元素縱向居中。
baseline: 元素在容器的基線位置顯示。
stretch: 元素被拉伸以填滿整個容器。

flex-direction

row: 元素擺放的方向和文字方向一致。
row-reverse: 元素擺放的方向和文字的方向相反。
column: 元素從上放到下。
column-reverse: 元素從下放到上。

注意 :

當調轉列或行的方向後(例如 : flex-direction:row-reverse)，flex-start 和 flex-end 對應的方向也被調轉了。
當 flex 以直列爲方向時(例如 : flex-direction:column;)，justify-content 控制縱向對齊，align-items 控制橫向對齊。

使用 order 來調正特定元素的位置

#pond {
  display: flex;
}

.yellow {
order:2;
}

box-sizing

設定一個元素樣式為 box-sizing: border-box;
這個元素的內距和邊框將不會增加元素本身的寬度。

排版補充 :
white-space: pre-line; : white-space 屬性決定如何處理元素內的空白字元
word-break; break-word : word-break 有屬性可以選擇讓文字要不要溢出內容框

[ CSS 03 ] 盒模型（box model）與定位（position）