---
# System prepended metadata

title: 'CSS min-width,max-width'
tags: ['HTML, CSS']

---

# CSS min-width,max-width 

---
tags: HTML CSS relate
---

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


## 一般的width：

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

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

![](https://i.imgur.com/Ni1PkHH.png)


## min-width:

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

有兩個特性：

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

* 因為 min-width 不會再縮小了所以它是會超出空間的
![](https://i.imgur.com/RHI3mmY.png)


* 就是不再縮得更小(也就是設定的值)，可是要變大是可以的 隨著視窗變大他也會變長看上方那條
![](https://i.imgur.com/vMgyH5m.png)


## max-width:

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

有兩個特性：

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


* 拉長視窗內容也不會跑版，因為 max-width 不會超過設定值的大小
![](https://i.imgur.com/m0TIHmh.png)



* 內容不會凸出去，就算 `<p>` 的 width 大於藍色部分也是如此
![](https://i.imgur.com/dwzRun3.png)





## 參考影片:

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


