显示与比例 ( box-sizing、aspect-ratio )

虽然透过 CSS 的 width 和 height 可以很轻松的控制元素尺寸，但也时常会遇到边界或边框影响宽度，或无法等比例变化的状况，这篇教学会介绍透过 box-sizing 定义宽高显示方式，以及利用 aspect-ratio 根据比例调整宽高。

快速导览：

• box-sizing 定义宽高显示方式
• aspect-ratio 根据比例调整宽高

教学影片

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

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

box-sizing 定义宽高显示方式

box-sizing 样式属性主要定义容器“宽度和高度的显示方式”，通常在排版时，如果不希望 padding 或 border 影响容器尺寸，就会使用这个样式属性改变显示方式，有两个属性值：

下方的范例使用不同的 box-sizing 属性值，可以看出虽然宽高设定相同，但实际呈现的大小却不同，class 为 b 的 div 因为设定了 box-sizing: border-box;，所以宽度和高度都包含了 padding 与 border 的宽度。

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

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

aspect-ratio 根据比例调整宽高

aspect-ratio 样式属性可以让容器“根据指定的比例改变宽高”，没有继承特性，过去在动态调整宽高时，往往会借助百分比、CSS 的 calc() 函数搭配单位计算，甚至还得透过 JavaScript 动态计算，但自从 CSS 推出 aspect-ratio 样式属性后，单纯透过 CSS 就可以根据比例调整宽高，是个十分方便的样式属性，属性值有下列几种写法：

下方范例使用五个不设定宽度的 div ( 宽度自动适应外围 main 元素 )，透过 aspect-ratio 根据比例产生对应高度，搭配 CSS 动画效果，就能看出当父元素宽度发生变化时，内容也会根据比例呈现出对应的长宽比。

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

<!-- HTML 程式碼 -->
<main>
  <div class="a">1:1</div>
  <div class="b">4:3</div>
  <div class="c">2:1</div>
  <div class="d">16:9</div>
  <div class="e">3:4</div>
</main>

<!-- CSS 程式碼 -->
<style>
  main {
    width: 100px;
    animation: oxxo 2s infinite alternate;
  }
  div {
    border: 1px solid #000;
    margin: 10px;
  }
  .a {aspect-ratio: 1/1;}
  .b {aspect-ratio: 4/3;}
  .c {aspect-ratio: 2/1;}
  .d {aspect-ratio: 16/9;}
  .e {aspect-ratio: 3/4;}
  @keyframes oxxo {
    from {width: 100px;}
    to {width: 150px;}
  }
</style>

小结

box-sizing 和 aspect-ratio 虽然不是“必要”的样式属性，但往往能借由改变显示行为或固定比例的方式，让排版更加得心应手，是非常方便好用的样式属性。

意见反馈