宽高尺寸 ( width、height )

网页元素产生的容器通常都会有“宽度与高度”，这篇教学会介绍容器的宽度 width、高度 height、max-width、min-width、max-height、min-height 等样式属性用法，还会使用 max-content、min-content、fit-content 等属性值，让内容去决定容器的尺寸。

请先阅读：容器盒子模型 ( box Model )

快速导览：

• 设定宽度与高度的样式属性
• 宽度与高度使用的单位
• 宽度或高度使用 auto 关键字
• 限制长宽的范围
• 使用 max-content、min-content、fit-content 关键字属性值

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

设定宽度与高度的样式属性

网页中大多数的元素都可以调整宽度和高度 ( 显示类型为 inline 的元素不能调整宽高 )，下方列出可以控制宽度和高度的样式属性，这些样式属性都没有继承特性，通常仅需要 width 和 height 就能满足大多数的情境，但如果在一些“响应式网页设计 RWD”的应用上，有时会需要透过 max-width、min-width、max-height、min-height 来限制元素的最大和最小长宽 ( 往下继续阅读 限制长宽的范围 )。

设定宽高的方式很简单，只要在样式属性后方输入“具有长度单位”的数值或特定的“关键字”，就能设定容器的长宽，甚至也可以搭配 calc() 函数进行动态计算出宽高，下方列出几种支援的设定方式 ( 使用 width 示范，可改成 height )。

div {
  width: 100px;             /* 絕對長度 */
  width: 50%;               /* 相對長度 */
  width: 90vw;              /* 相對視窗長度 */
  width: max-content;       /* 關鍵字，最大內容寬 */
  width: calc(100% - 10px); /* 動態計算 */
  width: var(--w);          /* CSS 變數或自訂屬性 */
  width: attr(w px, 200px); /* 新版瀏覽器支援的 attr() 讀取屬性值設定寬度 */
}

宽度与高度使用的单位

宽度和高度使用“非负值”的“数字”，并搭配下列各种长度单位作为属性值 ( 参考 长度与角度单位 )：

下方的范例使用不同长度单位设定元素的宽度高度。

线上展示：https://codepen.io/oxxo/pen/WNBWMPQ

<!-- 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。

线上展示：https://codepen.io/oxxo/pen/ExzJQro

<!-- 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 属性元素都是不可置换元素。

宽高默认值分成下列几种：

下方的范例呈现不同显示类型元素在没有设定宽高，或将宽高设定成 auto 的状况。

线上展示：https://codepen.io/oxxo/pen/PovgQVM

<!-- 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 作为单位，宽度和高度会套用置换后内容的宽度和高度，如果“只设定高度”或“只设定宽度”，则会根据内容的长宽比例自动计算出没有设定的数值，下方的范例有四张图，分别是原图、只设定宽度、只设定高度、同时设定宽高四种。

线上展示：https://codepen.io/oxxo/pen/QWRPQoN

<!-- 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 是“可以自动计算数值”或“相对长度”的属性值时，例如 auto、百分比、vw、vh、vmin、vmax、calc 计算...等，常会搭配 max-width、min-width、max-height、min-height 这四个“限制最大与最小长宽”的样式属性。

下方范例展示使用 max-width、min-width 限制元素宽度的效果，虽然将 div 的宽度设定为父元素宽度的 100% 或 10%，但因为限制宽度的最大值和最小值，也就让宽度无法成为父元素宽度的 100% 或 10%。

线上展示：https://codepen.io/oxxo/pen/WNqKbBN

<!-- 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/>min-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 限制高度，但需要注意如果使用百分比为数值，则“父元素一定要有高度单位”，下方范例的父元素使用红色框线，可以看出子元素的高度限制状况。

线上展示：https://codepen.io/oxxo/pen/yLdqyWO

<!-- 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/>min-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 的效果就跟原本默认值相同。

线上展示：https://codepen.io/oxxo/pen/RwzBNLM

<!-- 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>

小结

元素的宽度和高度虽然简单，但却会根据元素显示类型的不同，出现细微的差异，虽然大部分的状况都不会影响排版，但如果能深入了解宽高的定义，就可以让元素更符合排版需求，做出更理想的网页。

意见反馈