成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

CSS 小結(jié)筆記之em

番茄西紅柿 / 864人閱讀

摘要：很多人會(huì)疑惑為什么有了之后還要使用，而且使用起來(lái)相對(duì)于來(lái)講比較麻煩。如下圖接下來(lái)，按住鍵并連續(xù)按減號(hào)鍵，對(duì)頁(yè)面不斷進(jìn)行縮小。造成這種現(xiàn)象的主要原因是是相對(duì)大小，使用時(shí)對(duì)頁(yè)面進(jìn)放大或縮小不會(huì)造成太大的影響。

1、為什么使用em

em也是css中的一種單位，和px類(lèi)似。很多人會(huì)疑惑為什么有了px之后還要使用em，而且em使用起來(lái)相對(duì)于px來(lái)講比較麻煩。

em主要是應(yīng)用于彈性布局，下面給出一個(gè)小栗子說(shuō)明em的強(qiáng)大之處

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>Documenttitle>
    <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測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
                <li>em測(cè)試用例，沒(méi)有em的情況li>
            ul>
        div>
        <div class="right">
            <ul>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
                <li>em測(cè)試用例有em的強(qiáng)大之處li>
            ul>
        div>
    div>
body>

html>
View Code

這里模仿了一個(gè)網(wǎng)頁(yè)的大致布局，給出使用em和px的區(qū)別。

在正常情況下，em和px看起來(lái)沒(méi)什么區(qū)別。如下圖

接下來(lái)，按住ctrl鍵并連續(xù)按 ‘-’（減號(hào)）鍵，對(duì)頁(yè)面不斷進(jìn)行縮小?？s小到25%時(shí)會(huì)出現(xiàn)很明顯的差別（這里使用的是chrome瀏覽器，其他瀏覽器如果沒(méi)有這種狀況，可以在瀏覽器中手動(dòng)去改動(dòng)字體大小，在增大字體的情況下可以看出類(lèi)似的情況發(fā)生）具體如下圖

　可以看到使用px的左邊已經(jīng)完全崩潰了，看不出來(lái)具體的文字了。而右邊使用em的仍然可以清楚的看到文字。造成這種現(xiàn)象的主要原因是em是相對(duì)大小，使用em時(shí)對(duì)頁(yè)面進(jìn)放大或縮小不會(huì)造成太大的影響。

　既然是相對(duì)大小，那么就會(huì)有參考大小，em的參考大小是當(dāng)前元素的字體大小。這時(shí)又會(huì)引發(fā)一個(gè)問(wèn)題，既然是當(dāng)前元素的字體大小作為參考，那么當(dāng)前字體以em為單位時(shí)又是以什么作為參考呢？這時(shí)是以其父級(jí)元素的字體大小作為參考。

　因此當(dāng)整個(gè)頁(yè)面都是使用em作為字體大小的情況下，頁(yè)面中的1em就是瀏覽器默認(rèn)的字體大小為16px;

2、em的具體使用：

　1、設(shè)置body{font-size：1em} 

　　在設(shè)置好body的字體大小的情況下，由于body字體是繼承瀏覽器默認(rèn)是16px，那么這時(shí)只要網(wǎng)頁(yè)上全是用em，那么1em=16px；

　2、開(kāi)始計(jì)算元素具體需要的大小

　　（1）如果元素的字體大小是繼承于上層即16px，那么在元素內(nèi)部1em=16px；因此計(jì)算方法如下

　　　　　　需要的em值=當(dāng)前元素的px值/父元素的字體大小值px（一般是16px）

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

　　（2）如果元素的字體大小是自己設(shè)置的

　　　　　　當(dāng)前元素的字體大小的em值=當(dāng)前元素字體大小px/父元素字體大小px

　　　　　　當(dāng)前元素需要的其他em值=當(dāng)前元素的px值/元素自身的字體大小px

　　　　　下面通過(guò)一個(gè)例子進(jìn)行具體的解釋　

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>Documenttitle>
    <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 son1div>
        <div class="son2">aaa son2div>
    div>
body>

html>

 

　　打開(kāi)瀏覽器中顯示的.son1盒子的盒子模型，以及網(wǎng)頁(yè)結(jié)果圖具體入下

　　

　　可以發(fā)現(xiàn).son1 和.son2 一模一樣。

　　.son1 的字體大小為 2em 對(duì)應(yīng)的px為 2*16=32px；（反過(guò)來(lái)可以驗(yàn)證公式 當(dāng)前元素的字體大小的em值（2）=當(dāng)前元素字體大小px（32）/父元素字體大小px（16））

　　高度寬度為5em 對(duì)應(yīng)px為 5*32=160px；（反過(guò)來(lái)可以驗(yàn)證公式當(dāng)前元素需要的其他em值（5）=當(dāng)前元素的px值（160）/元素自身的字體大小px（32））

注意：在ie5/6中還需要添html { font-size：100%} 以保證彈性布局（但是目前ie5/6基本沒(méi)有，而且這條是根據(jù)文章 《The Incredible Em & Elastic Layouts with CSS》 得知的,本人并沒(méi)有試出來(lái)具體問(wèn)題在哪。。先記下，以后遇到類(lèi)似情況使用）

 

3、rem的使用

