rem+vw布局原理和grid布局学习 -

首页 > 博客列表 > rem+vw布局原理和grid布局学习

博主信息

博文 14

粉丝 0

访问量 12203

专题推荐

更多>

1. rem+vw布局原理

简单说明：

vw 相对于视口的宽度。视口被均分为100单位的vw
vh 相对于视口的高度。视口被均分为100单位的vh
calc 是 css3提供的一个在css文件中计算值的函数：用于动态计算长度值。
calc()函数支持 “+”, “-“, “*”, “/“ 运算；
calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小
1rem = 100px

代码演示：

<!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>注册页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        html {
            font-size: calc(100vw / 3.75);
        }
        body {
            position: relative;
            font-size: 0.13rem;
            color: #505050;
            background: #fff;
            height: 100vh;
        }
        @media screen and (max-width: 320px) {
            html {
                font-size: 85px;
            }
        }
        @media screen and (min-width: 640px) {
            html {
                font-size: 170px;
            }
        }
        .container {
            width: 2rem;
            margin: 0 auto;
        }
        h2 {
            text-align: center;
        }
        .form-control {
            width: 2rem;
            height: 0.23rem;
        }
        .form-group,
        .btn {
            margin-top: 0.1rem;
        }
        .form-group>.label {
            display: block;
        }
        .form-group>.form-control {
            border: 1px solid #bfc0c5;
        }
        .form-group>.form-control:hover {
            border: 1px solid #474d5b;
            color: #383e4b;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>注 册</h2>
        <form action="php.html">
            <div class="form-group">
                <label class="label" for="name">用户名：</label>
                <input type="text" class="form-control" id="name" placeholder="请输入用户名" />
            </div>
            <div class="form-group">
                <label class="label" for="password">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码" />
            </div>
            <div class="form-group">
                <label class="label" for="email">Email</label>
                <input type="email" class="form-control" id="email" placeholder="请输入Email" />
            </div>
            <div class="form-group">
                <input class="form-checkbox" id="checkbox" type="checkbox" value="value" />
                <label class="labelb" for="checkbox">勾选登录</label>
            </div>
            <button type="button" class="btn">登录</button>
        </form>
    </div>
</body>
</html>

示例图：

2. 实例演示grid布局中的所有属性

简单说明：

使用 CSS Grid布局首要的第一步，就是通过 display:grid; 来对容器声明一个网格容器，那么这个 div 元素里面对应的子元素就自动成为网格项目
grid-template-columns 属性用于设置网格布局中的列数及宽度
grid-template-rows 属性用于设置网格布局中的行数及高度
grid-gap 用来指定列（或行）的间距
fr 可以自动根据网格容器的宽度来计算列的宽度

代码演示：

<!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>布局(grid版)</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body {
            background-color: rgb(210, 221, 210);
        }
        .grid {
            width: 100vm;
            height: 100vh;
            display: grid;
            gap: 10px 10px;
            grid-template-columns: 1fr 4fr;
            grid-template-rows: 100%;
        }
        .left {
            display: grid;
            grid-template-columns: 1fr;
            grid-row-gap: 10px;
        }
        .left>.lb {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 10px;
        }
        .right {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            grid-template-rows: 30%;
        }
    </style>
</head>
<body>
    <div class="grid">
        <div class="left">
            <div class="lt" style="background-color: #f78783">1</div>
            <div class="lb">
                <div style="background-color: #9983ce">3</div>
                <div style="background-color: #7ec42f">5</div>
            </div>
        </div>
        <div class="right">
            <div style="background-color: #dd34b3">2</div>
            <div style="background-color: #d8ee12">4</div>
        </div>
    </div>
</body>
</html>

示例图：

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

Ement常用语法使用学习记录

2021-12-22 18:32:21