您現在的位置是:電腦技術吧?>? 編程技術 ??>??那些你所不知道的數單位,在單位領導都不知道你干了什么??>??正文詳情

那些你所不知道的數單位,在單位領導都不知道你干了什么

左丘弘和2019-11-18 06:40:33 人圍觀
簡介億以后的單位是什么如果您是一個前端開發工程師,PX和em通常使用得更頻繁。但今天文章的重點是介紹一些我們很少使用甚至沒聽說過的單元。I.查看emstyle type=text/c找單位一的技巧

如果你是一名前端開發工程師,一般px和em使用頻率比較高。

但是今天本文的重點是介紹一些我們使用很少、甚至么有聽說的單位。

一、重溫emstyle type=text/cssbody {font-size: 12px;}div {font-size: 1.5em;}/stylebodydivTest-01 (12px * 1.5 = 18px)divTest-02 (18px * 1.5 = 27px)divTest-03 (27px * 1.5 = 41px)/div/div/div/body因為font-size具有繼承性,所以層數越深字體越大。

二、rem雖然上面使用em的情況可能會在開發中用到,但是我們有時候想有一個基準來擴展。

遇到這種需求時,我們可以使用rem單位,rem中的r代表root,這意味著設置當前元素的字體大小為根元素,大多數情況下,我們會設置在html元素上。

style type=text/csshtml {font-size: 12px;}div {font-size: 1.5rem;}/stylebodydivTest-01 (12px * 1.5 = 18px)divTest-02 (12px * 1.5 = 18px)divTest-03 (12px * 1.5 = 18px)/div/div/div/body當然,rem單位不僅應用在字體上,還可以實現到CSS 網格系統中。

三、vh 和 vw在進行響應式布局時,我們常常會使用百分比來布局,然而CSS的百分比不總是解決每個問題的最佳方案,CSS的寬度相對于離它最近的父元素的寬度。

如果你想使用視口的寬度、高度而不是父元素的寬高,可以使用vh和vw單位。

1vh = viewportHeight * 1/100; 1vw = viewportWidth * 1/100; 使用vh、vw就可以保證元素的寬高適應不同設備。

四、vmin 和 vmaxvw和vh對應于viewport的width和height,而vmin和vmax分別對應于width、height中的最小值和最大值,例如如果瀏覽器的寬/高被設置為1000px/600px,那么1vmin = 600 * 1/100;1vmax = 1000 * 1/100;下面我們來看看幾個實例:4.1 一個正方形元件總是觸摸至少兩個屏的邊緣style type=text/css.box {height: 100vmin;width : 100vmin;}/stylebodydiv class=box style=background-color: #f00fdasjfdlas/div/body4.2 覆蓋全屏style type=text/cssbody {margin: 0;padding:0;}.box {/*寬屏顯示器width height*/height: 100vmin;width : 100vmax;}/stylediv class=box style=background-color: #f00fdasjfdlas/div五、ex 和 chex、ch單位與em、rem相似之處在于都依賴于font-size,但是ex、ch還依賴于font-family,基于font-specific來計算。

引用w3C規范:

ex unit Equal to the used x-height of the first available font. [CSS3-FONTS] The x-height is so called because it is often equal to the height of the lowercase x. However, an ex is defined even for fonts that do not contain an x. The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristic is to look at how far the glyph for the lowercase o extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em must be assumed.
ch unit Equal to the used advance measure of the 0 (ZERO, U 0030) glyph found in the font used to render it.
用一副圖來解釋這兩種單位的含義:

這兩種單位,有許多用途,大部分是用于印刷時的微調整。

例如,sup、sub元素分別顯示上標和下標,但是我們可以使用position和bottom模擬:style type=text/cssbody {margin: 0;padding:0;}.sup {position: relative;bottom: 1ex;}.sub {position: relative;bottom: -1ex;}/styledivAaBspan class=supb/spanCcXxDspan class=subd/spanEeFf/div

