14 前端web的CSS中單位和值

2021-07-13 18:09:16 字數 1690 閱讀 3532

在網頁中的顏色設定是非常重要,有字型顏色(color)、背景顏色(background-color)、邊框顏色(border)等,設定顏色的方法也有很多種:

1、英文命令顏色

前面幾個小節中經常用到的就是這種設定方法:

p

2、rgb顏色

這個與 photoshop 中的 rgb 顏色是一致的,由 r(red)、g(green)、b(blue) 三種顏色的比例來配色。

p

每一項的值可以是 0~255 之間的整數,也可以是 0%~100% 的百分數。如:

p

3、十六進製制顏色

這種顏色設定方法是現在比較普遍使用的方法,其原理其實也是 rgb 設定,但是其每一項的值由 0-255 變成了十六進製制 00-ff。

p

例項**:

charset="utf-8">

顏色值title>

type="text/css">

p

style>

head>

當我還是三年級的學生時是乙個害羞的小女生。p>

body>

html>

長度單位總結一下,目前比較常用到px(畫素)、em、% 百分比,要注意其實這三種單位都是相對單位。

1、畫素

畫素為什麼是相對單位呢?因為畫素指的是顯示器上的小點(css規範中假設「90畫素=1英吋」)。實際情況是瀏覽器會使用顯示器的實際畫素值有關,在目前大多數的設計者都傾向於使用畫素(px)作為單位。

2、em

就是本元素給定字型的 font-size 值,如果元素的 font-size 為 14px ,那麼 1em = 14px;如果 font-size 為 18px,那麼 1em = 18px。如下**:

p

上面**就是可以實現段落首行縮排 24px(也就是兩個字型大小的距離)。

下面注意乙個特殊情況:

但當給 font-size 設定單位為 em 時,此時計算的標準以 p 的父元素的 font-size 為基礎。如下**:

html:

以這個例子span>為例。p>
css:

p

span

結果 span 中的字型「例子」字型大小就為 11.2px(14 * 0.8 = 11.2px)。

3、百分比

p

設定行高(行間距)為字型的130%(12 * 1.3 = 15.6px)。

例項**:

charset="utf-8">

長度title>

type="text/css">

p span

style>

head>

慕課,超酷的網際網路span>、,創新的網路一站式學習、實踐體驗;服務及時貼心span>,內容專業、有趣易學span>。專注服務網際網路工程師快速成為技術高手!p>

body>

html>

前端開發中的CSS的長度單位em px ex

px 畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。em 是相對長度單位,相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。ex 相對長度單位。相對於字元 x 的高度。此高度通常為字型尺寸的一半。如當前對行內文字的字型尺寸...

CSS中em單位和px單位的區別

這裡引用的是jorux的 95 的中國 需要重寫css 的文章,題目有點嚇人,但是確實是現在國內網頁製作方面的一些缺陷。我一直也搞不清楚px與em之間的關係和特點,看過以後確實收穫很大。平時都是用px來定義字型,所以無法用瀏覽器字型放大的功能,而國外大多數 都可以在ie下使用。因為 1.ie無法調整...

css中的單位

在css中,長度單位分為以下幾種 各單位介紹 px 不用過多介紹,精確畫素 in 寸cm 厘公尺mm 公釐pt 大約1 72寸 pc 大約1 6寸 vw 以視窗寬度為參照,1vw為視窗寬度的1 vh 視窗高度為參照,1vh為視窗高度的1 vmin 視窗的寬度和高度中較小的乙個為參照 vmax 視窗的...