国产xxxx色视频在线观看,a亚洲va欧美va国产综合,成人欧美日韩一区二区三区

首頁 > 博客列表 > em、rem的區(qū)別，vh、vw及視口

博主信息

博文 13

粉絲 0

評論 2

訪問量 18341

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

em相對于父元素，rem相對于根元素。

一、em

（一）子元素字體大小的em是相對于父元素字體大小

（二）元素的width/height/padding/margin用em的話是相對于該元素的font-size

代碼：

html：

<div>
    父元素div
    <p>
       子元素p
        <span>孫元素span</span>
    </p>
</div>

css:

div {
        font-size: 40px;
        width: 7.5em; /* 300px */
        height: 7.5em;
        border: solid 2px black;
    }
 p {
        font-size: 0.5em; /* 20px */
        width: 7.5em; /* 150px */
        height: 7.5em;
        border: solid 2px blue ;
        color: blue;
    }
span {
        font-size: 0.5em;
        width: 7.5em;
        height: 7.5em;
        border: solid 2px red;
        display: block;
        color: red;
    }

二、rem

rem是全部的長度都相對于根元素，根元素是<html>元素。通常做法是給html元素設(shè)置一個(gè)字體大小，然后其他元素的長度單位就為rem。

代碼：

html：

<div>
    父元素div
    <p>
       子元素p
        <span>孫元素span</span>
    </p>
</div>

css:

html {
        font-size: 10px;
    }
    div {
        font-size: 4rem; /* 40px */
        width: 20rem;  /* 200px */
        height: 20rem;
        border: solid 2px black;
    }
    p {
        font-size: 2rem; /* 20px */
        width: 10rem;
        height: 10rem;
        border: solid 2px blue;
        color:blue ;
    }
    span {
        font-size: 1.5rem;
        width: 5rem;
        height: 5rem;
        border: solid 2px red;
        display: block;
        color: red;
    }

視口單位(Viewport units)

在PC端，視口指的是在PC端，指的是瀏覽器的可視區(qū)域；

而在移動(dòng)端，它涉及3個(gè)視口：Layout Viewport（布局視口），Visual Viewport（視覺視口），Ideal Viewport（理想視口）。

視口單位中的“視口”，PC端指的是瀏覽器的可視區(qū)域；移動(dòng)端指的就是Viewport中的Layout Viewport。

根據(jù)CSS3規(guī)范，視口單位主要包括以下4個(gè)：

  1.vw：1vw等于視口寬度的1%。
  2.vh：1vh等于視口高度的1%。
  3.vmin：選取vw和vh中最小的那個(gè)。
  4.vmax：選取vw和vh中最大的那個(gè)。

vh and vw：相對于視口的高度和寬度，而不是父元素的（CSS百分比是相對于包含它的最近的父元素的高度和寬度）。1vh 等于1/100的視口高度，1vw 等于1/100的視口寬度。

比如：瀏覽器高度950px，寬度為1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。

vmax相對于視口的寬度或高度中較大的那個(gè)。其中最大的那個(gè)被均分為100單位的vmax。

vmin相對于視口的寬度或高度中較小的那個(gè)。其中最小的那個(gè)被均分為100單位的vmin。

視口變化直接影響元素的變化：

圖一全屏顯示色塊樣式

圖二壓縮視口色塊的變化

代碼：
html：

    <div class="left">left</div>
    <div class="right">right</div>

css：

    * {
        padding: 0;
        margin: 0
    }
    .left {
        float: left;
        width: 50vw;
        height: 20vh;
        background-color: blue;
        text-align: center;
        line-height: 20vh;
        font-size: 3rem
    }
    .right {
        float: right;
        width: 50vw;
        height: 20vh;
        background-color: green;
        text-align: center;
        line-height: 20vh;
        font-size: 3rem
    }

批改老師：

天蓬老師

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

Markdown 語法簡介

2020-12-10 08:35:25

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

em相對于父元素，rem相對于根元素。

一、em

二、rem

視口單位(Viewport units)

視口變化直接影響元素的變化：

em相對于父元素，rem相對于根元素。

一、em

二、rem