　　rem使用方法和em類(lèi)似，不過(guò)rem是相對(duì)于根元素的大小（即html的字體大?。?，而不是自身的大小。2中的栗子中的.son1 的相關(guān)帶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>Documenttitle>
    <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 son1div>
        <div class="son2">aaa son2div>
    div>
body>

html>
View Code

結(jié)果圖為：

 因?yàn)?son1 中的單位全改為rem，參考對(duì)象為html字體的大小即為16px，所以.son1字體大小為2*16=32px  ，寬度和高度為5*16=80px，邊框?yàn)?strong>1px

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1737.html

相關(guān)文章

  • sass筆記-3|Sass基礎(chǔ)語(yǔ)法之樣式復(fù)用和保持簡(jiǎn)潔

    摘要：區(qū)別在于，類(lèi)是在中運(yùn)用的，混合器是在樣式表中使用的?；居梅ㄟx擇器繼承，用去繼承一個(gè)選擇器定義的所有樣式。繼承背后的基本實(shí)現(xiàn)思路背后最基本的想法是，如果繼承了，那么樣式表中的任何一處選擇器都會(huì)用這一選擇器組進(jìn)行替換和打開(kāi)。 上一篇詳述了Sass如何嵌套、導(dǎo)入和注釋這3個(gè)基本方式來(lái)保持條理性和可讀性，這一篇更進(jìn)一步地闡述sass保持樣式復(fù)用和簡(jiǎn)潔的方式——混合器和選擇器繼承——這兩種方式...

    SmallBoyO 評(píng)論0 收藏0

  • <em>CSSem> 小結(jié)筆記之三種樣式表

    摘要：內(nèi)部樣式表內(nèi)部樣式表一般寫(xiě)在頭部，在標(biāo)簽內(nèi)用標(biāo)簽括起來(lái)。外部樣式表外部樣式表是單獨(dú)將樣式寫(xiě)到一個(gè)文件中，并在頭部引用。使用外部樣式表時(shí)要注意如果出現(xiàn)多重樣式時(shí)樣式覆蓋帶來(lái)的問(wèn)題。CSS 引入共有三種方式：內(nèi)部樣式表，內(nèi)聯(lián)樣式（行內(nèi)樣式）表，外部樣式表，當(dāng)然也可以使用多重樣式 內(nèi)聯(lián)樣式 內(nèi)聯(lián)樣式表 內(nèi)聯(lián)樣式 直接把樣式卸載html代碼行內(nèi)，一般僅僅在此樣式僅僅只在當(dāng)前元素上應(yīng)用時(shí)使用，其他...

    李文鵬 評(píng)論0 收藏0

  • <em>CSSem> 小結(jié)筆記之滑動(dòng)門(mén)技術(shù)

    摘要：所謂的滑動(dòng)門(mén)技術(shù)，就是指盒子背景能夠自動(dòng)拉伸以適應(yīng)不同長(zhǎng)度的文本。大多數(shù)應(yīng)用于導(dǎo)航欄之中，如微信導(dǎo)航欄具體實(shí)現(xiàn)方法如下首先每一塊文本內(nèi)容是由標(biāo)簽與標(biāo)簽組成標(biāo)簽只指定高度，而不指定寬度。所謂的滑動(dòng)門(mén)技術(shù)，就是指盒子背景能夠自動(dòng)拉伸以適應(yīng)不同長(zhǎng)度的文本。即當(dāng)文字增多時(shí)，背景看起來(lái)也會(huì)變長(zhǎng)。 大多數(shù)應(yīng)用于導(dǎo)航欄之中，如微信導(dǎo)航欄: 具體實(shí)現(xiàn)方法如下： 1、首先每一塊文本內(nèi)容是由a標(biāo)簽與span標(biāo)簽...

    lykops 評(píng)論0 收藏0

  • 【學(xué)習(xí)筆記】<em>CSSem>深入理解之line-height

    摘要：內(nèi)聯(lián)盒子的高度由決定，限制包含盒子的高度，兩者一致，即把內(nèi)聯(lián)盒子安放在包含盒子內(nèi)，排除其他外界干擾。這時(shí)候由內(nèi)聯(lián)盒子模型可知，行間距是等分的，中間部分是，達(dá)到看似居中的效果。可以得到結(jié)論和設(shè)置一致，并非是完全垂直，除非為。 張?chǎng)涡竦腃SS深入理解之line-height學(xué)習(xí)筆記 line-height的定義 行高：兩行文字基線之間的距離 為何是基線：基線是定義所有字線的根本 不同字體...

    Stardustsky 評(píng)論0 收藏0

  • <em>CSSem> 小結(jié)筆記之圖標(biāo)字體（IconFont）

    摘要：本篇主要介紹一種非常好用的圖標(biāo)大法圖標(biāo)字體。圖標(biāo)字體可以非常便捷的去解決以上問(wèn)題，使用起來(lái)也非常簡(jiǎn)單。并且改變圖標(biāo)大小只需要改變字體大小就可以了?！　”酒饕榻B一種非常好用的圖標(biāo)大法——圖標(biāo)字體（IconFont）。 　　什么是圖標(biāo)字體？顧名思義，它是一種字體，只不過(guò)這個(gè)字體顯示的并不是具體的文字之類(lèi)的，而是各種圖標(biāo)。 　　網(wǎng)站上經(jīng)常會(huì)用到各種圖標(biāo)，之前網(wǎng)頁(yè)上使用圖...

    番茄西紅柿 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<