CSS 响应式布局及定位的使用方法学习 -

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

1.响应式布局

@media响应式界面能够适应不同的设备

媒体功能	说明
min-width	定义输出设备中的页面最小可见区域宽度
max-width	定义输出设备中的页面最大可见区域宽度

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <ui>
        <li class="box box_first">盒子1</li>
        <li class="box box_second">盒子2</li>
        <li class="box box_three">盒子3</li>
    </ui>
</body>
<style>
html {
        font-size: 10px;
    }
    .box {
        background-color: #ffc70e;
        color: rgb(255, 255, 255);
        border: none;
        outline: none;
        margin-bottom: 1rem;
    }
    .box:hover {
        cursor: pointer;
        opacity: 0.8;
        transition: 0.3s;
        padding: 0.4rem 0.8rem;
    }
    .box.box_first {
        font-size: 1.5rem;
        width: 10rem;
    }
    .box.box_second {
        font-size: 1.5rem;
        width: 12rem;
    }
    .box.box_three {
        font-size: 1.5rem;
        width: 14rem;
    }
    /* 移动优先: 从最小的屏幕开始进行适配 */
    /* < 346px  */
    @media (max-width: 346px) {
        html {
            font-size: 12px;
        }
    }
    /* 347px - 462px */
    @media (min-width: 347px) and (max-width: 462px) {
        html {
            font-size: 14px;
        }
    }
    /* 463px - 959px */
    @media (min-width: 463px) and (max-width: 959px) {
        html {
            font-size: 16px;
        }
    }
    /* >960px  */
    @media (min-width: 960px) {
        html {
            font-size: 20px;
        }
    }
}
</style>
</html>

演示效果：

2.固定定位案例

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法类型；

属性值	说明	描述
position: static	静态定位	默认值。没有定位，元素出现在正常的流中
position: absolute,	绝对定位	元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
position: fixed,	固定定位	元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动
position: relative,	相对定位	元素仍然在文档流中,所占空间不释放,只有相对原位置进行了偏移

代码演示：

<!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>
</head>
<body>
    <header>
        <h2 class="title">固定登录框</h2>
        <button onclick="document.querySelector('.modal').style.display='block'">登录</button>
    </header>
    <!-- 模态框 -->
    <div class="modal">
        <!-- 1. 半透明的遮罩 -->
        <!-- 点击遮罩,关闭表单 -->
        <div class="modal-bg" onclick="this.parentNode.style.display='none'"></div>
        <!-- 2. 弹层表单 -->
        <form action="" class="modal-form">
            <fieldset style="display: grid; gap: 1em">
                <legend>用户登录</legend>
                <input type="email" name="email" placeholder="user@email.com" />
                <input type="password" name="password" placeholder="不少于6位" />
                <button>登录</button>
            </fieldset>
        </form>
    </div>
    <style>
        /* 初始化 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 头部样式 */
        header {
            background-color: rgb(32, 47, 178);
            padding: 0.5em 1em;
            display: flex;
        }
        header .title {
            font-weight: lighter;
            font-style: italic;
            color: white;
            text-shadow: 1px 1px 1px #555;
            letter-spacing: 1px;
        }
        /* 登录按钮 */
        header button {
            margin-left: auto;
            width: 5em;
            border: none;
            border-radius: 0.5em;
        }
        header button:hover {
            cursor: pointer;
            background-color: coral;
            color: white;
            box-shadow: 0 0 5px #fff;
            transition: 0.3s;
        }
        /* 模态框表单 */
        .modal .modal-form fieldset {
            background-color: rgb(91, 181, 241);
            border: none;
            padding: 2em;
            box-shadow: 0 0 5px #888;
        }
        /* 模态框表单标题 */
        .modal .modal-form fieldset legend {
            padding: 1em 1em;
            background-color: rgb(32, 47, 178);
            color: white;
            border-radius: 5px;
        }
        .modal .modal-form {
            /* 固定定位 */
            position: fixed;
            top: 10em;
            left: 20em;
            right: 20em;
        }
        /* 半透明的遮罩 */
        .modal .modal-bg {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgb(0, 0, 0, 0.5);
        }
        .modal {
            display: none;
        }
    </style>
</body>
</html>

演示效果：

3.flex常用属性,实例演示

1.display:flex;（定义了一个flex容器）

2.flex-direction（决定主轴的方向）

属性值	说明
row	默认值，水平从左到右
colunm	垂直从上到下
row-reverse	水平从右到左
column-reverse	垂直从下到上

3.flex-wrap（定义如何换行）

属性值	说明
nowrap	默认值，不换行
wrap	换行
wrap-reverse	换行，且颠倒行顺序，第一行在下方

4.子元素order（默认情况下flex order会按照书写顺训呈现，可以通过order属性改变，数值小的在前面，还可以是负数）

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <div class="parent">
        <span class="item">item1</span>
        <pan class="item">item2</pan>
        <pan class="item">item3</pan>
        <pan class="item">item4</pan>
        <pan class="item">item5</pan>
    </div>
</body>
<style>
    .parent {
        display: flex;
        flex-flow: row nowrap;
        place-content: center;
        height: 12em;
    }
    .item {
        width: 3.6em;
        background-color: rgb(0, 255, 85);
        margin: 10px;
        color: rgb(255, 255, 255);
        text-align: center;
    }
    .parent :first-of-type {
        background-color: rgb(230, 46, 230);
        order: -1;
    }
    .parent :last-of-type {
        background-color: rgb(83, 20, 255);
        order: 3;
    }
</style>
</html>