版權聲明:本文由 左丘弘和 整理編輯。

原標題:單位1,怎么找單位1

轉載注明出處:http://www.dn9ww09s.icu/program/13419.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 兌換券怎么用,兌換券使用說明

    兌換券怎么用,兌換券使用說明 相關圖片兌換券使用說明內容QT優惠券是QT語音中的虛擬貨幣。你知道QT優惠券有什么用嗎?如何使用QT優惠券?現在,超人軟件將為您帶來QT優惠券的相關內容,希望您喜歡!QT優惠券有什么用?...

  • 手機雙向驗證收不了驗證碼怎么辦,12306手機雙向驗證需要多久

    手機雙向驗證收不了驗證碼怎么辦,12306手機雙向驗證需要多久 相關圖片手機認證第二步移動雙向驗證操作在12306。一些用戶遇到移動雙向驗證的需求,不知如何解決,12306政府針對黃牛越來越猖獗的現象,推出了移動雙向驗證,保護了乘客的個人信息安全輸...

  • 剔尖兒做法,涼拌做法

    剔尖兒做法,涼拌做法 相關圖片炒餅做法問了很多,其實漸開線的方法很簡單。一般來說,有兩種方法:一種是矩形填充法,另一種是矩形填充法,適用于大多數情況1。使用矩形工具繪制像素高度為2的矩形。在面板上...

  • 序列號不適用,蘋果序列號不可用

    序列號不適用,蘋果序列號不可用 相關圖片mac維修后序列號不可用當我們在計算機上登錄網上銀行時,如果是第一次登錄,瀏覽器和網上銀行工具會提醒我們安裝以前沒有安裝過的安全插件和控件,以確保使用網上銀行時計算機...

  • 淘寶怎么修改會員名字怎么改,淘寶會員名自動生成了

    淘寶怎么修改會員名字怎么改,淘寶會員名自動生成了 相關圖片淘寶修改申請書怎么寫我相信有很多淘寶賬號已經使用了很長時間,但是面對一些可恥的會員名字,我不禁要問,淘寶會員的名字可以修改嗎?如何更改淘寶會員名稱?接下來,超人軟...

  • c證有什么用,怎么用c

    c證有什么用,怎么用c 相關圖片2c及時,我用C?編寫了一個正則表達式,用于刪除頁面代碼中的HTML標記,這對于收集信息和消除其中的HTML非常有用。這是引用片段:publicstringchecc ...

  • 網易郵箱怎么設置電子名片,網易郵箱名片附件如何刪除

    網易郵箱怎么設置電子名片,網易郵箱名片附件如何刪除 相關圖片郵箱如何設置名片網易flash mail是一款編輯的電子郵件,其最大的特點是能夠兼容市面上所有的電子郵件,實現多個賬戶的同時管理。最近,很多用戶不知道如何設置網易flash m網易郵箱怎...

  • 離為火詳解,明夷卦詳解

    離為火詳解,明夷卦詳解 相關圖片大有卦詳解Console.log(object[,object,…])在控制臺中輸出消息。如果有多個參數,則它們在輸出時用空格分隔。第一個參數可以是包含格式化占位符輸出的恒卦詳解...

  • 回收站刪除的文件怎么恢復,如何找回刪除的文件內容

    回收站刪除的文件怎么恢復,如何找回刪除的文件內容 相關圖片直接刪除的文件怎么找回如果只是一個普通的文件錯誤刪除,你仍然可以在回收站找到它。但如果你欠了一段時間,即使是回收站也是空的。在這種情況下,如何檢索回收站中刪除的文...

  • 算王添加工程怎么添加不進來,算王怎么添加工程

    算王添加工程怎么添加不進來,算王怎么添加工程 相關圖片不能向工程中添加窗體的是一。打開Dreamweaver軟件。如果你的電腦上沒有Dreamweaver,2。單擊HTML 3。創建新項目4。把老鼠一分為二。(先準備圖片,然后在下面的站點頭文件怎么添加到工...

熱評文章

  • 啟用蘋果wapi耗電,蘋果wapi默認設置

    啟用蘋果wapi耗電,蘋果wapi默認設置 相關圖片蘋果wapl是啥呀我相信大多數蘋果移動用戶已經將他們的移動系統升級到了iOS10,那么WAPI在網絡設置頁面上的意思是什么?蘋果WAPI是開還是關?接下來,超人軟件編輯將向您介紹蘋果8p...

  • 循環代碼,無限循環代碼

    循環代碼,無限循環代碼 相關圖片循環的意思步驟1:創建一個新的電影剪輯元素1,在元素1的舞臺中間放置一張照片或其他項目,然后重復該操作(新的2.3.4.)。。。第二步:回到主場景,將所有電影剪輯組件拖到c 代...

  • svchost到底在下載什么,win10徹底禁用svchost

    svchost到底在下載什么,win10徹底禁用svchost 相關圖片win7徹底解決svchost最近,很多win7用戶和朋友都反映,在使用電腦的過程中,常常會跳出svchost占用內存過多的提示。那么svchost.exe是什么?如果svchost占用太多svchost不停下載...

  • 怎么使用超鏈接,超鏈接制作

    怎么使用超鏈接,超鏈接制作 相關圖片圖片超鏈接制作教程要使用Dreamweaver制作網頁,您需要安裝制作Dreamweaver網頁所需的工具。你可以從官方網站下載。第一步是打開Dreamweaver工具;然后,在設置超鏈接...

  • 字幕文件如何打開,字幕是什么文件

    字幕文件如何打開,字幕是什么文件 相關圖片ssa字幕文件如何使用有時候我們下載高清電影的片源,卻沒有內置字幕,看不懂語言的電影,更別說有多郁悶了。此時,可以使用外部字幕來解決此問題。讓我們看看如何使用小編的字...

  • 分頁,如何分頁

    分頁,如何分頁 相關圖片表格分頁這是我第一次學習PHP時編寫的PHP分頁函數。當時,我對PHP模板技術并不熟悉。通常使用兩個函數,即刪除HTML代碼pregstring()的函數和通過獲取字符自動分頁...

  • 完美解碼者,完美解碼有什么用

    完美解碼者,完美解碼有什么用 相關圖片完美解碼 安卓很多用戶在選擇視頻播放器時會推薦完美的解碼。完美解碼是一款功能強大的視頻播放器,集視頻播放和編解碼于一體。它適用于當前各種流媒體格式。它是一個全方位的...

  • 自拍照打馬賽克后別人能用嗎,潮自拍怎么打馬賽克

    自拍照打馬賽克后別人能用嗎,潮自拍怎么打馬賽克 相關圖片打馬賽克超自拍是一款非常專業的攝影美化軟件。用戶最想知道的是超自拍是否可以制作馬賽克?如何拍一張超自拍的照片?現在,超人軟件編輯將為大家介紹超人的相關內容,希望大...

  • 讓人流連忘返的,這是一個讓人流連忘返

    讓人流連忘返的,這是一個讓人流連忘返 相關圖片讓我們流連忘返網頁設計師總能以各種方式設計出令人驚嘆的細節,讓用戶難忘。特別是在頁眉部分,設計師的創意、光環、感受和力量將在簡單的設計技巧下呈現在用戶面前。網頁頁...

  • 桌面有一個圖標刪不掉,桌面上的圖標怎么刪除

    桌面有一個圖標刪不掉,桌面上的圖標怎么刪除 相關圖片手機桌面圖標刪不掉有些用戶在電腦桌面上看到自己沒有添加的圖標,怎么能不刪除呢?我們該怎么辦?讓我們看看桌面無法刪除圖標1的解決方案。右鍵單擊桌面空白-屬性桌面-自定義...

關注微信

变脸官网查询