Frontend Mentor 練習

目錄：

1. 基本排版概念
    (1) 三大原則 Rules
    (2) 盒子模型 Box model
    (3) 排版 display 
    (4) 位置 position

2. 各類別區塊常用語法
    (1) 內容 Content
        a.文字 Font
        b.區塊佈局 Div
        c.圖片 img
    (2) 邊框 Border 
    (3) 內邊距 Padding & 外邊距 Margin

1. 基本排版概念

(1) 三大原則 Rules

1. Content is Everyting
2. Order comes from code
3. Children sit on Parents

(2) 盒子模型 Box model

(圖片來源) & (參考資料)

由外到內組成

1. Margin ( 外邊距 )
2. Border ( 邊框 ) 
3. Padding ( 內邊距 )
4. Content ( 內容 )

(3) 排版 display

block display block {display: block;}

1. 預設佔全螢幕寬
2. 左右皆無法放置其他物件

預設 block 的物件:
1. Paragraphs <p>
2. Headers <h1> though <h6>
3. Divisions <div>
4. List and list items <ol>, <ul>, <li>
5. Forms <form>

inline display block {display: inline;}

1. 左右接續放置其他物件
2. 無法更改寬度

預設 inline 的物件:
1. Spans <span>
2. Images <img>
3. Anchors <a>

inline-block display block {display: inline-block;}

1. 左右可放置其他物件
2. 可以更改寬度

none display block {display: none;}

1. 隱藏物件，連空位整個消失
2. 另有語法式隱藏物件，但會留下空位: block {visibility: hidden;}

(4) 位置 position

Static position - 預設值

1. 依照語法位置排列

Relative position

1. 物體改變至相對"原本位置"的"相對位置"
2. 左右位置的物件不受影響
3. 可以當成: padding

   img {
    position: relative; 
    <!-- 上方留白 = 向下移動 -->
    top: 30px; 
    <!-- 左側留白 = 向右移動 -->
    left: 30px;
    <!-- 右側留白 = 向左移動 -->
    right: 30px;
    <!-- 下方留白 = 向上移動 -->
    bottom: 30px;
   }
   

Absolute position

1. 物體改變至相對"父物件"的"相對位置"
2. 原本物件的位置會被移除
3. 可以當成: 座標

img {
    position: absolute;
    <!-- 移動到父物件最頂端，往下30px位置 -->
    top: 30px;
    <!-- 移動到父物件最左側，往右30px位置 -->
    left: 30px;
    <!-- 移動到父物件最右側，往左x位置 -->
    right: 30px;
    <!-- 移動到父物件最底端，往上30px位置 -->
    bottom: 30px;
}

Fixed position

1. 固定在頁面的特定位置，不受頁面滑動影響
2. 例如: 購物車、問題諮詢欄位

img {
    position: fixed;
    top: 0;
}

2. 各類別區塊常用語法

(1) 內容 Content

a. 文字 Font

字體樣式
p {font-family: Arial, Helvetica, sans-serif;}

1. 順序表示：若使用者未安裝前者字體，則會顯示下一順位字體
2. 常用字體：
   (1) monospace => 每個字大小一樣
   (2) sans-serif => 無襯線體
   (3) serif => 襯線體
3. Google Font 插入字體在網頁

字體大小
p {font-size: 16px;}

1. 可用單位: px, %, em, rem
2. 補充資料

字體顏色
h1 {color: #11999E}

字體標記
刪除線: h2 {text-decoration: line-through;}
底線: .span-class {text-decoration: underline;}
斜線: <em> word </em>
粗體: <strong> word </strong>

段落間距
p {line-height: normal;}

1. 可用單位: normal, 2(倍), %

文字間距
h1 {word-spacing: 30px;}

文字位置

1. 文字左側清空 .paragraph {clear: left;}
2. 文字右側清空 .paragraph {clear: right;}
3. 文字置於區塊中間 .paragraph {text-align: center;}

b. 區塊佈局 Div

建立區塊

div {
    height: 100px;
    width: 100px;
    background-color: #66BFBF;
}

區塊置中
div {margin: 0 auto;}
自動調整邊界: 上下/左右

插入按鈕
Button Generator

c. 圖片 Img

免費Icon下載1
免費Icon下載2
免費Gif下載

圖片旋轉

1. [transform-function]
   (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function)

transform: rotate(0);
transform: rotate(90deg);
transform: rotate(-0.25turn);

(2) 邊框 Border

邊界線樣式
實體線: hr {border-style: solid;}
點點線: hr {border-style: dotted;}
虛線: hr {border-style: dashed;}
內嵌感: hr {border-style: insert;}
立體框: hr {border-style: outsert;}
雙實線: hr {border-style: double;}
無框線: hr {border-style: none;}

邊界線顏色
hr {border-color: lightgray;}

邊界線圖樣長度 (ex.dotted / dashed)
hr {border-width: 5px;}

邊界線寬度
hr {width:5}

(3) 內邊距 Padding & 外邊距 Margin

寬度設定規則

<!-- 以margin為例 -->
margin: 20px (一個值－上下左右)
margin: 20px 30px (兩個值－上下/左右)
margin: 20px 30px 40px (三個值－上/左右/下)
margin: 20px 30px 40px 50px (四個值－順時針 上/右/下/左)

<!-- 亦可分開設定 -->
margin-top: 20px
margin-right: 30px
margin-bottom: 40px
mardin-left: 50px

<!-- 設定的單位 -->
1. 受父元素影響: 50% 50em
2. 不受父元素影響: 50px 50rem