2024年CSS終於實現垂直置中
2024 年起，align-content 終於可以在塊級佈局裡運作了。在這之前，想單靠一個屬性垂直置中是辦不到的，你得先把容器換成 Flexbox 或 Grid。 123<div style="align-content: center; height: 100px;"> <code>align-content</code> 現在可以直接使用了！</div> 注意上面那個 height: 100px，它不是裝飾。align-content 做的事情是「把內容在 block 軸上的剩餘空間裡分配」，前提是容器得真的有剩餘空間。普通的塊級元素高度是 auto，會被內容撐到剛剛好、一點空間都不剩，這時候寫 align-content: center 不會有任何視覺變化。要看到效果，容器至少要有明確的 height、min-height，或是被外層（例如 grid track、flex item）給定一個比內容更大的高度。這個前提我第一次踩到時找了快二十分鐘，明明屬性寫對了卻沒反應。 瀏覽器支援狀況：Chrome ...
CSS 偽元素指南
偽元素讓你在不碰 HTML 的前提下插入內容、選取特定部分，或者做純裝飾性的事。下面從最常用的 ::before/::after 開始，到幾個容易忽略的偽元素，逐一說明。 什麼是偽元素？偽元素讓你在文件中插入內容或選取特定部分，不需要修改 HTML 結構。語法是雙冒號 ::（基於向後相容，部分偽元素也接受舊的單冒號 : 寫法）。 CSS 偽元素列表以下是常見的 CSS 偽元素： ::before - 在元素內容之前插入生成內容 ::after - 在元素內容之後插入生成內容 ::first-line - 選取元素的第一行 ::first-letter - 選取元素的第一個字母 ::selection - 選取使用者反白的部分 ::placeholder - 選取輸入框的預設提示文字 ::marker - 選取列表項目的標記（點或數字） ::backdrop - 全螢幕元素底下的背景層 較少使用但在特定情況下很有用的偽元素： ::cue - 用於 WebVTT 字幕 ::slotted() - 用於 Web Components 中的投影內容 ::before 和 ::af...
網站圖片路徑大崩潰？一次搞懂網站部署時的圖片路徑問題
問題情境專案部署到 IIS 的虛擬目錄，URL 結構如下： 本機：http://localhost:56961/Project/ 正式環境：https://www.project.com.tw/Project/ HTML 裡的圖片路徑寫 ./Content/images/image.png，本機跑得好好的，上正式就全破圖。 實際原因：./ 是相對路徑，參考點是「解析該路徑的檔案位置」，不是 HTML 頁面。若圖片路徑寫在外部 .css 檔（例如放在 /Project/styles/main.css），瀏覽器會以 CSS 檔的目錄為基準，把 ./Content/images/image.png 解析成 /Project/styles/Content/images/image.png，而非你預期的 /Project/Content/images/image.png。 換部署位置（從本機 localhost 換到子目錄或反向代理後方）時，CSS 檔的實際 URL 路徑可能跟著變，就會踩到這個問題。 三種解法方案一：硬寫絕對路徑1background: url("/Proj...
CSS實現DOM節點水平居中的多種方式
水平置中看似基礎，但選錯方法往往要多加幾行補丁才能修正。以下五種寫法各有適用條件，選之前先確認目標元素是行內還是區塊、有無固定寬度、父容器是否允許改動。 1. text-align: center作用在父容器，讓其中的行內元素或行內區塊元素水平置中。 123.parent { text-align: center;} 文字、<span>、<img>、display: inline-block 的元素都吃這個規則；display: block 的子元素不受影響。如果要置中的是區塊元素，這條沒用。 2. margin: auto把區塊元素的左右邊距都設為 auto，瀏覽器會平均分配剩餘空間。 1234.child { width: 300px; margin: 0 auto;} 不想寫死寬度的話，可以用 width: fit-content，寬度跟著內容走，同樣能置中： 1234.child { width: fit-content; margin: 0 auto;} 兩種寫法的前提一...
實現左右佈局的多種CSS方法
左側固定寬度、右側自適應，是網頁版型裡最高頻的需求之一。以下整理五種 CSS 做法，左側統一設為 200px，逐一說明寫法與實務取捨。 1. 浮動（Float）方法傳統做法，現在主要用來維護舊專案，但看懂它對理解 CSS 佈局原理有幫助。 12345678910.container { overflow: hidden; /* 清除浮動 */}.left { float: left; width: 200px;}.right { margin-left: 200px; /* 與左側寬度相同 */} 相容性最廣，IE6+ 都能用。缺點是必須清除浮動，父容器用 overflow: hidden 是最省事的方式，但如果內容需要溢出顯示（如下拉選單），就得改用 clearfix。 2. 絕對定位（Absolute Positioning）方法用絕對定位把左側釘死在左上角。 1234567891011.container { position: relative;}.left { pos...
