css position 學習心得
原文連結: https://appcs342.blogspot.com/2022/04/css-position.html移植時的最後更新日期: 2022-04-08T21:36:10.985-07:00 最近有在研究position，在css中這算是一個非常重要的屬性，網頁中的定位全要靠它，在此整理一些研究時的筆記跟我的小小心得～首先，是我對position作用的理解對網頁上物件的屬性添加了position就可以改變物件的排列方式，改變其在網頁上位置，但其實就算都沒有添加，原本物件間也會有自己的排列，所以我會覺得說，position它其實是在對網頁上的物件做一個「改變定位參考對象」的動作，預設狀態下參考對象會是原本物件資料自己本身的排列狀態，position的值會改變定位參考對象，從而改變物件排列方式。position主要有的值大致分成以下五種：staticrelativefixedabsolutestickystatic這個值是假如都沒設position，預設就會是satic。幾個我覺得重要的點使用了這個值，其他的定位方式都會失效很少用到，因為預設就是static...
Selector Combinators 中的+跟~差別
原文連結: https://appcs342.blogspot.com/2022/04/selector-combinators.html移植時的最後更新日期: 2022-04-04T05:40:13.467-07:00 介紹兩個很類似的選擇器，全名是Next-sibling combinator，簡稱加號(+)全名是Subsequent-sibling combinator，簡稱波浪號(~)加號是會影響到後方同層級的首次遇到元素波浪號則是影響後方同層級的全部元素加號跟波浪號都是目標為要影響後方同層級，語法使用方式也都差不多[選取對象A + 選取對象B] 及 [選取對象A ~ 選取對象B]。看起來非常的像，不過有一些差別：加號是只能選到A後面那一個B波浪號是選到A後面整串同層的B
搞懂 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設...
css中的img及background-image比較
原文連結: 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是屬於頁面內容的一部分，它是擁有含義的圖...