Tag: css

All the articles with the tag "css".

• [CSS] object-fit / object-position 調整置換元素(img..等)的內容

  Published:Jan 21, 2017 |  at 01:46 PM (2 min read)

  透過 object-fit / object-position 這兩個屬性，我們可以控制置換元素的內容填入的位置及大小。

• [CSS] 各種 CSS Pseudo-Class Selector

  Published:Jan 12, 2017 |  at 03:05 PM (4 min read)

  最近在看一些 CSS 的 pseudo-class selector，有些在瀏覽器支援度已經很普及卻很少看到有人在 CSS 中實際使用，在這紀錄幾個我覺得蠻實用的 selector

• [CSS] 超連結(<a>)的狀態樣式

  Published:Jan 7, 2017 |  at 06:35 AM (1 min read)

  anchor tag 的狀態樣式

• [CSS] flexbox 解析，解決傳統排版的複雜問題

  Published:Nov 23, 2016 |  at 05:51 AM (3 min read)

  CSS3 的新排版方式，flexbox (目前在IE上好像還是有不少 bug....) 利用 flexbox 可以解決我們傳統排版方式遇到的許多問題。

• [css] position 屬性relative、absolute、static 及 fixed 解析

  Published:Nov 16, 2016 |  at 01:56 PM (2 min read)

  css 的 position 屬性，許多剛入門的人不深入了解，容易不清楚究竟是以哪個父元素做定位，造成不良的HTML編排架構。(最差的狀況就是用了一堆 `fixed`.....)

• [CSS] 水平置中與垂直置中(傳統作法)

  Published:Nov 13, 2016 |  at 02:01 PM (5 min read)

  在 CSS 中，大家時常為了水平置中與垂直置中的問題而困擾，這篇文章整理幾個傳統解決置中的做法。

• [css] 讓過長的內容省略為....，text-overflow的用法與說明

  Published:Oct 2, 2016 |  at 01:04 PM (1 min read)

  在網頁的許多地方可能會出現較長的段落，當文字過長時可能會影響排版及 UI。

• [css] word-break、word-wrap(overflow-wrap) 及 white-space 的差別與用法

  Published:Oct 2, 2016 |  at 12:47 PM (2 min read)

  剛開始常分不清楚 CSS 中的 word-break、word-wrap 及 white-space，利用這篇釐清這幾個的用法與差別

• [HTML、CSS] <img> 載入圖片失敗時，純 CSS 替代處理方法

  Published:Jun 25, 2016 |  at 05:23 AM (4 min read)

  img 標籤本身就附帶 onload、onerror、onabort 幾個事件來判斷圖片是否載入成功，因此我們可以透過這些事件來處理圖片載入失敗的情況。

• [CSS] CSS 的 !important 使用

  Published:May 23, 2016 |  at 06:40 AM (1 min read)

  CSS 的 !important 使用