CSS Variable 使用 calc()
CSS Variable 除了用來處理重複值外,實務上常常搭配 calc() 使用。
CSS Variable 除了用來處理重複值外,實務上常常搭配 calc() 使用。
background Property 需搭配 url(),也可使用 CSS Variable。
水平靠右直覺會使用 Flexbox Layout 的 justify-content: flex-end,事實上也可使用 Flow Layout 的 margin-left: auto 更精簡。
水平靠左直覺會使用 Flexbox Layout 的 justify-content: flex-start,事實上也可使用 Flow Layout 的 margin-right: auto 更精簡。
水平置中直覺會使用 Flexbox Layout 的 justify-content: center,事實上也可使用 Flow Layout 的 margin: auto 更精簡。
若圖片由 API 以 Base64 String 傳回且圖片大小不一,此時 Front-end 為了美觀必須在不改變原圖比例下有相同長寬,此時可使用 CSS 的 Object Fit 與 Object Position 完成。
當多個不同高度的 inline 或 inline-block 水平並列時,可由 vertical-align 指定各 Element 該如何垂直對齊。
HTML 將 Element 分成 Inline、Block 與 Inline-block Element,透過 display: inline-element 可將 Inline / Block 強制轉成 Inline-block。
HTML 將 Element 分成 Inline、Block 與 Inline-block Element,透過 display: inline 可將 Block Element 強制轉成 Inline Element。
HTML 將 Element 分成 Inline、Block 與 Inline-block Element,透過 display: block 可將 Block 強制轉成 Inline。