基線 CSS 是一種預設好的 CSS 樣式,它能夠在頁面加載時自動添加到網頁中。這些樣式可以幫助頁面快速、準確地排版和布局。
基線 CSS 包括了很多基礎的計算值和約定,比如字體大小、行高、外邊距和內邊距等。這些計算值和約定是普遍適用于不同瀏覽器和不同設備的,使網頁在各種屏幕尺寸和分辨率下都能呈現相似的效果。
通過使用基線 CSS,開發者可以快速地搭建出一個基本的頁面框架,而且無需花費大量的時間來編寫和調試 CSS 樣式。這不僅可以提高開發效率,還可以減少錯誤和沖突。
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 1rem; font-weight: bold; line-height: 1.2; } p { margin-top: 0; margin-bottom: 1rem; line-height: 1.5; } .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 1rem; padding-left: 1rem; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } }
如上所示,這是一個基線 CSS 的示例代碼。該樣式適用于大多數的頁面,包括排版、布局和基本的字體風格。當然,有些時候還需要進行一些個性化的調整,但基線 CSS 可以做到 “快速搭建、重復利用、方便管理”,并且可以幫助開發者快速上手。