CSS 繪圖技巧

css-layout-practice is maintained by alan10332000. This page was generated by GitHub Pages.

切版乃是一大學問，HTML不會包，包出來怎麼會這樣？ 一縮放就爆炸，摔鍵盤了。 這個通常是我拿來 Debug 使用的切版方式，記得不使用時刪除。 這邊建議改成 border-box 為寬度計算會比較好計算. inline - 區塊類型相似 <span> ，任何高度/寬度都無法生效。 inline-block - 區塊類型相似 <span>，但是可以設定 高度/寬度。 block - 區塊類型相似 <p>，預設會佔據整行寬度與內容物高度。 table - 區塊類型相似 &

在切版領域中一個很重要的概念，就是格線系統 (Grid System)，我會在這個階段去熟悉他，並學習如何用CSS Grid屬性來切版。

因為每個瀏覽器所預設的的css預設值都不太一樣，所以我們常常會為了要讓每個平台一樣，要根據瀏覽器去做各種不同樣式的調整，也就是所謂的 破版 (在chrome看正常，去了ie就壞掉了)

透過學習 HTML 與 CSS，可以建立結構清晰、外觀美觀的網頁。 建議多加練習不同的切版方式，如 Flexbox 和 Grid，並運用 RWD 技巧來提升適應性，讓網站在不同裝置上都能有良好的呈現效果。

還是有什麼關鍵字可以提示，像是字/圖用的尺吋單位之類的，每次遇到這種小div帶特別背景時，都會刻到跑版，而且手機、平板、桌機的padding、margin都會不一樣，這該怎麼解決，只能每個斷點都重設嗎？