MUKI space*
Front-end Development,
Effective Note-Taking.
如何使用純 CSS 製作固定於右下角的 CTA 按鈕
本文介紹如何使用純 CSS 製作固定於右下角的 CTA 按鈕，無需依賴 JavaScript。主要方法包括使用 CSS 的 `position: sticky` 和 `position: fixed` 屬性來固定按鈕位置，並利用 `place-self: end` 來調整按鈕在網格中的定位。這樣的設計不僅減少頁面載入時間，還能降低維護成本。
此外，文章還介紹了如何使用 CSS 動畫來增強按鈕的視覺效果，透過 `animation-timeline: scroll()` 語法實現平滑過渡效果。由於某些瀏覽器尚未支援該語法，因此使用 `@supports` 進行兼容性檢查。這些技術使得在不使用 JavaScript 的情況下，仍能創建出互動性強且視覺效果豐富的按鈕。...
在 CSS 建立響應式輸入欄位的方法
本文介紹了 3 種在 CSS 中建立響應式輸入欄位的方法。首先，使用 `min()` 函數可以根據螢幕尺寸動態調整欄位寬度，確保欄位不會超出容器邊界。其次，`display: flex` 提供更複雜的動態寬度調整，適合多元素的自適應排列。最後，`max-width` 方法透過限制最大寬度，並設置 `width` 為 100%，在不同螢幕上保持彈性。這些方法各有優缺點，`min()` 和 `max-width` 簡單易用，而 `flex` 提供更高的彈性但語法較複雜。
這些方法的範例代碼已放在 CodePen 上，讀者可以透過調整父層寬度觀察輸入欄位的變化。這三種方法能有效地提升表單在各種裝置上的美觀性和實用性，適合不同的開發需求和場景。...
vw 進化了！更好用的 CSS 自適應字體大小
vw 單位可讓字體隨螢幕寬度縮放，但當螢幕縮小時字體也會變小，可能造成閱讀困難。為解決此問題，可使用 calc() 反向計算字體，或透過 clamp() 函數設定字體的最大和最小值，避免字體過小或過大。
clamp() 接收三個參數：最小值、變動值和最大值，將字體大小限制在設定範圍內。使用 clamp() 搭配 vw 和 --font-size 變數，能在不同裝置上達到更好的字體顯示效果，避免傳統 media query 的繁瑣設定。...
CSS 表單樣式分享：Material UI 的 Label 標籤浮動縮放
分享一種表單樣式，當表單元件聚焦時，label 標籤會上移，失去焦點後返回原位。此樣式需設置 `placeholder=""`，避免刪除值時 label 不回到原位。可應用於 input 和 textarea。
若需要自動填入帳密，可使用 `autocomplete` 屬性，設置 `username` 和 `current-password`。也提供 CodePen 範例供參考。...
透過 img object-fit 屬性取代 CSS 的 background 語法，輕鬆實現圖片背景的效果
在網頁開發中，使用 object-fit 屬性可取代 CSS 的 background 語法，輕鬆實現圖片背景效果。object-fit 支援 SEO，圖片可用 img 標籤寫在 HTML 檔案中，讓搜尋引擎更易索引。這避免了 background 將圖片寫在 CSS 檔案中，無法被搜尋引擎收錄的問題。
object-fit 可應用於圓形頭像、整齊縮圖排列、Banner 底圖等場景，保持圖片比例不變，提升 SEO 效果。這屬性提供了靈活的圖片顯示方式，簡化了代碼，適用於多數現代瀏覽器。object-position 也可用於調整圖片定位，進一步增強設計靈活性。...
難解的 CSS 排版：認識對齊(下)
CSS 排版中，`margin: 0 auto;` 可讓版面左右置中，需先設定寬度。`padding` 可用於垂直置中，調整上下間距一致即可。`line-height` 適用於單行文字的垂直置中，需與元素高度相同。`position` 和 `transform` 可實現水平垂直置中，無需指定寬高，使用 `transform: translate(-50%, -50%);` 搭配 `position: absolute;` 即可。
`flex` 也是一種方便的置中方法。`transform` 與 `position` 結合，能在不知寬高的情況下置中，提供了靈活的排版選擇。...
難解的 CSS 排版：認識對齊(上)
CSS 排版中，對齊分為水平和垂直兩種。水平對齊常用 text-align，而垂直對齊則是 vertical-align。text-align 可以使內部元件置中，但不會影響自身版面。vertical-align 只適用於行內元素，對於 display:inline 和 display:inline-block 的元素有效。若要垂直對齊多行文字，可使用 display:table-cell。
其他對齊方式還有 margin、padding、position、line-height 及 display (grid, flex) 等。理解設計需求，選擇合適語法，才能迅速完成排版。...
CSS Grid 語法筆記
CSS Grid 是一種強大的佈局系統。首先，將 div 的 display 設為 grid，並定義 grid-template-columns 和 grid-gap。可以使用 fr 單位來設定相對寬度，達到 RWD 效果。重覆的 Grid 模式可用 repeat() 簡化。Grid 排序可用 grid-auto-flow，預設為 row，改為 column 則變成縱向排列。
可用 order 屬性改變 div 的排序，未指定的順序為 0。指定順序後，div 會依照 order 值重新排列。這些技巧能有效提升網頁佈局的靈活性和可維護性。...
Bootstrap 4 的 Grid 應用介紹
Bootstrap 4 引入 Flexbox 技術，革新了 Grid 系統，使得欄寬分配更靈活。相較於 V3，V4 增加了 576px 作為最小斷點，並新增 Extra Large 尺寸。欄寬可以不輸入數字自動平均分配，也可動態調整，並支持文字寬度調整。
在對齊方面，Bootstrap 4 利用 Flexbox 實現垂直與水平對齊，提供多種對齊方式，如置頂、置中、置底等。移除 gutter 可用 no-gutters class 完成，而 Column 排序則使用 flex-first、flex-last 等新語法。V4 的這些改變提升了設計靈活性與效率。...