搞懂 width / max-width / min-width 差異
原文連結: https://appcs342.blogspot.com/2022/03/width-max-width-min-width.html
移植時的最後更新日期: 2022-03-27T01:59:21.653-07:00
原本自己以為是很簡單的觀念，不過最近被問後發現其實並沒有很了解，像是我沒去思考過假如width跟max-width都設定數值，互相衝突後會發生什麼事情。所以我打算重新研究後，整理筆記出來。
width(寬度）
- 用來設定物件的寬
- 網頁頁面一定會用到的屬性
max-width(最大寬度值）
- 用來給物件設定最大寬度值
- 適用於尺寸限制時
min-width(最小寬度值）
- 用來給物件設定最小寬度值
- 適用於尺寸限制時
衝突時的狀況
結論：會以更加明確的那個狀況為優先。
舉例來說，假如給一個物件10單位的寬度（width)，又指定給這個物件最小寬度為20單位(min-width)，這時候就會產生衝突的狀況。最後的結果會是最小寬度更為優先，所以是20單位。
在這狀況下，min-width會覆蓋width的值，我自己是理解成min-width意味著最少就是需要這樣的寬度值，所以假如width設定的寬度值少於min-width就會失去效果。
小結
寬度通常都會擇一使用，很少會遇到 width / max-width / min-width 同時混再一起使用，因為這樣不只可讀性變得怪怪的，邏輯也會不太通。然後還有width因為比較基本，所以通常混用時，常常會被 max-width / min-width 覆蓋效果，所以要讓width正常發揮它的作用，最簡單的方式就是只下width就好。
參考資料
本部落格所有文章除特別聲明外，均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 Vic's Blog！
評論