喜歡研究手帳術時間管理

寫過 WordPress 與手帳書籍的前端工程師

CSS Flexbox 介紹與解析

Flexbox 是一種 CSS 排版語法,屬於 CSS3 新增內容,與傳統的 position、float、display 不同,具有更高的彈性,能解決複雜的排版問題。使用 flex 前,需在容器設置 display: flex,行內元素則用 display: inline-flex。Flexbox 的屬性分為影響容器與項目兩類,需注意屬性使用位置。

Flexbox 的核心屬性包含 flex-grow、flex-shrink、flex-basis,分別用來調整項目寬度、壓縮比例與初始尺寸。flex 是這三個屬性的合併縮寫。常見的應用有版面垂直置中、動態三欄式結構等,透過 flex 的屬性可靈活調整排版。...

我看過的原創小說一覽

看了多年大陸原創小說,特地紀錄以便日後查詢。分類依小說種類,並按閱讀順序排列,供書荒者參考。

女頻小說包括現代言情、古代言情、仙俠奇緣及遊戲競技;男頻小說有玄幻和仙俠。每本書都有劇情提及,怕被劇透者請勿繼續閱讀。分類參考起點網站,並註明男頻女頻,方便查詢。...

原生 CSS 的預處理器:Myth 介紹與使用

Myth 是一款 CSS 預處理器,與 SASS 和 LESS 類似,但使用的是原生 CSS 規範。由於瀏覽器尚未全面支援所有 CSS 規範,Myth 可以幫助編譯這些規範,未來支援後可直接移除 Myth 而不影響瀏覽。

安裝 Myth 後,可使用 npm 和 gulp 進行自動化編譯。將 CSS 檔案從 dev/ 編譯到 build/ 目錄下。也可結合 Compass 和 Myth 進行更高效的開發,實現自動化處理與編譯。...

inline element 與 padding 的二三事

設定元素為 `display: inline` 時,`padding-top` 和 `padding-bottom` 雖可使用,但不會推擠周圍 inline elements,反而會覆蓋其他元素。這與 `display: block` 的元素不同,因為 block 元素的 padding 會推擠下方元素。

範例顯示,inline 元素的 padding 不影響排版,可能造成困擾。因此,雖然技術上可行,但通常不建議使用 top 和 bottom padding。希望這篇文章能修正大家的觀念。...

蝙蝠俠對超人:正義曙光

蝙蝠俠決定前往大都會挑戰超人,因為超人大戰薩德將軍導致大都會毀壞。雙方交戰時,雷克斯路瑟出現,城市陷入新危機,迫使蝙蝠俠和超人合作。

觀影心得指出,電影前半段鋪陳過於冗長,節奏緩慢。神力女超人和反派雷克斯成為亮點。蝙蝠俠的夢境和閃電俠的出場讓人困惑,建議應做成彩蛋。小班飾演的蝙蝠俠表現不差,但缺乏獨立電影背景。...

原來,這只是兩個人的互相取暖

以為愛能改變一個人,願意為所愛之人做貼心的事,將他放在心中最深的位置。設身處地思考對方的難過,除了理性解決,還能感性地給予溫暖擁抱與貼心話語,讓對方知道在這世界上有你無條件支持。

以為愛能讓兩人成為一體,彼此感同身受,為對方著想。但最終發現,這只是自己的妄想。原來所謂的愛,只是寂寞中的互相陪伴,是兩人的互相取暖。...

SASS, LESS 退散,原生 CSS 可以使用變數啦!

CSS 現在支援原生變數,無需使用 SASS 或 LESS 等預處理器。變數的使用需要考慮瀏覽器的相容性,目前 Chrome 和 Firefox 已經支援。CSS 變數的基本語法與預處理器類似,需在 :root 或其他選擇器中定義,並使用 var() 呼叫。

變數可以在不同選擇器中繼承,並可在 RWD 設計中動態改變。CSS 變數亦可互相賦值,並可與 JavaScript 結合使用。使用 var() 時需注意規範,例如不能直接合併單位,需用 calc() 計算。CSS 變數的靈活性和可擴展性值得開發者關注和探索。...

Copyright © since 2008 MUKI space* / omegaSS theme All Rights Reserved.