解析 CSS 寬高設定為何無效？從 width:auto 到 100vw
當你設定了 width 或 height 屬性卻無效時，原因可能來自以下幾個方面：
-
元素的顯示類型（display 屬性）：
-
塊級元素（block）：如
<div>、p 預設為 display: block，寬度預設為父元素的 100%（width: auto），高度則由內容決定。如果父元素沒有明確寬度，塊級元素可能不會如預期顯示。 -
行內元素（inline）：如
<span>、a 預設為 display: inline，它們忽略 width 和 height 屬性，除非你將 display 改為 block 或 inline-block。 -
行內塊元素（inline-block）：支持 width 和 height，但受父元素或內容影響。
-
-
父元素的限制：
-
如果父元素沒有明確的寬度或高度，子元素的 width: 100% 或 height: 100% 可能無效，因為它們是相對於父元素的 content box 計算的。
-
父元素若有 padding 或 border，可能導致子元素的 100% 寬高計算不符合預期。
-
-
CSS 盒模型（Box Model）：
-
width 和 height 預設只影響元素的 content box。若元素有 padding 或 border，實際佔據空間會比設定的 width 或 height 大。
-
使用 box-sizing: border-box 可以讓 width 和 height 包含 padding 和 border，這可能解決寬高不符預期的問題。
-
-
定位屬性（position）：
-
如果元素使用了 position: absolute 或 fixed，它的寬高可能相對於最近的非 static 定位父元素，而不是直接父元素。
-
若父元素未設定 position: relative，絕對定位的子元素可能參考視窗（viewport）或更高層的父元素。
-
-
其他屬性影響：
-
min-width、max-width、min-height、max-height 可能限制了 width 或 height 的效果。
-
flex 或 grid 容器中的子元素可能受容器屬性（如 flex-shrink 或 align-items）影響。
-
-
單位問題：
- 使用不同單位（px、%、vw、vh 等）可能導致不同的計算方式。例如，width: 100% 基於父元素寬度，而 100vw 基於視窗寬度。
CSS width 和 height 屬性介紹
1. width 和 height 的基本概念
-
width：定義元素的寬度，預設單位為像素（px），也可以使用 %、vw、rem 等單位。
-
height：定義元素的高度，行為類似 width，但高度通常由內容決定，除非明確指定。
-
適用於 display: block 或 display: inline-block 的元素，對於 display: inline 無效。
2. width: auto
-
定義：預設值，元素的寬度由其內容或父元素決定。
-
行為：
-
塊級元素：寬度為父元素的 content box 寬度（扣除父元素的 padding 和 border）。
-
行內塊元素：寬度由內容決定。
-
行內元素：忽略 width 屬性。
-
-
範例：
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
width: 300px;
height: 200px;
background-color: lightblue;
padding: 10px;
}
.child {
width: auto; /* 寬度等於父元素的 content box */
height: 50px;
background-color: coral;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">子元素</div>
</div>
</body>
</html>說明：.child 的寬度會是父元素的 300px（不包含 padding），高度為 50px。
3. width: 100% 不等於 100vw
-
width: 100%：
-
定義：寬度等於父元素 content box 的 100%。
-
範圍：僅限於父元素的寬度（不包含父元素的 padding 或 border）。
-
限制：
-
如果父元素沒有明確寬度（例如父元素也是 width: auto），則 100% 可能無效或依賴更高層父元素。
-
如果父元素有 padding 或 border，子元素的 100% 寬度不包含這些部分，可能導致視覺上小於預期。
-
-
-
100vw：
-
定義：寬度等於視窗（viewport）的 100% 寬度。
-
範圍：基於瀏覽器視窗的完整寬度，包含滾動條（如果存在）。
-
差異：
-
100vw 不受父元素限制，總是等於視窗寬度。
-
如果父元素寬度小於視窗，width: 100% 會比 100vw 小。
-
如果頁面有水平滾動條，100vw 可能包含滾動條寬度，導致溢出。
-
-
-
範例：
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
width: 500px;
height: 200px;
background-color: lightgray;
padding: 20px;
}
.child-percent {
width: 100%; /* 父元素的 content box 寬度 */
height: 50px;
background-color: coral;
}
.child-vw {
width: 100vw; /* 視窗寬度 */
height: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child-percent">width: 100%</div>
<div class="child-vw">width: 100vw</div>
</div>
</body>
</html>說明：
-
.child-percent 的寬度為父元素的 500px。
-
.child-vw 的寬度為視窗的完整寬度（例如螢幕寬 1440px 則為 1440px），可能超出父元素範圍。
-
4. width: 100% 的範圍
-
範圍：父元素的 content box 寬度。
-
注意事項：
-
如果父元素有 padding 或 border，子元素的 100% 不包含這些部分，可能導致視覺上小於父元素。
-
若父元素是 display: flex 或 grid，子元素的 width: 100% 可能受其他屬性（如 flex-shrink）影響。
-
-
解決方法：
-
使用 box-sizing: border-box 讓父子元素的寬度計算更直觀。
-
確保父元素有明確的寬度。
-
5. width: 100vw 的範圍
-
範圍：視窗的完整寬度，包含滾動條（如果存在）。
-
注意事項：
-
可能導致水平滾動條，因為 100vw 不考慮父元素的限制。
-
如果頁面有垂直滾動條，100vw 包含滾動條寬度，可能造成溢出。
-
-
解決方法：
-
使用 calc(100vw -
<滾動條寬度>) 來避免溢出（滾動條寬度因瀏覽器而異，需自行測試）。 -
搭配 overflow-x: hidden 防止水平滾動。
-
實務操作範例：解決寬高無效問題
假設你想讓一個子元素寬高完全填滿父元素，以下是完整的程式碼範例，展示如何正確設定 width 和 height，並避免常見問題：
<!DOCTYPE html>
<html>
<head>
<style>
/* 確保父元素有明確寬高 */
.parent {
width: 500px;
height: 300px;
background-color: lightblue;
padding: 20px;
box-sizing: border-box; /* 包含 padding 和 border */
position: relative; /* 為絕對定位子元素提供參考 */
}
/* 子元素填滿父元素 */
.child {
width: 100%; /* 父元素的 content box 寬度 */
height: 100%; /* 父元素的 content box 高度 */
background-color: coral;
box-sizing: border-box; /* 確保寬高包含 padding 和 border */
}
/* 使用 100vw 的子元素 */
.child-vw {
width: 100vw; /* 視窗寬度 */
height: 100px;
background-color: lightgreen;
}
/* 處理行內元素 */
.inline-child {
display: inline-block; /* 改為 inline-block 以支持寬高 */
width: 200px;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">子元素：width 100%, height 100%</div>
</div>
<div class="child-vw">子元素：width 100vw</div>
<span class="inline-child">行內元素：設為 inline-block</span>
</body>
</html>
程式碼說明：
-
父元素：.parent 設定明確的 width: 500px 和 height: 300px，並使用 box-sizing: border-box 確保包含 padding。
-
子元素：.child 使用 width: 100% 和 height: 100%，填滿父元素的 content box。
-
視窗寬度：.child-vw 使用 width: 100vw，寬度等於視窗寬度，可能超出父元素。
-
行內元素：.inline-child 改為 display: inline-block，使其支持 width 和 height。
常見問題與解決方法
-
問題：子元素 width: 100% 不包含父元素的 padding 或 border
-
解決：在父子元素都設定 box-sizing: border-box。
-
程式碼：
.parent, .child {
box-sizing: border-box;
}
-
-
問題：父元素高度為 0，子元素 height: 100% 無效
-
解決：確保父元素有明確的高度，或使用 min-height。
-
程式碼：
.parent {
height: 300px; /* 或 min-height: 300px */
}
-
-
問題：100vw 導致水平滾動條
-
解決：使用 calc(100vw - 17px)（假設滾動條寬度為 17px，需依瀏覽器測試）。
-
程式碼：
.child-vw {
width: calc(100vw - 17px);
}
-
-
問題：行內元素忽略 width 和 height
-
解決：將 display 設為 block 或 inline-block。
-
程式碼：
.inline-child {
display: inline-block;
width: 200px;
height: 50px;
}
-
總結
-
width 和 height：控制元素寬高，適用於 block 或 inline-block 元素。
-
width: auto：預設值，寬度由內容或父元素決定。
-
width: 100%：基於父元素 content box 寬度，受父元素限制。
-
100vw：基於視窗寬度，可能導致溢出。
-
無效原因：檢查 display、父元素寬高、盒模型、定位屬性等。
-
實務建議：
-
使用 box-sizing: border-box 簡化寬高計算。
-
確保父元素有明確的寬高。
-
測試不同單位（%、vw 等）以符合需求。
-