說到 HTML 元素的換行效果，在前端有滿多種實作方式的最常見的方式是使用 <br /> 這個 HTML 元素來進行換行 ⋯⋯

軟體開發

RD少女養成計畫

為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。


在 Modern Web 的世界中，已經有非常多的套件、語法、框架，可以解決大部分網頁排版問題。
以我近期的觀察來說，在專案開發時，大部分公司會為了讓下一個接手、維護的開發者能更快上手專案架構，而採取原生的 CSS 寫法，而不是仰賴快速又方便的套件。


相信透過之前的介紹，大家對於 CSS 選擇器（CSS selector）已經不陌生了，今天我們要來聊聊兩個在實務上非常好用的偽類（pseudo class ）語法，他們分別是 :nth-child() 與 :nth-of-type()，在了解這兩個語法之前，我們首先要先來聊聊什麼是「偽類」呢？


不論是在基礎或是進階的版面排列，幾乎離開不了 position 系列的 CSS 語法，如果對於這些語法不熟悉，要快速完成畫面需求幾乎是不可能的，甚至會延宕整個團隊的開發速度（對，position 語法就是這麽重要）。

<div class="draft-block draft--p left">你好，文章中的好幾個範例都沒有圖喔</div>

相信大家在一開始接觸 CSS 時，一定會很疑惑為什麼除了 width 外，還會有 max-width 及 min-width 語法呢？
當要開發響應式網頁時，到底要使用什麼語法來控制「斷點」？

對於前端初學者來說，在切版時會出現很多規則、不規則的網頁區塊，這時候我們會嘗試用各種相對定位、絕對定位、margin 或是 padding 的方式來進行網頁區塊的推擠。

明明想要某個欄位的寬高為 200px，卻發現自己不知道為什麼怎麼更改都會改不動，又或者寬高更改了，卻沒有辦法與其他元素並列。
上述的狀況，通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯

在一個網頁上，會需要使用到圖片的地方有非常多處，像是品牌主視覺、橫幅廣告、側邊廣告、主要內容的預覽圖片、縮圖、背景圖片等。


在初學網頁排版的時候，文字、段落、列表的排版可以說是比較好上手的，只要稍微透過margin、padding、border及文字顏色上調整，就可以輕易獲得一段美美的文字。

然而要去調整圖片的大小及其他相關效果，就不是那麼容易的一件事了，往往在開發時，都會出現圖片效果不如自己預期的狀況。


與HTML不同，CSS是專門修改網頁內容「樣式」的程式語言，也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容，但你可以透過HTML新增網頁內容後，再使用CSS去修改他的樣式，例如⋯⋯