CSS的一些單位

andot 發(fā)布于2019-08-30 11:21 / 2282人閱讀

摘要：你確定，是相對于父元素的大小在我們寫樣式修飾的時候，長度單位像是我們常用的。那么它們有什么不同的地方呢像素。

你確定，EM是相對于父元素的大小？

在我們寫樣式修飾的時候，長度單位像PX、EM、REM是我們常用的。那么它們有什么不同的地方呢？

1、PX

像素。相對長度單位，相對于顯示器的屏幕分辨率的大小

IE無法調(diào)整那些使用px作為單位的字體大小

國外大部分的網(wǎng)站能夠調(diào)整的原因在于其使用了em或者rem作為字體大小

2、em

em相對長度單位相對于當(dāng)前對象內(nèi)的文本字體大小尺寸

參考物是父元素的font-size

當(dāng)前父元素沒有設(shè)置字體尺寸，相對于瀏覽器的默認(rèn)字體大小

em的值不是固定的

em會繼承父級元素的字體大小

3、rem

rem是css3新增的一個相對單位，rem是相對于HTML根元素的字體大小的長度單位

優(yōu)點只需要設(shè)置根目錄的大小就可以把整個頁面的的比例調(diào)好

兼容性 ie8 更早的版本

4、vw、vh

vw、vh、vmax、vmin 這四個單位基于視口

vw是相對視口的寬度而定的長度等于視口寬度的1/100

vh是相對視口（viewport）的高度而定的，長度等于視口高度的1/100

5、%（百分比）

一般來說就是相對于父元素

1、對于普通定位元素就是我們理解的父元素

2、對于position: absolute;的元素是相對于已定位的父元素

3、對于position: fixed;的元素是相對于ViewPort（可視窗口）

6、vm

css3新單位，相對于視口的寬度或高度中較小的那個

其中最小的那個被均分為100單位的vm

比如：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px

缺點：兼容性差

GPU云服務(wù)器云服務(wù)器 java的一些代碼深度學(xué)習(xí)的一些應(yīng)用 php實用的一些代碼數(shù)據(jù)分析的一些方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114938.html

相關(guān)文章

css單位

摘要：數(shù)字與單位之間不能出現(xiàn)空格。有兩種類型的長度單位相對和絕對。是可視區(qū)寬度單位。以百分比為單位的長度值是基于具有相同屬性的父元素的長度值。絕對長度單位視輸出介質(zhì)而定，不依賴于環(huán)境顯示器分辨率操作系統(tǒng)等。 css有幾個不同的單位表示長度一些設(shè)置css長度的屬性有 width，height，margin，padding等長度有一個數(shù)字和單位組成如10px，2em，等。數(shù)字與單位之間不能...

longmon 2019-08-30 10:58 評論0 收藏0
css單位

摘要：數(shù)字與單位之間不能出現(xiàn)空格。有兩種類型的長度單位相對和絕對。是可視區(qū)寬度單位。以百分比為單位的長度值是基于具有相同屬性的父元素的長度值。絕對長度單位視輸出介質(zhì)而定，不依賴于環(huán)境顯示器分辨率操作系統(tǒng)等。 css有幾個不同的單位表示長度一些設(shè)置css長度的屬性有 width，height，margin，padding等長度有一個數(shù)字和單位組成如10px，2em，等。數(shù)字與單位之間不能...

Lin_YT 2019-08-02 15:08 評論0 收藏0
CSS：7個你可能不認(rèn)識的單位

摘要：原文譯文個你可能不知道的單位譯者眾所周知，當(dāng)使用技術(shù)的時候，很容被一些奇異問題給困住。今天，我就介紹一些你之前可能不知道的屬性，是一些例如和測量方面的單位，但是很有可能你之前都沒聽過這些。然而，對于每一個問題，百分比并不是最好的解決方案。原文：7 CSS Units You Might Not Know About 譯文：7個你可能不知道的CSS單位譯者：dwqs 眾所周知，...

peixn 2019-08-28 18:02 評論0 收藏0
CSS字體單位

摘要：所以，在網(wǎng)頁字體中，使用和單位是更好的解決方案。一般來說，我在開始寫網(wǎng)頁的時候，會設(shè)置標(biāo)簽的字體大小為這樣標(biāo)簽就是百分比的單位，然后再網(wǎng)頁接下來使用單位。一、前言在CSS樣式中，當(dāng)文本縮放的時候使用font-size屬性是最難以理解的方面之一。在CSS中，你有4種不同的選擇，能夠讓你設(shè)置文本在瀏覽器中的展示。那么這4種單位哪一種更適合呢？這個問題引發(fā)了各種各樣不同的爭論和評價。想要...

GeekQiaQia 2019-08-28 18:23 評論0 收藏0
基于px2rpx-loader，探討一下loader的封裝思想

摘要：本文以的源碼為學(xué)習(xí)對象，了解其工作機(jī)制以及封裝的思想。通過深入了解，我們總結(jié)了其封裝的思路，順帶學(xué)習(xí)了一下的抽象語法樹。本文以px2rpx-loader的源碼為學(xué)習(xí)對象，了解其工作機(jī)制以及l(fā)oader封裝的思想。 1.前言最近在了解mpvue框架的時候，對于其能夠?qū)崿F(xiàn)一套代碼兼容web和微信小程序（以下簡稱小程序）的能力十分著迷，雖然小程序的MINA框架有著Vue的影子，但是無可否認(rèn)的，小...

番茄西紅柿 2019-04-23 13:32 評論0 收藏0
無單位數(shù)字和行高 —— 別說你懂CSS相對單位

摘要：無單位數(shù)字和行高有一些屬性可以接收不帶單位的數(shù)值意思就是一個不帶長度單位的數(shù)字，如和等于，等于，如此類推。警告不帶單位的只可以表示長度單位和百分比的值，譬如和。段落繼承了的行高。長度有兩種類型絕對的和相對的。前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《Working with relative units》，書中對relative ...

Airmusic 2019-08-29 16:06 評論0 收藏0