---
# System prepended metadata

title: css技術支援

---

---
title: Css技術支援
Writen in: 2023
---

# Css技術支援

###### tag: `2023`

:::info
有鑑於新生之訊網的網頁排版需要高度的自訂義，因此使用tailwind作為主要的Css框架，並以Sass為輔。
:::

## Vue中的\<style>設定

- 記得使用 **\<style lang="scss" scoped>**

    - 不使用scoped的話，你定義的class等等會影響到子元件(具體影響取決與html的架構)，代表別人的檔案能讀取到的你的css設定，你也可能讀取到的別人的css設定。
    
        > 直接害別人無法debug，可以說是非常過分 ==

    - scss能大幅優化寫css時的麻煩處，例如你有三個class分別叫 box_container-1 box_container-2 box_content
        ##### 你可以用scss寫成:
        ```
        /* & 代表上層的class名稱 */
        .box {
            &_container {
                &-1 {
                    /* box_container-1 */
                }

                &-2 {
                    /* box_container-2 */
                }
            }

            &_content {
                /* box_content */
            }
        }
        ```
        解決了傳統css架構過於過於散亂的問題。
        > 延伸閱讀: [連接符&、@mixin與@function](https://ithelp.ithome.com.tw/articles/10211934)

## 排版技巧 (tailwind)

- 垂直水平置中 
    1. 使用display: flex;
    
        ```
        /* 在父元素設定 */
        <div class="flex justify-center items-center">
            <div> 垂直水平置中 </div>
        </div>
        ```

    2. 使用position: relative;

        ```
        /* 將子元素左上角定位於父元素中央
        再讓子元素向左上移動自身半個寬高的距離 */
        <div class="relative">
            <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
                垂直水平置中
            </div>
        </div>
        ```
        
        :::warning
        
        有時候父元素已經使用absolute做自身的定位，無法再添加relative (因為同屬position屬性)，這時候可以在父元素內部添加
        \<div class="h-full w-full relative">\</div>

- 根據螢幕長寬調整畫面大小

    :::warning
    tailwind在2023/12月發布的3.4.0版本後，全面支援dvh lvh svh，意味著手機的排版將變得更加容易。
    > 外部連結: [tailwind的viewport height屬性](https://tailwindcss.com/docs/height)
    :::

    - 設定最外層元素為
        
        ```
        /* navbar的高度為10vh */
        <div class="pt-[10svh] w-svh h-svh"></div>
        ```