CSS3中介紹最新的幾種長度單位

來源:互聯網
上載者:User
標記說明:

數字上標為有疑惑的地方

盡量做到在專有名字後面給出英文翻譯,因為官方的文檔基本上是英文的,經過各個讀者的翻譯後可能有所區別而產生歧義。

概述:

em:相對於當前對象內文本的字型大小。相對於父節點的字型大小

rem:相對於根項目<html>的字型大小。應用情境:以文字內容決定布局的。

vh和vv:1vh等於1/100的視口高度①,1vw等於1/100的視口寬度。

vmin和vmax:關於視口高度和寬度的最小值或最大值,vmin等於1/100的視口寬高中的最小值。應用情境:讓一個元素始終在螢幕中可見。

ch:數字0的寬度

ex:當前字型的小寫x字母的的高度或者1/2的1em②。應用情境:上實上標和下標

提取到的資訊:

1、font-size:若沒有聲明則會繼承父節點的屬性

引申:

①window, document,body寬高:

body高度是body元素的高度(包括邊框捲軸等),四周預設帶有8px的margin

若沒給html設定顏色,給body設定了顏色,則body的顏色填充整個背景

視口viewport指的是瀏覽器可視範圍,除去邊框,捲軸,工具列的文檔顯示地區

②0.5em怎麼可能和1ex相等?

實際測試後發現設定0.5em與1ex的表現略有區別。畢竟小寫x字母不一等是字型大小font-size的一半。當然不能排除有種字型剛好滿足這個條件

relative:會在應有的位置上進行位移。dom的原位置保留

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.