CSS基礎複習-切版篇

切版乃是一大學問，HTML不會包，包出來怎麼會這樣？一縮放就爆炸，摔鍵盤了。

outline

這個通常是我拿來 Debug 使用的切版方式，記得不使用時刪除。

* {
    outline: 1px red solid;
}

box-sizing

這邊建議改成 border-box 為寬度計算會比較好計算

content-box - (預設) 寬度以內文寬為主 (width + padding)
border-box - 以 border 寬度內都為寬度 (width + padding + border)

display

預設HTML標籤本身幾乎都有dispaly屬性的，可以用這個方式將其樣式改變
常用：

none - 隱藏
inline - 區塊類型相似 <span> ，任何高度/寬度都無法生效。
inline-block - 區塊類型相似 <span>，但是可以設定高度/寬度。
block - 區塊類型相似 <p>，預設會佔據整行寬度與內容物高度。
table - 區塊類型相似 <table>，可以用在 NavBar 中。
flex - flex 屬性擴充
grid - grid 屬性擴充

float

float: left - 區塊排序由左向右，視窗縮放依序掉落
float: right - 區塊排序由右向左，視窗縮放依序掉落

<head>
    <style>
        img {
            float: left;
        }
        .clear {
            clear: both
        }
    </style>
</head>
<body>
    <!-- 同層 -->
    <img src="[w3css.gif](https://upload.wikimedia.org/wikipedia/commons/5/56/Amazing_image_of_the_Earth._Original_from_NASA._Digitally_enhanced_by_rawpixel._%2829025851948%29.jpg)" width="100" height="132">
    <p>這是一段文字</p>
    <p class="clear">這是一段文字</p> <!-- 可以嘗試將 clear class 刪除-->
    <p>這是一段文字</p>

    <!-- 不同層 -->
    <div>
        <img src="[w3css.gif](https://upload.wikimedia.org/wikipedia/commons/5/56/Amazing_image_of_the_Earth._Original_from_NASA._Digitally_enhanced_by_rawpixel._%2829025851948%29.jpg)" width="100" height="132">
        <p>這是一段文字</p>
    </div>
    <p>這是一段文字</p>
    <p>這是一段文字</p>
    <!-- 但是有相同的效果，主要是分層的問題，我一率建議記得加上 clear 屬性
    因為從 class 名稱中難以看出 是否有使用 clear -->
    <!-- 如果要看出什麼是同層，可以加上 outline 屬性-->
</body>

position

定位功能，主要有這幾種

static - 預設
relative - 相對
absolute - 絕對
fixed - 釘選

<!DOCTYPE html>
<html>

<head>
    <style>
        .parent {
            width: 300px;
            height: 100px;
        }
        
        #parent1 {
            position: static;
            border: 1px solid blue;
        }

        #child1 {
            position: absolute;
            border: 1px solid red;
            top: 70px;
            right: 15px;
        }

        #parent2 {
            position: relative;
            border: 1px solid blue;
        }

        #child2 {
            position: absolute;
            border: 1px solid red;
            top: 70px;
            right: 15px;
        }

        #parent3 {
            position: absolute;
            border: 1px solid blue;
            top: 750px;
            right: 15px;
        }

        #child3 {
            position: absolute;
            border: 1px solid red;
            top: 70px;
            right: 15px;
        }

        #parent4 {
            position: fixed;
            border: 1px solid blue;
            background-color: rgba(255, 200, 200, 0.5);
            bottom: 0;
            left: 0;
            right: 0;
        }

        #child4 {
            position: absolute;
            border: 1px solid red;
            top: 70px;
            right: 15px;
        }
    </style>
</head>

<body>

    <h1>The position property</h1>

    <h2>1. position: static;</h2>
    <p>描述： 父層為預設，子層為絕對，因為父層無相對約束，變成更外層約束</p>
    <div id="parent1" class="parent">Parent1: static.
        <div id="child1">Child1: absolute</div>
    </div>

    <h2>2. position: relative;</h2>
    <p>描述： 父層為相對，子層為絕對</p>
    <div id="parent2" class="parent">Parent2: elative.
        <div id="child2">Child2: absolute</div>
    </div>

    <h2>3. position: absolute;</h2>
    <p>描述： 父層為絕對，子層為絕對，因為皆無相對約束，變成更外層約束</p>
    <div id="parent3" class="parent">Parent3: absolute
        <div id="child3">Child3: absolute</div>
    </div>

    <h2>4. position: fixed;</h2>
    <p>描述： 父層為釘選，子層為絕對</p>
    <div id="parent4" class="parent">Parent4: fixed
        <div id="child4">Child4: absolute</div>
    </div>

</body>

</html>

flex

這算是現代RWD必備技能了，這項武器。

<head>
    <style>
        .flex {
            display: flex; /* 宣告此區塊內為Flex屬性，區塊內排序由此父層先定義排序方式 */
        }
    </style>
</head>
<body>
    <div class="flex">
        <div class="item">one</div>
        <div class="item">two</div>
        <div class="item">three</div>
    </div>
</body>

flex-direction

.flex {
    flex-direction: row | row-reverse | column | column-reverse;
                    /* 左至右 | 右至左 | 上至下 ｜ 下至上 */
}

flex-wrap

.flex {
    flex-wrap: wrap | nowrap | wrap-reverse;
            /* 會換行，開頭一樣順勢掉落 | 預設 | 相反換行，開頭一樣逆勢掉落 */
}

justify-content

.flex {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items

.flex {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content

.flex {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex 學習資源

grid

Grid進化版排版，這武器若遇上特製版面，建議使用 Grid 排列
注意事項：

中文遇到寬度超過會自動換行，英文不會因為英文字母若是連在一起會視為同一個文字，這樣的話要設定 word-wrap 這個 css 屬性。
只會影響子層區塊排列大小，子層也可以再設定 display: grid

<head>
    <style>
        .wrapper {
            display: grid; /* 宣告此區塊內為grid屬性 */
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="item">one</div>
        <div class="item">two</div>
        <div class="item">three</div>
    </div>
</body>

`fr`

fr 是新的一種單位計算用來 Grid，非常好用，假設有 3 個 column 的大小就是 3fr

grid-template-columns

.wrapper {
    grid-template-columns: repeat(6, 1fr); /* 6個 區塊 */
    /* grid-template-columns: 1fr 20% 200px;     3個 區塊，可以用傳統自定義的寬度去比 */
}

grid-auto-rows

.wrapper {
    grid-auto-rows: minmax(100px, auto); /* 最小/最大 的 row 高度 */
}

grid-gap

.wrapper {
    grid-gap: 10px 10px; /* 縱軸 橫軸 column 之間的寬度 */
}

grid-column

.item {
    grid-column: 1 / 4; /* 橫軸 Grid Line 佔幾格，算客自參數 */
}

grid-row

.item {
    grid-row: 2 / 4; /* 縱軸 Grid Line 佔幾格，算客自參數 */
}

grid 學習資源

@media

@media <裝置> {
    ... 撰寫
}

最常使用的寫法

@media screen (max-width:414px){
     ...
}