em,rem,vw,vh在实例中的演示 -

首页 > 博客列表 > em,rem,vw,vh在实例中的演示

博主信息

博文 19

粉丝 0

访问量 11622

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

em,rem,vw,vh在实例中的演示

vbokok

原创

386人浏览过

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css常用单位em和rem</title>
</head>
<body>
    <header>页眉</header>
    <main>
        <!-- font-size = 16px -->
        <div>Hello</div>
        <!-- font-size = 20px -->
        <div style="font-size:1.25rem">World</div>
        <!-- font-size = 32px -->
        <div style="font-size:2rem">china</div>
        <div class="box">box</div>
    </main>
    <footer>页脚</footer>
</body>
</html>
<style>
    html {
        width: 100vw;
        height: 100vh;
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body > * {
        outline: 1px solid;
        background-color: aqua;
    }
    header,footer {
        width: 100vw;
        height: 5vh;
    }
    main {
        background-color: aquamarine;
        width: 100vw;
        margin: 1vh 0;
        /* calc（）运算需要在运算符两边要加空格，乘除法不用加 */
        min-height: calc(100vh - 5vh - 5vh - 2vh);
    }
    .box {
        background-color: bisque;
        width: 50vw;
        height: 50vh;
        border: 2px solid red;
        margin: 5px;
        padding: 10px;
    }
</style>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML结构

2023-01-14 12:57:27