7種新型的CSS長度單位

2021-10-14 02:12:50 字數 2888 閱讀 3240

眾所周知css

技術我們雖然很熟悉,在使用的過程卻很容易被困住,這讓我們在新問題出現的時候變得很不利。隨著web繼續不斷地發展,對於新技術新解決方案的要求也會不斷增長。因此,作為網頁設計師和前端開發人員,我們別無選擇,必須熟悉我們手上的工具,做到知己知彼,這樣才能百戰不殆。

這就意味著有那麼些個特別的貨,雖然平常都不怎麼會用上,但是一旦某個地方需要它們了,他們就真的是特麼得合適不過來了呢。

今兒,我就準備向大夥兒介紹一些你們之前可能很少見過css傢伙們。他們每個都是度量的單位,類似pixel 和 em這樣的,但是很有可能你之前從來就沒聽過這些傢伙們!就讓我們一起來交個朋友吧~

我們首先介紹下和我們熟悉的很相似的貨。em 被定義為相對於當前物件內文字的字型大小。炒個栗子,如果你給body小哥設定了font-size字型大小,那麼body小哥的任何子元素的1em就是等於body設定的font-size。

test

body 

div

你看,這裡div這娃的字型大小是1.2em。解釋來說,就是他從body爹爹那裡繼承的字型大小(這裡是14px)的1.2倍,結果就是16.8px。

但是,如果你用em一層一層級聯得定義巢狀元素的字型大小又會花生什麼事情呢?在下面這一小段**裡我們應用了和上面一樣一樣的css,每乙個div都從它上一級父元素繼承了字型大小,並且逐漸得增加。

test 

test

test

雖然在某些地方這正是我們想要的,但是通常情況下我們還是希望就依賴單一的相對度量單位就好。這時候嘛,我們就可以使用 rem 了。 『r』是「root」的縮寫,意思就是1rem等於根元素的字型大小;大部分情況下,根元素就是元素了。

html 

div

這樣在上面的那三個巢狀的div娃們的字型大小都是 1.2*14px = 16.8px 了。

rems 不僅僅只是在設定字型大小上很方便。再炒個栗子,你可以用基於html根元素字型大小的rem作為整個網格布局或者ui庫的大小單位,然後在其他特定的地方用em單位。這樣將會給你帶來更多的字型大小和伸縮的可控性,

.container
概念上來說,這個方法的思想就是讓你的介面根據你的內容進行縮放。但是,這樣做並不是對所有的情況都有意義。

響應式web設計離不開百分比。但是,css百分比並不是所有的問題的最佳解決方案。css的寬度是相對於包含它的最近的父元素的寬度的。但是如果你就想用視口(viewpoint)的寬度或者高度,而不是父元素的,那該腫麼辦? 這就是 vh 和 vw 單位為我們提供的。

1vh 等於1/100的視口高度。栗子:瀏覽器高度900px, 1 vh = 900px/100 = 9 px。同理,如果視口寬度未750, 1vw = 750px/100 = 7.5 px。

可以想象到的,他們有很多很多的用途。比如,我們用很簡單的方法只用一行css**就實現同螢幕等高的框。

.slide
假設你要來乙個和螢幕同寬的標題,你只要設定這個標題的font-size的單位為vm,那標題的字型大小就會自動根據瀏覽器的寬度進行縮放,以達到字型和viewport大小同步的效果,有木有?!

vh和 vm 依據於視口的高度和寬度,相對的,vmin 和 vmax則關於視口高度和寬度兩者的最小或者最大值。比如,瀏覽器的寬度設定為1100px,高度設定為700px, 1vmin = 1px, 1vmax = 11px。如果寬度設定為800px,高度設定為1080px, 1vmin就等於8px, 1vmax則未10.8px。

那麼問題來了,我們應該在什麼場景下使用這兩個單位呢?

假設有乙個元素,你需要讓它始終在螢幕上可見。只要對其高度和寬度使用vmin單位,並賦予其低於100的值就可以做到了。再來個栗子,可以這樣定義乙個至少有兩個邊觸控到螢幕的方形:

如果你要讓這個方形框框始終鋪滿整個視口的可見區域(四邊始終觸控到螢幕的四邊)

結合使用這些單位可以為我們提供乙個新穎有意思的方式來靈活地利用我們視口的大小。

ex 和 ch 單位,類似於 em 和 rem, 依賴於當前的字型和字型大小。 但是,不同的是,這兩貨是基於字型的度量單位,依賴於設定的字型。

ch 單位通常被定義為數字0的寬度。你可以在eric meyers的部落格裡找到關於它的一些有意思的討論,例如將乙個等寬字型的字母」n」的寬度設定為40ch,那麼在另一種型別的字型裡它卻可以包含40個字母。這個單位的傳統用途主要是盲文的排版,但是除此之外,肯定還有可以應用他的地方。

ex 定義為當前字型的小寫x字母的高度或者 1/2 的 1em。 很多時候,它是字型的中間標誌。

這些單位有很多用途,大部分用於版式的微調。比方說,sup 元素(上角文字標),可以通過position:relative;bottom: 1ex;實現 。類似的方法,你可以實現乙個下角文字標。瀏覽器預設的方式是利用

上標和下標特定垂直對齊規則,但是如果你想更細粒度更精確得控制,你可以像下面這樣做:

sup 

sub

持續關注不斷發展壯大的css技術無疑是很重要的,這樣你才能掌握你所持有的工具的全部技能。說不定將來你遇到的某個特殊的問題就需要使用這些複雜的單位來解決。

css 長度單位

畫素 螢幕 顯示器 實際上是由乙個乙個的小點點構成的 不同螢幕的畫素大小是不同的,畫素越小的螢幕顯示的效果越清晰 所以同樣的200px在不同的裝置下顯示效果不一樣 百分比 也可以將屬性值設定為相對於其父元素屬性的百分比 設定百分比可以使子元素跟隨父元素的改變而改變 doctype html en u...

CSS的長度單位

css相對長度單位中的相對二字,表明了其長度單位會隨著它的參考值的變化而變化,不是固定的。以下是css相對長度單位列表 css相對長度單位 說明em 元素的字型高度the height of the element s font ex字母x的高度the height of the letter x ...

CSS 的長度單位

長度單位包括包括 相對單位和絕對單位。相對長度單位包括有 em,ex,ch,rem,vw,vh,vmax,vmin 絕對長度單位包括有 cm,mm,q,in,pt,pc,px em相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定,則相對於瀏覽器的預設字型尺寸。ex...