首頁 > web前端 > css教學 > CSS長度單位之em介紹

CSS長度單位之em介紹

青灯夜游
發布: 2018-10-12 17:36:17
轉載
3286 人瀏覽過

本文帶給大家CSS長度單位之em介紹,有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。

一、為什麼使用em

em也是css中的一種單位,和px類似。很多人會懷疑為什麼有了px之後還要用em,而且em使用起來相對於px來講比較麻煩。

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

<!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>
    <p class="top"></p>
    <p class="main">
        <p 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>
        </p>
        <p 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>
        </p>
    </p></body></html>
登入後複製

這裡模仿了一個網頁的大致佈局,給出使用em和px的區別。

在正常情況下,em和px看起來沒什麼差別。如下圖

接下來,按住ctrl鍵並連續按 ‘-’(減號)鍵,對頁面不斷縮小。縮小到25%時會出現很明顯的差異(這裡使用的是chrome瀏覽器,其他瀏覽器如果沒有這種狀況,可以在瀏覽器中手動去改動字體大小,在增大字體的情況下可以看出類似的情況發生)具體如下圖

可以看到使用px的左邊已經完全崩潰了,看不出來具體的文字了。而右邊使用em的仍然可以清楚的看到文字。造成這種現象的主要原因是em是相對大小,使用em時對頁面進放大或縮小不會造成太大的影響。

既然是相對大小,那麼就會有參考大小,em的參考大小是目前元素的字體大小。 這時又會引發一個問題,既然是當前元素的字體大小作為參考,那麼當前字體以em為單位時又是以什麼作為參考呢?這時是以其父級元素的字體大小作為參考。

因此當整個頁面都是使用em作為字體大小的情況下,頁面中的1em就是瀏覽器預設的字體大小為16px;

二、em的具體使用:

1、設定body{font-size:1em} 

在設定好body的字體大小的情況下,由於body字體是繼承瀏覽器預設是16px,那麼這時只要網頁上全是用em,那麼1em=16px;

2、開始計算元素具體需要的大小

#(1)如果元素的字體大小是繼承於上層即16px,那麼在元素內部1em=16px;因此計算方法如下

所需的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>
    <p class="fa">
        <p class="son1">aaa son1</p>
        <p class="son2">aaa son2</p>
    </p>
  </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/元素本身的字體大小px32

注意:在ie5/6還需要添html { font-size:100%} 保證彈性佈局(但目前ie5/6基本上沒有,而且這則是根據文章 The Incredible Em & Elastic Layouts with CSS得知的,本人並沒有試出來具體問題在哪。。先記下,以後遇到類似情況使用)

3、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>
    <p class="fa">
        <p class="son1">aaa son1</p>
        <p class="son2">aaa son2</p>
    </p></body></html>
登入後複製

结果图为:

因为.son1 中的单位全改为rem,参考对象为html字体的大小即为16px,所以.son1字体大小为2*16=32px  ,宽度和高度为5*16=80px,边框为1px

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 CSS基础视频教程

相关推荐:

CSS在线手册

div/css图文教程

以上是CSS長度單位之em介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板