原文連結: 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設定的寬 ...

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