<div>小屋模型是一種用來實現網頁布局的技術，它將網頁的內容分割成不同的區塊，并且可以自由地對這些區塊進行布局。在網頁開發中，經常會使用到小屋模型來實現復雜的網頁布局。小屋模型的核心是使用<div>標簽來創建不同的區塊，然后使用CSS來控制這些區塊的樣式和位置。</div>
下面是幾個使用小屋模型的代碼案例：
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div小屋模型案例</title>
<style>
.container {
width: 500px;
height: 300px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
<br>
.box {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>上述代碼案例中，我們創建了一個名為container的區塊，并且設置了寬度為500px，高度為300px。然后在container內部創建了一個名為box的子區塊，寬度為50px，高度為50px，背景顏色為紅色。通過使用display: flex;和justify-content: center; align-items: center;樣式，我們將box區塊居中顯示在container區塊內部。
案例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div小屋模型案例</title>
<style>
.container {
width: 500px;
height: 300px;
border: 1px solid #000;
overflow: hidden;
}
<br>
.left {
width: 250px;
height: 300px;
background-color: red;
float: left;
}
<br>
.right {
width: 250px;
height: 300px;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>上述代碼案例中，我們創建了一個名為container的區塊，并且設置了寬度為500px，高度為300px。然后在container內部創建了兩個名為left和right的子區塊，寬度都為250px，高度為300px。通過使用float: left;和float: right;樣式，我們將left區塊向左浮動，right區塊向右浮動。最終，left區塊顯示為紅色背景，right區塊顯示為藍色背景，并且它們分別占據了container的一半寬度。
通過上述代碼案例，我們可以看到小屋模型的強大之處，它可以幫助我們實現各種復雜的網頁布局。通過使用<div>標簽和CSS樣式，我們可以輕松地創建不同樣式和布局的區塊，并且可以自由地控制它們的位置和大小。正因為如此，小屋模型被廣泛地應用于網頁開發中，成為了實現網頁布局的重要工具。
下一篇div 大小縮放