# 20230429 margin/display/grid

### margin collapsing
資料：[MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing)
練習：https://codepen.io/Jamixcs/pen/yLrVmNP?editors=1100

#### 父層緊連著子層
當父層的margin-top/bottom與子層的margin-top/bottom中間沒有被阻隔時，會以最大值為margin
解決方法：
(1)parent加上border

(2)parent加上padding

#### 相鄰的兩個block
同一層的margin-top/bottom 之間沒有被阻隔時，會以最大值為margin

解決方法：
把外層的display:block改為flex或grid

### margin的移動法
#### margin-top
影響元素本身，基準點分為以下兩種：
(1)外層容器的border
margin-top:50px
margin-top:-50px
(2)上方容器的margin-bottom
margin-top:20px
margin-top:-60px

#### margin-left
影響元素本身，基準點分為以下兩種
(1)外層容器的border
margin-left:20px
margin-left:-20px

(2)

---

### display
#### block區塊元素
常見標籤包含： article、div、form、hr、p、h1~h6
特性：
(1)獨佔一行，width預設100%
(2)可以指定width & height
(3)可以設定margin
(4)可已設定padding，會自動推擠其他元素
(5)無法設定vertical-align(垂直對齊)，文字永遠向上對齊
<補充>line-height行高
value可以填入：比例、百分比、px、em
自動計算line-weight與font-size，使文字自動顯示在正中間

#### inline行內元素
常見標籤包含：span、a、br、img、sub、sup、label
特性：
(1)元素在同一行呈現
(2)width & height 受內容影響，無法指定
(3)只可設定左右magin，無法設定上下margin(上下margin並不是不能設，而是他不會把周圍的元素推開，所以你在畫面上看不出來差別)
(4)可以設定padding，但上下並不會自動推擠其他元素
(5)不可包含block-level elements(瀏覽器可能不會拋錯，但結構上不合規範)

#### inline-block行內區塊元素
常見的標籤包含：button、input、textarea、select
(1)以inline方式呈現，但擁有block屬性
特性：
(1)可以指定width & height
(2)可以設定margin
(3)可以設定padding，會自動推擠其他元素
(4)不可包含block-level elments(瀏覽器可能不會拋錯，但結構上不合規範)

#### none不顯示
元素不顯示且不佔空間
常被拿來與visibility: hidden做比較。該屬性也可以以使元素被隱藏，但卻會佔有空間
<補充>visibility指定元素是否顯示在頁面上，不同瀏覽器可能不同，勿亂用，屬性介紹：
(1)visible預設值，顯示
(2)hidden隱藏元素，仍保有原先位置
(3)collapse完全隱藏table相關元素
a.使用於tr.tbody.col.colgroup元素
會使整個row/column會被刪除，且不佔有空間(相當於display:none)
b.其他元素(如：td)
相當於visibility:hidden，會佔有空間
(4)全域變數

| 變數值 | 定義 |
| ------------ | ------------------------------------------------ |
| inherit | 繼承父元素的屬性(若父層無宣告，則不再向外繼承) |
| intial | 恢復為css預設值 |
| unset | 父元素有須個則為inherit，父元素無宣告則為initial |
| revert | 使用瀏覽器預設值，若無預設值則等同於unset |
| revert-layer | 回到上ㄧ層@layer的屬性 |

#### content 顯示內容
元素本身不產生作用，只會render子元

### Grid網絡系統
1.以表格方式來將網頁排版
2.基本參數
(1)fr->等分
(2)repeat(次數,值組)->重複某個值組n次
(3)minmax(最小值,最大值)->限定區塊大小

#### grid-template-column
直欄
#### grid-template-rows
橫列
#### grid-template
宣告方式: grid-template-rows / grid-template-columns
#### order
宣告在grid容器裡的物件中，可定義本身的排序
值可為正負整數，越小的排越前面
預設值為0

#### grid-auto-flow 排列方向
##### row 由左到右，由上到下 → 此為預設值
元素會以一列一個一列一個去排
##### column 由上到下，由左到右
元素會以一欄一個一欄一個去排

#### grid-auto-columns 欄寬

#### grid-auto-rows 列寬

#### column-gap 欄間距
欄與欄之間的間距
#### row-gap 列間距
列與列之間的間距
#### gap 欄與列間距
宣告方式：<row-gap> <column-gap>

#### justify-content

start
center
end
space-between
space-around
space-evenly

#### justify-items
stretch(預設)
start(left)
end(right)
center

#### justify-self

stretch(預設)
start(left)
end(right)
center

#### align-content 列整體對齊方式
center
start
end
space-between
space-around
space-evenly

#### align-items 每列對齊方式

#### align-self 物件本身的垂直對齊方式

### 區塊
#### grid-area
宣告在物件css裏，用於幫物件取名
grid-template-areas 指定區塊
宣告在grid容器css裡，指定物件的擺放順序，宣告時以雙引號表示一列，空格區番不同欄："區塊1 區塊2" "區塊3 區塊4"
每列數目一定要相同，否則沒有作用
空格時以 . 表示


### 指定起始與結束
grid-column-start:
grid-column-end:
grid-cloumn: /

grid-row-start:
grid-row-end:
grid-row: /

grid-area:row_start / column_start / row_end / column_end