<div> 默認100% 是指在HTML中，<div> 元素的默認寬度是父元素的100%。這意味著如果沒有明確指定寬度或者其他樣式規則來改變 <div> 元素的寬度，它將自動鋪滿它的父元素的寬度。
<div> 元素是HTML中最常用的容器元素之一，它可以用于包裹其他HTML元素，通過設置合適的樣式屬性和規則，來結構化網頁的布局，并實現各種不同的排列和布局效果。
下面以幾個簡單的代碼案例來詳細解釋 <div> 默認100%:
以上是幾個關于 <div> 默認100% 的案例，它們展示了如何使用不同的布局方式來利用 <div> 元素的默認100%寬度特性來實現不同的頁面布局效果。無論是通過設定固定寬度、使用Flexbox還是Grid布局，<div> 元素的默認100%寬度都是非常有用的特性。希望這些案例能夠幫助讀者更好地理解和應用這一特性。
<div> 元素是HTML中最常用的容器元素之一，它可以用于包裹其他HTML元素，通過設置合適的樣式屬性和規則，來結構化網頁的布局，并實現各種不同的排列和布局效果。
下面以幾個簡單的代碼案例來詳細解釋 <div> 默認100%:
案例一：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 800px;
border: 1px solid black;
}
.box {
background-color: lightblue;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>在這個案例中，.container容器設置了固定的寬度為800px，并設定了1px的邊框。內部的.box元素設置了100px的高度和10px的外邊距。通過這些設置，<div> 元素會自動填充.container容器的寬度，因為它的默認寬度是父元素的100%。
案例二：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
}
.box {
background-color: lightblue;
height: 100px;
width: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>這個案例展示了使用了 CSS Flexbox 的布局方式。通過設置.container的display屬性為flex，并且對齊方式為space-between，<div> 元素會自動填充父容器的100%寬度，并且在容器內部等間距排列。
案例三：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.box {
background-color: lightblue;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>這個案例展示了使用了 CSS Grid 的布局方式。通過設置.container的display屬性為grid，并且定義了3列，<div> 元素會自動填充父容器的100%寬度，并且在網格中進行自動排列，列之間有10px的間隙。
以上是幾個關于 <div> 默認100% 的案例，它們展示了如何使用不同的布局方式來利用 <div> 元素的默認100%寬度特性來實現不同的頁面布局效果。無論是通過設定固定寬度、使用Flexbox還是Grid布局，<div> 元素的默認100%寬度都是非常有用的特性。希望這些案例能夠幫助讀者更好地理解和應用這一特性。