CSS的一些單位

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

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

你確定，EM是相對(duì)于父元素的大??？

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

1、PX

像素。相對(duì)長(zhǎng)度單位，相對(duì)于顯示器的屏幕分辨率的大小

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

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

2、em

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

參考物是父元素的font-size

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

em的值不是固定的

em會(huì)繼承父級(jí)元素的字體大小

3、rem

rem是css3新增的一個(gè)相對(duì)單位，rem是相對(duì)于HTML根元素的字體大小的長(zhǎng)度單位

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

兼容性 ie8 更早的版本

4、vw、vh

vw、vh、vmax、vmin 這四個(gè)單位基于視口

vw是相對(duì)視口的寬度而定的長(zhǎng)度等于視口寬度的1/100

vh是相對(duì)視口（viewport）的高度而定的，長(zhǎng)度等于視口高度的1/100

5、%（百分比）

一般來(lái)說(shuō)就是相對(duì)于父元素

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

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

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

6、vm

css3新單位，相對(duì)于視口的寬度或高度中較小的那個(gè)

其中最小的那個(gè)被均分為100單位的vm

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

缺點(diǎn)：兼容性差

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114938.html

相關(guān)文章

css單位

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

longmon 2019-08-30 10:58 評(píng)論0 收藏0
css單位

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

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

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

peixn 2019-08-28 18:02 評(píng)論0 收藏0
CSS字體單位

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

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

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

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

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

Airmusic 2019-08-29 16:06 評(píng)論0 收藏0