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

Select a repo