Day23:設定元素的寬度與高度

2024 iThome 鐵人賽

DAY 23

佛心分享-IT 人自學之術

HTML&CSS網頁設計學習心得系列第 23 篇

16th鐵人賽

gogococo

2024-10-07 18:46:38

63 瀏覽

分享至

在 HTML 和 CSS 中，設定元素的寬度和高度可以讓你控制網頁中元素的尺寸。這是透過 CSS 的 width 和 height 屬性來完成的。這兩個屬性可以用不同的單位來表示，例如像素（px）、百分比（%）、視口單位（vw、vh）等。

1. 寬度 (width) 和高度 (height) 設定
基本語法：

selector {
    width: value;
    height: value;
}

selector 是你想要選擇的 HTML 元素，例如 div、p、img 等。
value 是數值，可以是不同的單位，如 px、%、em、rem 等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Width and Height Example</title>
    <style>
       
        .box {
            width: 200px;   
            height: 150px;  
            background-color: lightblue;
        }

        .container {
            width: 50%;     
            height: 300px;  
            background-color: lightcoral;
        }
    </style>
</head>
<body>

    <div class="box">固定寬高</div>
    <div class="container">百分比寬度</div>

</body>
</html>

2. 使用不同單位來設置寬度和高度
像素 (px): 固定尺寸，適合需要精確控制元素大小的情況。

width: 300px;
height: 200px;

百分比 (%): 相對於父元素的大小。當使用百分比時，元素的寬度或高度會根據其父容器的大小自動調整。

width: 50%;  
height: 100%;

視口單位 (vw, vh): 相對於瀏覽器視窗的大小。vw 表示視口的寬度，vh 表示視口的高度。1 vw 是視口寬度的 1%，1 vh 是視口高度的 1%。

width: 50vw;  
height: 75vh;

自動 (auto): CSS 中的 auto 會根據內容來自動調整寬度或高度。

width: auto;
height: auto;

3. 最小和最大寬高
除了 width 和 height，還可以使用 min-width、max-width、min-height 和 max-height 來設置元素的最小和最大尺寸。

範例：

.box {
    width: 100%;       
    max-width: 500px;  
    min-width: 300px;   
    height: auto;       
}

這樣可以確保當父容器大小改變時，元素的寬度會隨著調整，但不會小於300像素，也不會大於500像素。

小結：
寬度 (width) 和高度 (height) 可以使用不同的單位來設置，如 px、%、vw、vh 等。
使用最小/最大寬度和高度 (min-width、max-width、min-height、max-height) 可以更精細地控制元素的尺寸。
auto 可以根據內容自動調整元素大小。
這些 CSS 屬性是網頁設計中基本且非常重要的部分，用來控制頁面元素的大小與佈局。