<div> 是 HTML 中的一個(gè)元素，用于定義文檔中的一個(gè)或多個(gè)區(qū)域（division/section）。通過 CSS，我們可以控制 <div> 元素的大小。這一點(diǎn)非常重要，因?yàn)樵诰W(wǎng)頁設(shè)計(jì)中，<div> 經(jīng)常被用來創(chuàng)建布局，并將內(nèi)容分組到不同的區(qū)域。
以下是幾個(gè)案例，以代碼的形式詳細(xì)說明如何控制 <div> 的大小。
案例一：設(shè)置指定大小的固定寬度和高度的 <div>

<p><div style="width: 200px; height: 100px; background-color: #ccc;"></p>
<p></div></p>

在這個(gè)案例中，我們通過在 <div> 元素的 style 屬性中設(shè)置 width 和 height 屬性，將其大小設(shè)置為 200px x 100px。我們還設(shè)置了背景顏色為 #ccc。
案例二：設(shè)置百分比大小的 <div>

<p><div style="width: 50%; height: 50%; background-color: #ccc;"></p>
<p></div></p>

這個(gè)案例中，我們將 <div> 元素的寬度和高度都設(shè)置為相對(duì)于其包含元素的百分比。這意味著，無論 <div> 定位在任何尺寸的容器中，它都會(huì)自動(dòng)調(diào)整為該容器的一半大小。背景顏色設(shè)置為 #ccc。
案例三：使用 max-width 和 max-height 控制 <div> 大小

<p><div style="max-width: 400px; max-height: 200px; background-color: #ccc;"></p>
<p></div></p>

在這個(gè)案例中，我們使用 max-width 和 max-height 屬性來控制 <div> 的大小。這意味著，即使容器的大小超過了指定的最大寬度和高度，<div> 的實(shí)際大小也不會(huì)超過這些限制。背景顏色設(shè)置為 #ccc。
這些案例只是控制 <div> 大小的幾種方式。在實(shí)際的網(wǎng)頁設(shè)計(jì)中，我們可以根據(jù)具體的需求結(jié)合其他CSS屬性，例如 padding、margin 和 flex 等，來進(jìn)一步控制 <div> 的大小和布局。通過靈活運(yùn)用這些技巧，我們可以創(chuàng)建出各種獨(dú)特而吸引人的網(wǎng)頁布局。