# HTML & CSS

## Box Model
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Types_of_CSS_boxes
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow

### Block boxes
* 佔滿整個 container 的寬度
* 產生新的一行
* 可設定 width, height
* padding, margin, border 會將其他的 element 推開

### Inline boxes
* 不會產生新的一行
* 無法設定 width, height
* 設定上和下的 padding, margin, border 不會將其他的 element 推開
* 設定左和右的 padding, margin, border 會將其他的 element 推開

### Outer display types
* element 之間互相排版的方式
* inline, block

### Inner display types
* element 在 container 內以何種方式排版
* flexbox, grid, normal flow(inline, block 樣式)

### others
* inline-block (outer: inline, inner: block)
* 可以設定 width, height
* 上下的 padding, margin, border 會把其他的 element 推開
* inline-flex (outer: inline, inner: flex)

### Box model
* content box
* padding box
* border box
* margin box

### box sizing
* standar
* 設定 width, height 是給 content box
* 整個元件實際看到的所佔的空間(width, height)，還會加上了 content + padding, border
* border-box
* 設定 width, height 是給 content box + padding + border

### margin
* 可以有負值
* element 之間 maring 重疊的話，會以 margin 大的當作顯示的margin

### border
* 沒有負值

### padding
* 沒有負值

## CSS layout

## position
* relative 不會脫離原本的flow, 其他元素不會取代原本的位置
* absolute, fixed 會脫離原本的 flow，其他元素會取代其原本的位置。
* fixed, absolute 元素，原本是 block 的，fixed / absoluted 後，長寬不再佔滿整個 container，而是依照內容而決定長寬。

## float
* 會脫離原本的flow, 其他會取代其原本的位置。
* 原本是 block 的，float 後，長寬不再佔滿整個 container，而是依照內容而決定長寬。

### Flex Layout
one-dimensional layout
* x-軸：main axis y-軸：cross axis
* flex item （main size, cross size）
* 預設的 flex item 是在row排列的(flex-direction: row;), 可改成用column 排列(flex-direction: column;)
* flex 是一維的layout，但當column 數多時畫面會擁擠，此時可設置 flex-warp: warp; ，就會將column自動換行。
* flex-flow: row wrap ==> flex-direction: row; flex-wrap: wrap;
* flex 對外為 block layout，內部為 flex layout。因此元件設為 flex 後，該元件及內部的 flex item ，都可以設定寬和高 (不論該元件及 flex item 原本為inline or block)
* inline-flex => 對外是 inline, 對內是flex。因此如同 inline的特性，該元件的寬高是由內部的flex item 撐起來的。
* justify-content(左右), align-items(上下): flex container 控制 flex item 整行和整列的位置
* flex-direction: row 時，justify-content(左右), align-items(上下)
* flex-direction: column 時，justify-content(上下), align-items(左右)
* align-items 都是在做 cross axis 的 align
* justify-content 都是在做 main axis 的 align
* align-content: align-items 的多行版本(flex-wrap: wrap 時)
* flex-direction: row 時，justify-content(左右), align-content(上下)
* flex-direction: column 時，justify-content(上下), align-content(左右)
* align-self: 控制 flex item 自己的位置 (做 cross axis 的 align)
* flex: 「flex-grow」、「flex-shrink」和「flex-basis」
* flex:
* initial: 等於 flex： 0 1 auto, 即使 container 中有剩餘空間，flex item 仍無法延伸，但當空間不足時，元素可收縮。
* auto: 等於 flex: 1 1 auto, flex item 可延伸與收縮，未佈滿 flex 容器時元件會伸長、超出 flex 容器時元件會壓縮。
* none: 等於 flex: 0 0 auto，flex item 不可延伸與收縮，是完全非彈性的：既不會縮短，也不會伸長来適應 flex 容器

### Grid Layout
two-dimensional layout
* grid-template-columns, grid-template-rows
* grid-template-areas
* justify-items, align-items: grid container 控制 grid item 的位置
* justify-self, align-self：grid item 控制自己的位置

https://paper.dropbox.com/doc/HTML-learning--A15nD~Ma2Hcsn_Gh3wuPrz3sAg-OW2o8K75RgDqpYI2eU8fZ
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
https://github.com/OceanFireSoftware/python-simple-proxy
https://themes.gohugo.io/hugo-future-imperfect-slim