佳憲的部落格

原本自己以為是很簡單的觀念，不過最近被問後發現其實並沒有很了解，像是我沒去思考過假如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就好。 參考資料 https://ithelp.ithome.com.tw/articles/10252194 https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-width

一個是html標籤的img，一個是css的background-image，兩個都能讓網頁中顯示出圖片。 我自己目前個人遇到的狀況會使用img > background-image 。 img: 會使用img的情況通常是： 網頁不只是需要單純的一張圖片而已，還需要像是超連結的功能，或是想讓圖片能夠縮小放大。 有需要使用動畫的時候，因為img的動畫表現會比background-image更好。 影印頁面時，圖片也想跟著被印出來。   background-image: 簡單來說，是像是網頁中當背景圖片的感覺，意味著background-image其實並沒有自己本身的意義存在，它沒有辦法去代表網頁中內容的任何事情。 會使用的狀況： 圖片不是內容的一部分（設計考量）。 網頁需要有圖片當背景。 影印頁面時，圖片不想跟著被印出來。 小結： img是屬於頁面內容的一部分，它是擁有含義的圖片。 background-image則是不屬於頁面內容的一部分，它是沒有含義，可以拿來單純當作背景的圖片。