# CSS min-width,max-width

---
tags: HTML CSS relate
---

###### tags: `HTML, CSS`

## 一般的width：

> 一般的則是不能大於也不能小於設定值

設定長這樣，下方會出現scroll bar讓你可以滑動去看你超出大小的內容物。


## min-width:

> 不能小於設定值，但是要變成多大都可以

有兩個特性：

1. 最小不會低於設定值，代表是會超過視窗的
2. 拉長的部分則是可以往外延伸，一直到填滿所有它能升長的空間

* 因為 min-width 不會再縮小了所以它是會超出空間的

* 就是不再縮得更小(也就是設定的值)，可是要變大是可以的 隨著視窗變大他也會變長看上方那條

## max-width:

> 不能超過設定值，但是要變成多小都可以

有兩個特性：

1. 不超過設定值，再大都不會跑版
2. 可以縮小視窗，內容也不會凸出去

* 拉長視窗內容也不會跑版，因為 max-width 不會超過設定值的大小

* 內容不會凸出去，就算 `<p>` 的 width 大於藍色部分也是如此

## 參考影片:

https://www.youtube.com/watch?v=YjtunZW7jxw&ab_channel=SteveGriffith