---
title: Astro課程 0708 - CSS(Day4) position
tags: astro, css
---

# 0708 - CSS(Day4)

## 作業

五倍網站切版
https://5xruby.tw/
把時間和問題記錄下來（描述問題的方式）

## 時間軸
上午: inline & block
12:10 切版練習
13:40 flex-grow
14:10 position
14:58 絕對定位（最複雜）

# inline
行：大家會排在一起
- strong
- span
- link
- img (但是圖片可以設定寬度)

# block
一整列的空間會被佔據（可以把剩餘的空間拿來分配）
- h1
- p
- div
- article
- section
- aside

注意：css只是用來處理視覺外觀
眼睛看到的有可能是騙人的！

例：button

    <button>button</button>

用css:把button變成link

    button {
        background-color: transparent;
        border: none;
        text-decoration: underline;
        color: blue;
        cursor: pointer;            
    }

減少margin collapse的方式
可以僅設定一邊，減少重疊（例如：只設定margin-bottom）

# inline & block比較

| | inline | block | inline-block | Flex-item(父層設定flex，子層有block效果) |
| -------- | -------- | -------- | -------- | -------- |
|
| Width & Height | X | O |O | O |
| Margin T&B | X | O |O | O |
| Margin L&R | O | O |O | O |
| Padding T&B | X (不佔空間，直接當作不支援！) | O |O | Text |
| Padding L&R | O | O |O | O |
| 預設排列方向 | 橫向 | 直向 |橫向 | 橫向 |
| 預設寬度 | 內容決定寬度 | 滿版 |內容決定寬度 | 內容決定寬度 |
| 對空白字元的處理 | 保留空白 | 沒有空白問題 |保留空白 | 沒有空白問題 |
| 水平居中的方式 | 由父層設定 text-align: center | 自己設定 margin: auto |由父層設定 text-align: center | 1. 自己設定 margin: auto 2. 由父層設定 justify-content |

inline-block沒有剩餘空間可以分配（常用來處理選單）

## 處理空白字元問題

- 使用flex
- 在父層設定`font-size = 0`
- 直接用空白註解掉 XD
- `.item + .item { margin-left: -6px;}`

## CSS 命名方式

BEM （Block Element Modifier）
http://getbem.com/naming/

# flex grow
決定父層`主軸長度`的剩餘空間分配給誰
使用前提：不換列的區塊

html

    <div class="wrap">
            <div class="item item1">1</div>
            <div class="item item2">2</div>
            <div class="item item3">3</div>
    </div>

css

    <style>
        .wrap {
            display: flex;
            background-color: #ccc;
            padding: 10px
        }
        .item {
            width: 100px;
            height: 100px;
            font-size: 50px;
            background-color: #fac;
            border: 2px solid red;
        }
        .item1 {
            flex-grow: 2;
        }         
        .item2 {
            flex-grow: 1;
        } 
        .item3 {
            flex-grow: 1;
        }         
    </style>

把父層寬度設定為零，子層的元素就會均分比例
(如果有margin的話需要扣掉)

css

    <style>
        .wrap {
            display: flex;
            background-color: #ccc;
            padding: 10px
        }
        .item {
            width: 0;
            height: 100px;
            font-size: 50px;
            background-color: #fac;
            border: 2px solid red;
        }
        .item1 {
            flex-grow: 1;
        }         
        .item2 {
            flex-grow: 1;
        } 
        .item3 {
            flex-grow: 1;
        }         
    </style>

# order 排序
寫在子層上，數字越大者，往主軸的後端移動

    .item1 {
        flex-grow: 1; order: -1; /*排在最前*/
    }         
    .item2 {
        flex-grow: 1; order: 2; /*排在最後*/
    } 
    .item3 {
        flex-grow: 1;
    }   

# position 定位
設定元素位置的語法，其元素的位置由 top、left、right、bottom 所決定。
- 預設值
- static:無效卡，設定後top、left、right、bottom會被忽略。
- 相對定位
- relative:相對於其它元素的位置。
- 絕對定位
- fixed:相對於瀏覽器而定位。
- absolute:當網頁往下拉時，也會跟著改變位置。
- 其他
- sticky

.dome{
    position: static|relative|fixed|absolute;
}

## relative 相對定位 (偏移顯示；原來的空間會被保留)
1. 依據左上方作為定位
2. 預設：層級是後面的數字會蓋掉前面

    li {
        width: 100px;
        height: 100px;
        background-color: #ccc;
        display: inline-block;
        font-size: 50px;
        margin: 5px;
    }
    li:nth-child(20){
        background-color: red;
        position: relative;
        z-index: 1;
        top: -40px;
        left: -40px;
        right: 40px;
    }
    li:nth-child(25){
        position: relative;
        z-index: 1;
    }

## fixed 絕對定位
1. 從資料流抽離
2. 預設：停留在原地 (常用來做蓋版廣告)

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: rgba(255,0,0,.5);
            position: fixed;
        }
    </style>

設定了`top`和`right`會停留在右上方

    .box {
        width: 100px;
        height: 100px;
        background-color: rgba(255,0,0,.5);
        position: fixed;
        top: 10px;
        right: 10px;
    }

加了上下左右再加`margin: auto`，就會移到中間

    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: rgba(255,0,0,.5);
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>

右側留70%的空間之後再`margin: auto`置中

    .box {
        width: 100px;
        height: 100px;
        background-color: rgba(255,0,0,.5);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 70%;
        margin: auto;
    }

## absolute
1. 從資料流抽離 (這一點跟fix一樣)
2. 如果有設定上下左右，會定位在離自己最近、有定位設定父層
做測試時，使用左下角、右下角，而且不可以先reset

css

    div {
        padding: 50px;
        border: 5px solid #aaa;
    }

   html {
        position: relative;
    }
    .box4 {
        padding: 0;
        font-size: 30px;
        width: 70px;
        height: 70px;
        border: none;
        background-color: rgba(0, 0, 255, .3);
        position: absolute;
        left: 0;
        bottom: 0;
    }

螢幕顯示：class:box4被定在html上

static 無效卡
sticky

## CSS畫出三角形

原理: 邊框畫到夠粗時，會出現四個三角形

    .n0 {
        width: 100px;
        height: 100px;
        border-style: solid;
        border-width: 40px;
        border-color: red green blue gray;
    }  


直角三角形

    .n1 {
        margin: 10px;
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-top: 30px solid #f00;
    } 

等腰三角形

        .n4 {
            margin: 10px;
            width: 0;
            height: 0;
            border-bottom: 30px solid red;
            border-right: 30px solid transparent;
            border-left: 30px solid transparent;     
            border-top: 30px solid transparent;
        }