所有文章

102 篇文章

CSS
新手指南:CSS scroll-padding 屬性介紹與應用
在現代網頁設計中,我們經常需要處理滾動效果,特別是在單頁應用(SPA)或帶有內部連結的頁面中。 當用戶點擊某個連結跳轉到頁面特定部分時,可能希望這部分內容不會貼邊顯示,而是留出一定的空間。 這時候,s...

2024年8月27日

CSS
新手指南:理解 CSS Stacking Context
在設計網頁時,可能會遇到元素重疊的情況。 為了正確控制這些重疊元素的顯示順序,了解 CSS 中的「Stacki [...]

2024年8月27日

CSS
新手指南:掌握 CSS 偽元素(pseudo element)的用法
在設計網頁時,我們經常需要為元素添加一些裝飾或輔助內容。 但有時候不方便或不想修改 HTML 結構,這時候,CSS 偽元素可以派上大用場。 這篇文章將介紹什麼是 CSS 偽元素,以及如何使用它們來讓你...

2024年8月26日

CSS
新手指南:使用 CSS gap 屬性來輕鬆控制間距
在網頁設計中,元素之間的間距設定是非常重要的一部分。 過去,我們常常需要依賴 margin 或 padding 來調整元素之間的間距。 而現在,CSS 提供了一個更簡單且直觀的屬性來處理這個問題——g...

2024年8月25日

CSS
新手指南:了解 CSS 中的 justify-content 和 align-items 差異
當你使用 CSS Flexbox 進行布局時,justify-content 和 align-items 是兩個非常重要的屬性。 它們都可以幫助你控制,子元素在容器中的排列方式。 但它們的作用方向,和...

2024年8月25日

CSS
新手指南:深入了解 CSS 中的 rem 和 em 單位
在設計網頁時,尺寸和間距的控制至關重要。 CSS 提供了多種單位來設置元素的大小,其中 rem 和 em 是兩個常用的相對單位。 理解它們的不同之處,可以幫助你更靈活地進行網頁布局和設計。

2024年8月23日

CSS
初學者指南:如何使用 CSS 的 calc() 函數
在設計網頁時,你可能經常會遇到一些需要計算尺寸或間距的情況。 這時候,CSS 提供了一個非常有用的工具:calc() 函數。 calc() 可以讓你直接在 CSS 中進行數學運算,非常適合用來處理複雜...

2024年8月22日

CSS
CSS 變數入門:打造更靈活高效的網頁樣式
什麼是 CSS 變數? CSS 變數,也稱為自定義屬性(Custom Properties),是一種可以在 C [...]

2024年8月21日

CSS
前端 101|什麼是 CSS 選擇器?|EP 02
我們可以藉由 scratch 軟體,快速打造一個能完全控制的輕量級網站。 然而,若想要打造、客製並且維護一個以 [...]

2021年12月14日