# 3/23 - HTML/CSS
##
### ＊遇到問題後，要記錄下來並解決
側邊對齊 固定寬度

＊使用者閱讀性：中文25個字一行（不一定）
＊網頁設計：格線？（非必要）

### ＊在文字旁邊放一條線

[CSS]

.line {
   width: 0px
   flex-grow: 1;    #隨著寬度調整
   height
   background-color
   display: block
}

[HTML]

<div>
  <span class="text">課程</span>
  <span class="line"></span>
</div>

note:
<span> 在文字中，把其中一小節文字包起來 </span>


＊＊ inline 物件沒辦法設定寬度

### ＊ 設定圖片在 container中的尺寸

background-size: cover   滿版等比例「填滿」容器 container
                 contain 原比例放進容器
                 
background-repeat: no-repeat;                 

### ＊文章區分
* section：Amos不會包太多層
* article
* div

### ＊一個頁面通常 h1 標題只有一個，放在重點處；如不符合語意 SEO 會扣分。
圖片的路徑也有關；

<h2 class="main-title">
  <span class="title">HTML Teacher</span>
  <span class="user-name">Amos</span>
</h2>


.man-title:after {

}

＊等高

margin auto


display: flex;
flex-direction: column;

＊物件 content 組成：
* width
* border
* padding
* margin

box-sizing 

預設在 content box
指定寬＆高做用在哪個格子上，只能指定兩個值
只能是 content box & border box

---

## flex 活用：有三個很重要的屬性
### 一、flex-grow 伸展
#### ＊＊ 十分好用的版面分配工具 ＊＊

- [x] 把版面（剩餘的部分）按比例分配

### 二、flex-basis 基本值

控制主軸上的長度，覆寫掉原本 width / height 的設定。
主軸是直 or 橫的 depends on direction

### 三、flex-shrink 收縮（普遍不會設定太詳細，因為以後也很少用）

設定在子物件身上，預設是 1
通常只會設定 0 or 1 （加權計算）
減薪的概念

＊上面三個屬性，可以縮寫成

flex: grow.  shrink.  basis.

### 四、order

預設值是０
更改子物件在主軸上的排序

* 如果改１會在 終點處 end
* 如果改３會在 起點處

example:

在item2的地方，order: 1


---

### inline

inline 物件設定寬＆高 --> 無意義
       只能設定左右的 margin / padding，不支援 padding top & bottom
       
「預設方向」
inline-block 預設橫排
inline       橫排
block        直排

如何拿掉空白字元？
1. font-size: 0
2. 直接把首尾連接不跳行
3. 首尾加上省略箭頭


### ＊圖片/文字 預設會對齊在 「基線」 baseline，因為它們都是 inline的一種，所以下方會有一條空白

### ＊文繞圖：

在圖那層的CSS設定
float: left

box-shadow: X Y 模糊 擴展 色彩 內部