寬度、高度、box-sizing
網頁元素產生的容器通常都會有「寬度與高度」，這篇教學會介紹容器的寬度 width、高度 height、max-width、min-width、max-height、min-height 等樣式屬性用法，除了會搭配各種長度單位，還會使用 max-content、min-content、fit-content 等屬性值，最後還會介紹 box-sizing 定義寬高的顯示方式。
請先閱讀：容器盒子模型 ( box Model )
快速導覽：
寬度與高度
網頁中大多數的元素都可以調整寬度和高度 ( 顯示類型為 inline 的元素不能調整寬高 )，下方列出可以控制寬度和高度的樣式屬性，這些樣式屬性都沒有繼承特性，通常僅需要 width 和 height 就能滿足大多數的情境，但如果在一些「響應式網頁設計 RWD」的應用上，有時會需要透過 max-width、min-width、max-height、min-height 來限制元素的最大和最小長寬 ( 前往閱讀 限制長寬的範圍 )。
| 樣式屬性 | 說明 |
|---|---|
width |
寬度 |
height |
高度 |
max-width |
最大寬度 |
min-width |
最小寬度 |
max-height |
最大高度 |
min-height |
最小高度 |
寬度與高度使用的單位
寬度和高度使用「非負值」的「數字」，並搭配下列各種長度單位作為屬性值 ( 參考 長度與角度單位 )：
| 長度單位 | 性質 | 說明 |
|---|---|---|
| auto 或不設定 | - | 由內容自動撐開，或根據內容寬高比例換算。 |
| px | 絕對長度 | 像素。 |
| % | 相對長度 | 父元素寬度或高度的百分比。 |
| em | 相對長度 | 元素本身字體大小的幾倍。 |
| rem | 相對長度 | 根元素字體大小的幾倍。 |
| pt、cm、mm、in | 絕對長度 | 印刷單位。 |
| vw、vh、vmin、vmax | 相對長度 | 相對顯示畫面的寬度或高度。 |
下方的範例使用不同長度單位設定元素的寬度高度。
<!-- HTML 程式碼 -->
<div class="a">
<div class="b">px</div>
<div class="c">%</div>
<div class="d">em</div>
<div class="e">rem</div>
</div>
<!-- CSS 程式碼 -->
<style>
:root {font-size: 30px } /* 根元素字型大小 */
div {border: 1px solid #000;}
.a {
font-size: 10px; /* 父元素字型大小 */
width: 200px;
height: 300px;
background: orange;
}
.a div {font-size: 20px;} /* 所有子元素字型大小 */
.b {
width: 100px; /* 使用 px */
height: 60px;
background: yellow;
}
.c {
width: 70%; /* 200px x 70% = 140px */
height: 20%; /* 300px x 20% = 60px */
background: red;
}
.d {
width: 6em; /* 20px x 6 = 120px */
height: 6em; /* 20px x 6 = 120px */
background: green;
}
.e {
width: 2rem; /* 30px x 2= 60px */
height: 1rem; /* 30px x 1 = 3px */
background: cyan;
}
</style>
由於「百分比」單位是根據「父元素」的寬度或高度進行計算，如果父元素「沒有指定數值」，就無法正確計算出長度，這種狀況特別會影響「高度」樣式，就算內容使用「換行」或「撐高」的方式，也無法正確計算高度，主要因為網頁的寬度通常會根據瀏覽器的寬度進行換算，但高度卻得經過內容或其他元素的高度才能計算。
如果元素的高度要使用「百分比 %」為單位，父元素就一定要具有實際的高度數值。
下方範例的父元素完全不設定寬高，單純使用子元素的高度和換行元素撐開父元素，可以發現第一個 div 的寬度可以正確計算，但高度因為使用了「百分比」為單位，所以只能依靠內容撐開，不然就會是 0。
<!-- HTML 程式碼 -->
<div class="a">
<div class="b">高度用 %</div>
<div class="c">hello oxxo, good morning!!</div>
<br/>換行
<br/>換行
<br/>換行
<br/>換行
<br/>換行
<br/>換行
</div>
<!-- CSS 程式碼 -->
<style>
div {border: 1px solid #000;}
.a {
background: orange;
display: inline-block; /* 父元素完全不設定寬高 */
}
.b {
width: 50%; /* 被撐開的寬度 x 50% */
height: 50%; /* 無法計算高度，只能靠內容撐開，不然就是 0 */
background: yellow;
}
.c {
height: 50px; /* 設定高度撐開父元素 */
background: cyan;
}
</style>
不設定寬度或高度、使用 auto 單位
對於「不可置換」元素而言，如果不設定元素的寬度或高度，或使用 auto 作為單位，就會根據元素的「顯示類性」套用寬高的預設值。
網頁的元素主要分成兩種，分別是「可置換元素」與「不可置換元素」：
- 可置換元素：透過 src 數值改變元素內容，同時影響元素容器寬高，常見元素為 img、svg。
- 不可置換元素：大部分的網頁沒有 src 屬性元素都是不可置換元素。
寬高預設值分成下列幾種：
| 預設寬度 | 預設高度 | 相關顯示類性元素 |
|---|---|---|
| 100% | 0 | div、flex、grid、flow、flow-root、ruby-text |
| 0 | 行內容器高度 | inline、inline-*、table、table-*、ruby |
| 100% | 行內容器高度 | list-item |
下方的範例呈現不同顯示類型元素在沒有設定寬高，或將寬高設定成 auto 的狀況。
<!-- HTML 程式碼 -->
display: block;<br>
<div class="a"></div>
<br>display: inline;<br>
<div class="b"></div>
<br>display: inline-block;<br>
<div class="c"></div>
<br>display: flex;<br>
<div class="d"></div>
<br>display: grid;<br>
<div class="e"></div>
<br>display: table;<br>
<div class="f"></div>
<br>display: flow;<br>
<div class="g"></div>
<br>list-item;<br>
<div class="h"></div>
<!-- CSS 程式碼 -->
<style>
div {border: 1px solid red;}
.a {display: block;}
.b {display: inline;}
.c {display: inline-block;}
.d {display: flex;}
.e {display: grid;}
.f {display: table;}
.g {display: flow;}
.h {display: list-item;}
</style>
對於「可置換」元素而言，如果不設定元素的寬度或高度，或使用 auto 作為單位，寬度和高度會套用置換後內容的寬度和高度，如果「只設定高度」或「只設定寬度」，則會根據內容的長寬比例自動計算出沒有設定的數值，下方的範例有四張圖，分別是原圖、只設定寬度、只設定高度、同時設定寬高四種。
<!-- HTML 程式碼 -->
<img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg"/>
<img class="a" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg"/>
<img class="b" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg"/>
<img class="c" src="https://steam.oxxostudio.tw/download/css/function-filter-demo.jpg"/>
<!-- CSS 程式碼 -->
<style>
img {border: 1px solid #000;} /* 不設定寬高就會採用置換後內容的寬高 */
.a {width: 100px;} /* 自動等比例計算高度 */
.b {height: 112px;} /* 自動等比例計算寬度 */
.c {
width: 200px;
height: 50px;
}
</style>
限制長寬的範圍
當 width 和 height 設定為「可以自動計算數值」的屬性值時，例如百分比、vw、vh、vmin、vmax、calc 計算...等，常會搭配 max-width、min-width、max-height、min-height 這四個「限制最大與最小長寬」的樣式屬性。
下方範例展示使用 max-width、min-width 限制元素寬度的效果，雖然將 div 的寬度設定為父元素寬度的 100% 或 10%，但因為限制寬度的最大值和最小值，也就讓寬度無法成為父元素寬度的 100% 或 10%。
<!-- HTML 程式碼 -->
<main>
<div class="a">width:100%</div>
<div class="a max">width: 100%;<br/>max-width: 200px;</div>
<div class="b">width:10%</div>
<div class="b min">width: 100%;<br/>max-width: 200px;</div>
</main>
<!-- CSS 程式碼 -->
<style>
main {
border: 1px solid #000;
width: 300px;
padding: 0 10px;
}
div {
font-family: monospace;
border: 1px solid #000;
padding: 10px;
margin: 10px 0;
}
.a {width: 100%;}
.max {max-width: 200px;}
.b {width: 10%;}
.min {min-width: 200px;}
</style>
同樣的做法，也可以使用 max-height、min-height 限制高度，但需要注意如果使用百分比為數值，則「父元素一定要有高度單位」，下方範例的父元素使用紅色框線，可以看出子元素的高度限制狀況。
<!-- HTML 程式碼 -->
<main>
<div class="a">height:100%</div>
<div class="a max">height: 100%;<br/>max-height: 50px;</div>
<div class="b">height:10%</div>
<div class="b min">height: 100%;<br/>max-height: 50px;</div>
</main>
<!-- CSS 程式碼 -->
<style>
main {
border: 1px solid #f00;
height: 120px;
}
div {
font-family: monospace;
border: 1px solid #000;
margin: 10px 0;
}
.a {height: 100%;}
.max {max-height: 80px;}
.b {height: 10%;}
.min {min-height: 80px;}
</style>
使用 max-content、min-content、fit-content 屬性值
元素的長寬除了使用單位、百分比和 auto 等常用的屬性值，也可以使用 CSS3 特有的 max-content、min-content、fit-content 屬性值，這些屬性值的說明如下：
| 屬性值 | 說明 |
|---|---|
| max-content | 寬度等於內容最大寬度 ( 文字方向垂直時等於最大高度 )。 |
| min-content | 寬度等於內容最小寬度 ( 等於最長的單字 )。 |
| fit-content | 自動調整空間 ( 類似 auto )，使其介在 min-width 和 max-width 之間。 |
下方範例呈現三種不同屬性值的效果，可以看出如果設定了 max-content，文字就不會換行 ( 換行不符合內容最大寬度 )，導致文字凸出原本的範圍，如果設定 min-content，則會根據內容最長的單字 ( 不會自動換行的字 ) 作為寬度，而 fit-content 的效果就跟原本預設值相同。
<!-- HTML 程式碼 -->
<main>
<div>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="a">STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="b">STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<div class="c">STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
</main>
<!-- CSS 程式碼 -->
<style>
main {
width: 360px;
border: 1px solid #000;
}
div {
border: 1px solid #000;
padding: 5px;
margin: 10px;
background: #ddd;
}
.a {width: max-content;}
.b {width: min-content;}
.c {width: fit-content;}
</style>
box-sizing 定義寬高顯示方式
box-sizing 樣式屬性主要定義容器「寬度和高度的顯示方式」，有兩個屬性值：
| 屬性值 | 說明 |
|---|---|
| content-box | 預設值，寬高尺寸「不包含」內邊距與邊框寬度。 |
| border-box | 寬高尺寸「包含」內邊距和邊框寬度。 |
下方的範例使用不同的 box-sizing 屬性值，可以看出雖然寬高設定相同，但實際呈現的大小卻不同，class 為 b 的 div 因為設定了 box-sizing: border-box;，所以寬度和高度都包含了 padding 與 border 的寬度。
<!-- HTML 程式碼 -->
<div class="a"><span>oxxo<br/>( content-box )</span></div>
<div class="b"><span>apple<br/>( border-box )</span></div>
<!-- CSS 程式碼 -->
<style>
div {
width:150px;
height:150px;
border: 10px solid #000;
margin: 10px;
padding: 30px;
float: left; /* 靠左浮動排列 */
}
div span {
background: yellow;
padding: 0;
margin: 0;
border: none;
}
.a span {
display: block; /* .a 裡的 span 的顯示類型為 block */
width: 150px;
height: 150px;
}
.b {
box-sizing: border-box; /* .b 設定為 border-box */
}
</style>
小結
元素的寬度和高度雖然簡單，但卻會根據元素顯示類型的不同，出現細微的差異，雖然大部分的狀況都不會影響排版，但如果能深入瞭解寬高的定義，就可以讓元素更符合排版需求，做出更理想的網頁。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～