CSS 小結筆記之em

時間 2019-12-08

標籤 css 小結筆記欄目 CSS 简体版

原文原文鏈接

一、爲何使用em

em也是css中的一種單位，和px相似。不少人會疑惑爲何有了px以後還要使用em，並且em使用起來相對於px來說比較麻煩。css

em主要是應用於彈性佈局，下面給出一個小栗子說明em的強大之處html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .top {
            height: 80px;
            background-color: black;
        }
        
        .main {
            width: 960px;
            background-color: #ccc;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .left {
            width: 30%;
            height: 100%;
            background-color: aqua;
            border: 1px solid red;
            float: left;
            font-size: 16px;
            line-height: 18px;
        }
        
        .right {
            width: 60%;
            height: 100%;
            font-size: 1em;
            line-height: 1.125em;
            background-color: deeppink;
            border: 1px solid red;
            float: right;
        }
    </style>
</head>

<body>
    <div class="top"></div>
    <div class="main">
        <div class="left">
            <ul>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
                <li>em測試用例，沒有em的狀況</li>
            </ul>
        </div>
        <div class="right">
            <ul>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
                <li>em測試用例有em的強大之處</li>
            </ul>
        </div>
    </div>
</body>

</html>

View Code

這裏模仿了一個網頁的大體佈局，給出使用em和px的區別。chrome

在正常狀況下，em和px看起來沒什麼區別。以下圖瀏覽器

接下來，按住ctrl鍵並連續按 ‘-’（減號）鍵，對頁面不斷進行縮小。縮小到25%時會出現很明顯的差異（這裏使用的是chrome瀏覽器，其餘瀏覽器若是沒有這種情況，能夠在瀏覽器中手動去改動字體大小，在增大字體的狀況下能夠看出相似的狀況發生）具體以下圖ide

　能夠看到使用px的左邊已經徹底崩潰了，看不出來具體的文字了。而右邊使用em的仍然能夠清楚的看到文字。形成這種現象的主要緣由是em是相對大小，使用em時對頁面進放大或縮小不會形成太大的影響。佈局

　既然是相對大小，那麼就會有參考大小，em的參考大小是當前元素的字體大小。這時又會引起一個問題，既然是當前元素的字體大小做爲參考，那麼當前字體以em爲單位時又是以什麼做爲參考呢？這時是以其父級元素的字體大小做爲參考。測試

　所以當整個頁面都是使用em做爲字體大小的狀況下，頁面中的1em就是瀏覽器默認的字體大小爲16px;字體

二、em的具體使用：

　一、設置body{font-size：1em}

　　在設置好body的字體大小的狀況下，因爲body字體是繼承瀏覽器默認是16px，那麼這時只要網頁上全是用em，那麼1em=16px；ui

　二、開始計算元素具體須要的大小

　　（1）若是元素的字體大小是繼承於上層即16px，那麼在元素內部1em=16px；所以計算方法以下spa

　　　　　　須要的em值=當前元素的px值/父元素的字體大小值px（通常是16px）

　　　　　　例如：1px=1/16=0.0625em，18px=18/16=1.125em

　　（2）若是元素的字體大小是本身設置的

　　　　　　當前元素的字體大小的em值=當前元素字體大小px/父元素字體大小px

　　　　　　當前元素須要的其餘em值=當前元素的px值/元素自身的字體大小px

　　　　　下面經過一個例子進行具體的解釋　

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            font-size: 1em;
        }
        
        .son1 {
            font-size: 2em;
            height: 5em;
            width: 5em;
            border: 0.0625em solid red;
            background-color: aqua;
            margin: 0 auto;
        }
        
        .son2 {
            font-size: 32px;
            height: 160px;
            width: 160px;
            border: 2px solid red;
            background-color: aqua;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son1">aaa son1</div>
        <div class="son2">aaa son2</div>
    </div>
</body>

</html>

　　打開瀏覽器中顯示的.son1盒子的盒子模型，以及網頁結果圖具體入下

　　能夠發現.son1 和.son2 如出一轍。

　　.son1 的字體大小爲 2em 對應的px爲 2*16=32px；（反過來能夠驗證公式 當前元素的字體大小的em值（2）=當前元素字體大小px（32）/父元素字體大小px（16））

　　高度寬度爲5em 對應px爲 5*32=160px；（反過來能夠驗證公式當前元素須要的其餘em值（5）=當前元素的px值（160）/元素自身的字體大小px（32））

注意：在ie5/6中還須要添html { font-size：100%} 以保證彈性佈局（可是目前ie5/6基本沒有，並且這條是根據文章《The Incredible Em & Elastic Layouts with CSS 》得知的,本人並無試出來具體問題在哪。。先記下，之後遇到相似狀況使用）

三、rem的使用

　　rem使用方法和em相似，不過rem是相對於根元素的大小（即html的字體大小），而不是自身的大小。2中的栗子中的.son1 的相關帶em的屬性全改成rem 代碼以下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .son1 {
            font-size: 2rem;
            height: 5rem;
            width: 5rem;
            border: 0.0625rem solid red;
            background-color: aqua;
            margin: 0 auto;
        }
        
        .son2 {
            font-size: 32px;
            height: 160px;
            width: 160px;
            border: 2px solid red;
            background-color: aqua;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son1">aaa son1</div>
        <div class="son2">aaa son2</div>
    </div>
</body>

</html>

View Code

結果圖爲：

由於.son1 中的單位全改成rem，參考對象爲html字體的大小即爲16px，因此.son1字體大小爲2*16=32px ，寬度和高度爲5*16=80px，邊框爲1px

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。