iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 13
1
Modern Web

HTML 與 CSS 學習筆記系列 第 13

Day13 - HTML 與 CSS (4) - 水平置中、box-sizing

區塊水平置中

  • 使用 margin-left: automargin-right: auto
  • 參考下例會發現區塊區域置中,然後只有最上層(父層) wrap 有設定 auto,其他未設定卻會沿用
  • wrap 不設定高度 height 是可以依照子層需求來作延伸,有猜到嗎?Box Model 是 100 w x 200 h
<div class="wrap">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>
.wrap {
    width: 100px;
    /* height: 100px; */
    background: black;
    margin-left: auto;
    margin-right: auto;
}

.header {
    height: 50px;
    background: blue;
}

.content {
    height: 100px;
    background: red;
}

.footer {
    height: 50px;
    background: green;
}

呈現結果如下(截圖可能沒有很置中)

文字水平置中

  • 如果在剛剛的區塊內輸入文字,會發現文字內容是靠左的,若想要文字置中,可以使用 text-align: center
<div class="wrap">
    <div class="header">1</div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="footer">
        <p>地址:xxx
            <br>
            TEL:ooo
        </p>
    </div>
</div>

針對 .footer 的內容調整,其他不變

.footer {
    /* height: 50px; */
    background: green;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}

結果如下

box-sizing

  • 預設值:content-box,如之前計算,會把 borderpadding 加進去
  • 修改為:border-box,就以定義的 W x H 為最大,其他值往內縮
<div class="box-a"></div>
<div class="box-b"></div>
.box-a {
    width: 100px;
    height: 100px;
    border: 10px solid blue;
    padding: 10px 20px;
    background: red;
    box-sizing: content-box;
}
.box-b {
    width: 100px;
    height: 100px;
    border: 10px solid blue;
    padding: 10px 20px;
    background: red;
    box-sizing: border-box;
}

可以比較差異
box1:160 w x 120 h
box2:100 w x 80 h

可以使用偽元素將格式一起更換(但我自己測試並沒有統一,還要再驗證)

  • 原因為我的 CSS 已經有設定 box-sizing: content-box; 才會導致沒有統一
  • 在沒設定 box-sizing 時,預設是 content-box,利用偽元素才將設定改為 border-box
*, *::before, *::after {
    box-sizing: border-box;
}

參考資料

次回

應該會進入 flex 了!


上一篇
Day12 - HTML 與 CSS (3) - Box Model
下一篇
Day14 - Flex (1) - 概述
系列文
HTML 與 CSS 學習筆記31

尚未有邦友留言

立即登入留言