在 CSS 中,數字使用非常廣泛,例如:用來設置寬度、高度、字號、邊框寬度等等。當我們需要設置這些數字時,就需要學會如何在 CSS 中書寫數字。
/* 設置寬度 */ .box { width: 200px; } /* 設置字號 */ p { font-size: 16px; } /* 設置邊框寬度 */ .box { border-width: 1px; } /* 設置行高 */ p { line-height: 1.5; }
CSS 中的數字可以帶單位,也可以不帶單位。常用的單位有像素(px)、百分比(%)、ems(em)、視口寬度(vw)和視口高度(vh)等。
/* 帶單位的數字 */ .box { width: 200px; height: 100%; font-size: 1.2em; margin-top: 20px; padding: 10px 20px; } /* 不帶單位的數字 */ .box { opacity: 0.5; z-index: 10; line-height: 1.5; letter-spacing: 2px; }
除了常用的數字單位之外,還有一些 CSS 屬性需要使用特殊的數字表示,比如 transform 屬性的 rotate 和 scale 值就需要使用角度和比例數字。
/* rotate 值需要使用角度數字 */ .box { transform: rotate(45deg); } /* scale 值需要使用比例數字 */ .box { transform: scale(1.5); }
總的來說,CSS 中的數字使用相對簡單,只需要記住一些常用的單位和特殊的數字格式,就能輕松應對各種樣式需求。
上一篇css數字問題