---
tags: CSS,六角筆記王
title: CSS - 內容寬度怎麼變來變去? 了解 width 與 max-width / min-width
---

# CSS - width 與 max-width / min-width
寬度，最大寬度，最小寬度，都是寬度，而它們有甚麼不同之處?

## ▶ 單一使用寬度屬性
### ✏ width
- 顧名思義，就是某個元素內容的寬度
- 會被最大 / 最小寬度影響，可以設定 CSS 在父層或是本身
- 若設定最大 / 最小寬度在父層，則會受到父層影響
- 若設定最大 / 最小寬度在本身，則會先受到自己影響
- 由於寬度固定，視窗縮放時，低於該寬度會產生 X 軸

// 固定寬度
.box {
  width: 500px;
}

### ✏ max-width
- 最大寬度，限制內容的最大寬度在某個值
- 若當前寬度與最大寬度相同，看起來寬度相同
- 但在縮放瀏覽器視窗時，擁有最大寬度的元素會自動縮小

// 最大寬度
.box2 {
  max-width: 300px;
}

### ✏ min-width
- 最小寬度，限制內容的最小寬度在某個值
- 若當前視窗寬度與最小寬度相同，看起來寬度相同
- 若當前視窗寬度大於最小寬度，且父層為區塊元素，寬度則與視窗寬度相同
- 視窗縮放時，會依據最小寬度卡住不變化，進而產生 X 軸

// 最小寬度
.box3 {
  min-width: 300px;
}

## ▶ 混和使用寬度屬性
若將它們混合使用會有怎麼的結果?

### ✏ max-width 與 width
- 最大寬度被設定成 300px，但內容設定為 500px
- 高於最大寬度則會被限制，因此內容被影響
- 實際看到為 300px 寬

// 最大寬度低於內容寬度，以最大寬度為主
.box4 {
  max-width: 300px;
  width: 500px;
}

// 最大寬度高於內容寬度，以內容寬度為主
.box5 {
  max-width: 1000px;
  width: 500px;
}

### ✏ min-width 與 width
- 若寬度滿足最小寬度，則以寬度為主，不會自動調整

.box6 {
  min-width: 300px;
  width: 500px;
}

- 若寬度不足最小寬度，則以最小寬度為主並固定寬度，不會自動調整
- 若視窗寬度低於寬度或者最小寬度，會產生 X 軸，寬度卡住不變

.box7 {
  min-width: 1000px;
  width: 500px;
}

綜合以上觀察:
- 若有最小寬度且低於內容寬度，以內容寬度為主，寬度固定
- 若有最小寬度且高於內容寬度，以最小寬度為主，寬度固定
- 若有最大寬度且低於內容寬度，以最大寬度為主，視窗縮放時會自動延伸
- 若有最大寬度且高於內容寬度，以內容寬度為主，視窗縮放時會自動延伸
- 若同時有最大與最小寬度時，以最小寬度為主
- 若最小寬度低於內容寬度，以內容寬度為主
- 其他條件與上述條件相同

## 範例連結
[範例連結](https://codepen.io/hsuan333/pen/wvdEOYg)
<iframe height="300" style="width: 100%;" scrolling="no" title="六角筆記王 - CSS - width 與 max-width / min-width" src="https://codepen.io/hsuan333/embed/wvdEOYg?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/hsuan333/pen/wvdEOYg">
六角筆記王 - CSS - width 與 max-width / min-width</a> by Vic (<a href="https://codepen.io/hsuan333">@hsuan333</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 額外補充
- 媒體查詢寬度，指得是瀏覽器當前視窗的寬度。

## 參考來源
> 1. [CSScoke - min-width & max-width - 金魚都能懂的CSS必學屬性](https://ithelp.ithome.com.tw/articles/10252194)