[FE101] CSS part 2

裝飾

background

• 直接用英文的顏色表示：

#first {
    background: red
}

• 用 RGB 表示的話有兩種：rgb() * rgba()，a 為透明度的意思，值介於 0 ~ 1 中間

#first {
    background: rgb(244, 4, 10)
}

• 接圖片，當圖片小於寬度或高度時，會自動重複，可使用 no-repeat，只顯示一張圖片
• center center 代表圖片要放 x 和 y 軸的中間，也可用 top、bottom、left、right 來改變圖片位置
• background-size 可調整背景的大小
  • 可以在 x 和 y 裡放 px 或 %
  • 用 contain，將圖片按照比例放在背景裡
  • 用 cover，圖片會隨著縮放調整大小，永遠會填滿背景

#first {
    background: url(./glacier.JPG) no re-peat center center;
    width: 2000px
}

border & outline 邊框

outline

• 不會影響原有元素的寬度跟高度，外框往元素外面長
• 實際開發很少用到 outline

border

• 會影響原有元素，寬度跟高度的值，會是原有數值再加上邊框的值

#first {
    background: url(./glacier.JPG) center center no-repeat;
    background-size: cover;
    width: 1000px;
    height: 1000px;
    border: 20px blue solid;
}

• 去 dev tool 可以查看 border-style 有哪些
• border-radius 可以調整邊框弧度，沒有加 border 時也可以使用，設 50px 或 50% 時會變成圓形
• border-top、border-bottom、border-right、border-bottom 可以分別調成不同顏色
• 可以畫三角形：

  #first {
    background: transparent;
    width: 0px;
    height: 0px;
    border-top: 1000px blue solid;
    border-bottom: 1000px transparent solid;
    border-right: 1000px transparent solid;
    border-left: 1000px transparent solid;
  }
  

padding & margin

margin

• 整個元素離外面的距離，不會影嚮到原本元素的寬與高
• 也可以用指定上下左右：margin-top、margin-bottom、margin-right、margin-left

padding

• 內容離邊邊的距離
• 也可指定上下左右

文字相關

color

• 文字顏色

font-size

• 文字大小
• 瀏覽器最小只能調成 12px

font-weight

• 文字粗細
• 介於 300 ~ 700 間

font-family

• 字體要用什麼
• 如果電腦沒有該字體，就會換成預設值

letter-spacing

• 調整字句

line-height

• 調整行距
• 通常會用 1.5em，代表行高為 1.5 倍的 font size，會隨字體的大小去調整，所以比例不變

text-align

• 水平對齊
• text-align: center 代表水平對齊中間
• 在只有一行字的情況下，可利用 line-height 來達成垂直置中
• 或使用 padding 將文字放在垂直中間，文字多行還是可使用

word-break

• 決定如何將連在一起的字分開
• word-break: break-all 可能會讓同個單字被切成開
• word-break: break-word 按照字來切

white-space

• white-space: nowrap 不要把字包起來，字會在同一行

overflow

• 什麼都可以用
• overflow: hidden 超出的會被隱藏
• auto 超出時，會自動使用捲軸（超出寬度，就產生水平捲軸）
• scroll 超出時，會產生水平和垂直捲軸

text-overflow

• 針對文字使用
• ellipsis 超出的文字會自動顯示「....」，使用這個屬性的前提是 overflow: hidden、white-space: nowrap

transition

• 在屬性有變的時候會有漸變的效果
• 可能會有效能問題，因為可能會影響到旁邊元素的排列
• transition: <對哪一部分> <幾秒>
• cursor: pointer 改變游標的樣式

#first {
    background: pink;
    width: 100px;
    height: 100px;
    transition: all 1s ease-in;
}

#first:hover {
    background: beige;
    color: navy;
    cursor: pointer
}

transform

• 變形、轉換
• scale(2) 變大兩倍
• rotate(180degree) 旋轉 180 度
• translateX(50px) 往右移 50 px
• translate(50 px, -20px) 往右移 50 px，往上移 20 px，如果是 % 的話，代表位移元素本身寬度或高度的幾倍
  • 動畫裡面移動位置用這個居多
  • 從目前所在的位置移動

Box model 盒模型

• 打開 chrome dev tool，會看到右下角有一個像盒子的東西，那就是 box model。每一個 HTML 的元素，都可以想像成一個盒子，盒子由寬、高、padding、border、margin 所組成
  • 沒加 box-sizing
    ![] (https://static.coderbridge.com/img/yymarlerr/fdddbdaf331c488488d350478e7ac77e.png)
  • 可以使用 box-sizing 來決定要用什麼樣子的模式來顯示寬高
  • content-box：寬高為內容的寬高，為預設值
  • border-box：會將 border 和 padding 的寬高考慮進來，所以內容的寬高會改變
  • 
  • padding、margin、border 的撰寫語法：
    • 四個值：上、右、下、左
    • 三個值：上、左右、下
    • 兩個值：上下、左右
    • 一個值：上下左右

(參考資料)[https://www.oxxostudio.tw/articles/202008/css-box-model.html]

Display

block

• HTML 中的 div、h1、p 的預設為 block
• display: block 的特色是自己會佔滿一整行

inline

• HTML 中的 span、a 的預設為 inline
• 寬高會根據內容顯示，故調寬高沒有用
• 左右邊距（margin、padding）可以調；上下邊距無法調整
• padding 不會影響元素的位置，但會影響背景

inline-block

• HTML 中的 button、input、select 的預設為 inline-block
• 對外，像 inline 可以併排；對內，像 block 可調各種屬性
• 當 margin 是 0 的時候，如果 </div> <div> 有空格，元素之間會有間距，要刪掉空格，才不會有間距

flex

• 根據屬性作用的區域，可分為
  • flex container：影響全部的 flex item
    • flex-direction：預設值 row
    • justify-content：預設值 flex-start，延 main axis 排列
    • align-items：預設值 flex-start，延 cross axis 排列
    • flex-wrap
  • flex item
    • flex-shrink
    • flex-grow
    • order

參考資料：
卡斯伯

可以在 CSS 改變標籤的 display

Position 定位

static

• 網頁預設定位方式、不跳脫排版流（static）、不以特殊位置來排列

relative

• 不跳脫排版流（static），並根據原本的位置，去作位移

absolute

• 絕對定位
• 跳脫排版流，並根據某個參考點（元素）去作定位，參考點為往上找不是 static 的元素
• 用絕對定位後，該元素會被從正常排版原則裡面抽掉，所以下一個元素會遞補到該元素原本的位置

fixed

• 固定定位，跳脫排版流，並相對於 viewport （視窗）作定位
• 會定位在固定位置，不管怎麼滾動視窗，內容都會在一樣的位置

W3schools

z-index

• 決定圖層順序

sticky

• 指定內容滑到哪時，定格在那邊
• 範例：

#first {
    background: pink;
    width: 100px;
    height: 100px;
    border: 20px yellowgreen solid;
    padding: 10px;
    transition: all 1s ease-in;
    box-sizing: border-box;
    top: 0px;
    position: sticky;
}

#first:hover {
    background: beige;
    color: navy;
    cursor: pointer;
}

#second {
    background: yellow;
    width: 100px;
    height: 100px;
}

#third {
    background: springgreen;
    width: 100px;
    height: 100px;
}