生活随笔
收集整理的這篇文章主要介紹了
CSS之EM属性
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
什么是EM?
在一個空白的HTML文檔內,你沒有任何關于字體大小的聲明而只使用默認設置。在大多數(shù)瀏覽器上為html和body標簽的默認字體大小為100%
使用EM為單位一定要知道父元素的設置,因為EM是一個相對值,是一個相對于父元素的值
如果選擇器存在font-size屬性,那么該選擇器本身1em的值就是對應的font-size的值,而該選擇器其余屬性再使用的1em屬性的值就是font-size屬性確定的值
注1.:如果選擇器本身font-size屬性值是固定值(比如24px),那么其余屬性再使用em為單位的值就是根據(jù)選擇器本身的font-size來計算(比如margin:2em就是2*24px)
注2:而如果選擇器本身font-size屬性是使用em確定的(比如1em),那么就要根據(jù)選擇器父元素的font-size值去確定選擇器本身的em值(比如選擇器父元素的font-size屬性為24px,那么選擇器本身便為24*1=24px),然后該選擇器的其余屬性再根據(jù)已經確定的em值(24px)去配置自己的屬性值,父元素的字體大小可以影響 em 值,但這種情況的發(fā)生純粹是因為繼承
實例1:
選擇器h1在font-size屬性中使用的2em是要相對父元素去確定,2em也就是2倍的父元素,假設父元素<html>的font-size被設置為默認的100%,也就是16px。所以這里2em也就是2*16=32px
em單位可以被用來聲明字體的大小。實際上,最佳做法是使用相對單位,如用em指定font-size
這里h1選擇器的真正大小是多少呢?
我們要根據(jù)<h1>的父元素來計算font-size。它的父元素是<html>,并且它的font-size被設置為16px,通過這種方式,我們可以計算出h1的值為32px,或者說2 * 16px
當EM單位設置在html元素上的時候,html元素的默認字體大小值將被轉換為EM值乘以瀏覽器字體大小的設置
例如:如果網站的 html 元素的字體大小屬性設置為 1.25em,根元素字體大小將為 1.25 倍的瀏覽器的字體大小,即如果瀏覽器字體大小被設置為 16px,根字體大小會出來為 20px,即 1.25 x 16 = 20
總結
以上是生活随笔 為你收集整理的CSS之EM属性 的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯,歡迎將生活随笔 推薦給好友。