CSS3 中的取值和單位

2021-07-24 06:53:17 字數 1222 閱讀 8229

在 css3 中增加了很多度量的單位和取值,下面是專案開發中常用到的單位和取值。

1.長度值單位

h1 

/*  如果視口的寬度是200mm,那麼上述**中h1元素的字型大小將為16mm,即(8x200)/100。

*/

h1 

/*如果視口的寬度是300mm,高度是200mm,那麼上述**中h1元素的字型大小將為24mm,即(8x300)/100,因為寬度比高度要大,所以計算的時候相對於寬度。

*/

2.角度值單位

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

3.時間值單位

1s = 1000ms

4.顏色值

r:紅色值。正整數 | 百分數

g:綠色值。正整數 | 百分數

b:藍色值。正整數 | 百分數

a:alpha透明度。取值0~1之間

5.影象值

(1)語法:

= linear-gradient([ [ | to ] ,]? [, ]+)

= [left | right] || [top | bottom]

= [ | ]?

(2)取值:

下述值用來表示漸變的方向,可以使用角度或者關鍵字來設定:

:用角度值指定漸變的方向(或角度)。

to left:設定漸變從右到左。相當於: 270deg。

to right:設定漸變從左到右。相當於: 90deg。

to top:設定漸變從下到上。相當於: 0deg。

to bottom:設定漸變從上到下。相當於: 180deg。這是預設值,等同於留空不寫。

:用於指定漸變的起止顏色。

:指定顏色。

:用長度值指定起止色位置。不允許負值。

:用百分比指定起止色位置。

使用示例:

class="test1">

div>

class="test2">

div>

div

.test1

.test2

style>

效果預覽:

css3 中的尺寸單位

1 em 它是我們常用的,經常用在字的大小上。它是大小是相對於父級的大小。1em 父級px 2 百分比 指的是相對於父級的,在定義標籤的width時會用 3 rem 它是em的增強版,ie9 它相對於根html來設定大小。不會像em,依賴於父級大小。一般都是 html 原因 頁面預設的大小是16px...

前端CSS及CSS3常用單位

1.px就是pixel的縮寫,畫素的意思 2.絕對單位,頁面按精確畫素展示 3.缺點 沒有彈性 不適合自適應布局 4.瀏覽器預設字型是16px 1.相對單位,相對於它的父節點字型進行計算 2.如果自身定義了font size按自身來計算 3.缺點 他會根據父級元素的大小而變化 但是如果巢狀了多個元素...

CSS3的vw和vh視口單位

認識視口單位 viewport units 首先,我們要了解什麼是視口。在業界,極為推崇的一種理論是 peter paul koch 江湖人稱 ppk大神 提出的關於視口的 解釋 在桌面端,視口指的是在桌面端,指的是瀏覽器的可視區域 而在移動端較為複雜,它涉及到三個視口 分別是 layout vie...