媒体查询、定位、Flex布局

程序员文章站 2022-06-02 18:57:20

...

1、媒体查询(实列演示)

媒体：屏幕、打印机等
查询：查询当前屏幕的宽度变化
布局前提：在宽度受限，高度不受限的空间内完成
根据页面宽度显示不同样式


<!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>
    <style>
      .html {
        font-size: 10px;
      }
      /* 按钮基本样式 */
      .btn {
        background-color: #46c1fa;
        color: #faf6f6;
        border: none;
        outline: none;
      }
      .btn:hover {
        /* 鼠标移入样式 */
        cursor: pointer;
        opacity: 0.8;
        transition: 0.3s; /* 延时 */
      }
      .btn.s {
        /* 1.2rem = 12px */
        font-size: 1.2rem;
      }
      .btn.m {
        font-size: 1.6rem;
      }
      .btn.l {
        font-size: 1.8rem;
      }

      /* PC优先，从最大的屏幕开始匹配
        > 414px
        /* only screen 仅支持屏幕，默认值可以省略 
        @media only screen
        @media
        */
      @media (min-width: 414px) {
        html {
          font-size: 12px;
        }
        .btn {
          background-color: #c01ef1;
        }
      }

      @media (min-width: 375px) and (max-width: 413px) {
        html {
          font-size: 14px;
        }
        .btn {
          background-color: #e089fa;
        }
      }

      @media (max-width: 374px) {
        html {
          font-size: 16px;
        }
        .btn {
          background-color: #e2b9ee;
        }
      }
    </style>
  </head>
  <body>
    <!-- 媒体：屏幕、打印机等 -->
    <!-- 查询：查询当前屏幕的宽度变化，
    布局前提：在宽度受限，高度不受限的空间内完成
    根据页面宽度现实不同样式
    -->
    <button class="btn s">按钮一</button>
    <button class="btn m">按钮二</button>
    <button class="btn l">按钮三</button>
  </body>
</html>

width >= 414px效果展示：
媒体查询、定位、Flex布局

375px <= width <= 414px效果展示：
媒体查询、定位、Flex布局

width < 375px效果展示：
媒体查询、定位、Flex布局

2、定位与固定定位实列

STT	定位	说明
1	`position: static;`	静态定位,默认文档流
2	`position: relative;`	相对定位,相对自身在文档流中原来位置
3	`position: absolute;`	绝对定位,相对距离自己最近的`定位元素包含块`
4	`position: fixed;`	固定定位,相对`html根元素`定位

固定定位实列(模态框)


<!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>
    <style>
        *{
            /* 初始化样式 */
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .container{
            margin: auto;
            width: 380px;
            height: 228px;
            background-color: #F5DEB3;

            /* 固定定位 */
            position: fixed;
            /* 顶部要留出头部导航的位置 */
            top: 10em;
            /* 左右相等,将表单挤到正中间 */
            left: 20em;
            right: 20em;
        }
        .container > h2{
            margin-top: 10px;
            margin-left: 10px;
        }
        .form-login{
            display: flex;
            flex-direction: column;

        }
        .form-login-input{
            display: flex;
            height: 28px; 
            margin-top: 10px;
            margin-left: 10px;
        }
        .form-login > button{
            background-color: #60e0f7;
            margin: 18px auto;
            width: 120px;
            height: 38px;
        }
        .motal{
            /* 固定布局,定位空间在整个屏幕 */
            position: fixed;
            /* 屏幕视口的四个顶点的坐标 */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* 背景半透明 */
            background-color: #3b393980;
        }

    </style>
</head>
<body>
    <div class="motal"></div>
    <div class="container">
        <h2>用户登录</h2>
        <form action="" class="form-login">
            <div class="form-login-input">
                <label for="">用户名:</label>
                <input type="text" neme="username" placeholder="example@mail.com">
            </div>
            <div class="form-login-input">
                <label for="">密码:</label>
                <input type="password" name="password" placeholder="password">
            </div>
            <div class="form-login-input">
                <label for="">验证码:</label>
                <input type="text" name="captcha">
            </div>

            <button>登录</button>
        </form>
    </div>

</body>
</html>

模态框效果展示：
媒体查询、定位、Flex布局

3、Flex 常用属性(实列演示)

定义弹性容器: display: flex;
创建 flex 行内容器: display: inline-flex;,多个才有效

3.1 `flex-direction`: 设置 flex 容器主轴方向

STT	代码	说明
1	`flex-direction: row;`	设置主轴方向: 水平,左到右,默认
2	`flex-direction: row-reverse;`	设置主轴方向: 水平,右到左
3	`flex-direction: column;`	设置主轴方向: 垂直,上到下,默认
4	`flex-direction: column-reverse;`	设置主轴方向: 垂直,下到上

3.2 `flex-wrap`: 设置 flex 容器主轴方向

STT	代码	说明
1	`flex-wrap: nowrap;`	默认值，不换行，如果当前容器容纳不下，项目会自动收缩
2	`flex-wrap: wrap;`	换行，当前容器容纳不下项目，项目会换行显示，此时创建的容器为多行容器
3	`flex-wrap: wrap-reverse;`	反向换行

3.3 `flex-flow`: 设置 flex 容器主轴方向与项目换行的简写

STT	代码	说明
1	`flex-flow: row nowrap;`	水平不换行，默认值
2	`flex-flow: row wrap;`	水平换行
3	`flex-flow: row wrap-reverse;`	水平反向换行
4	`flex-flow: column nowrap;`	垂直不换行
5	`flex-flow: column wrap;`	垂直换行
6	`flex-flow: column wrap-reverse;`	垂直反向换行

3.4 `justify-content`: 设置 flex 项目在容器主轴方向上的对齐方式

STT	代码	说明
1	`justify-content: flex-start;`	主轴起始线对齐，默认
2	`justify-content: flex-end;`	主轴终止线对齐
3	`justify-content: center;`	居中对齐
4	`justify-content: space-between;`	两端对齐，剩余空间在第 1 个和最后 1 个项目之外的项目间平均分配
5	`justify-content: space-around;`	分散对齐，剩余空间在每个项目两侧平均分配
6	`justify-content: space-evenly;`	平均对齐，剩余空间在每个项目之间平均分配

3.5 `align-content`: 设置 flex 项目在多行容器中交叉轴方向上的对齐方式

STT	代码	说明
1	`align-content: stretch;`	项目拉伸，占据事整个交叉轴
2	`align-content: flex-start;`	所有项目与交叉轴启始线（顶部）对齐
3	`align-content: flex-end;`	所有项目与交叉轴终止线对齐
4	`align-content: center;`	所有项目与交叉轴中间线对齐，居中对齐
5	`align-content: space-between;`	两端对齐，剩余空间在头尾项目之外的项目间平均分配
6	`align-content: space-around;`	分散对齐，剩余空间在每个项目两侧平均分配
7	`align-content: space-evenly;`	平均对齐，剩余空间在每个项目之间平均分配

3.6 `align-items`: 设置 flex 项目在容器交叉轴方向上的对齐方式 |

STT	代码	说明
1	`align-items: flex-start;`	交叉轴起始线对齐，默认
2	`align-items: flex-end;`	交叉轴终止线对齐
3	`align-items: center;`	居中对齐

3.7 `align-self`: 单独设置某个 flex 项目在容器交叉轴方向上的对齐方式 |

STT	代码	说明
1	`align-self: auto;`	继承`align-items`属性值
2	`align-self: flex-start;`	与交叉轴启始线对齐
3	`align-self: flex-end;`	交叉轴终止线对齐
4	`align-self: center;`	交叉轴中间线对齐，居中对齐
5	`align-self: stretch;`	在在交叉抽上拉伸
6	`align-self: baseline;`	与基线对齐（与内容相关，用的很少）

3.8 `flex-grow`: 设置项目放大因子——分配主轴剩余空间

STT	代码	说明
1	`flex-grow: 0;/flex-grow: initial;`	项目不放大保持初始值
2	`flex-grow: 1;`	项目允许放大，剩余空间平均分配给每个项目
3	`flex-grow: n;`	n 为整数，创建 flex 行内容器

每个项目放大因子不同时，先求出所有因子之和，剩余空间/因子和*因子=对应项目的放大数

3.9 `flex-shrink`: 项目收缩因子——主轴空间小于项目空间时，收缩项目空间

STT	代码	说明
1	`flex-shrink: 0;`	项目禁止收缩
2	`flex-shrink: 1;/flex-shrink: initial;;`	项目允许收缩
3	`flex-shrink: n;`	n 为整数，创建 flex 行内容器

超出多少/收缩因子和*收缩因子=每个要收缩的值

3.10 `flex-basis`: 项目计算尺寸——设置项目大小

在分配多余空间前，项目占据的主轴空间
浏览器根据这个属性，计算主轴是否有多余空间
该属性会覆盖项目原始大小(width/height)
该属性会被项目的(min-width/min-height)值覆盖

STT	属性值	说明
1	`flex-basis: auto;`	默认值，项目原来的大小
2	`flex-basis: *px;`	项目像素
3	`flex-basis: %;`	项目百分比

优先级：项目大小 < flex-basis < min-width/min-height

3.11 `flex`: 项目放大、项目收缩、计算尺寸简写

三值语法：flex: flex-grow flex-shrink flex-basis，完整语法

STT	属性值	说明
1	`flex: 0 1 auto;`	默认值，不放大可收缩初始宽度
2	`flex: 1 1 auto;`	项目自动放大或收缩适应容器
3	`flex: 0 0 100px;`	项目按计算大小填充到容器

双值语法：flex: flex-grow flex-basis

STT	属性值	说明
1	`flex: 0 180px;`	禁止放大，按计算大小填充到容器

单值语法：flex: flex-grow flex-basis

STT	属性值	说明
1	`flex: 1;`	flex: 1 1 auto;
2	`flex: 180px;`	flex: 1 1 180px;
3	`flex: initial;`	flex: 0 1 auto;
4	`flex: auto;`	flex: 1 1 auto;
5	`flex: none;`	flex: 0 0 auto;

3.12 `order`: 设置项目顺序

选中项目==>order(n), n 是数字，支持负数；数字越小排序越靠前

实例演示查看地址

Flex 常用属性演示

上一篇： Install Odoo with Docker

下一篇： mysql技巧：提高插入数据(添加记录)的速度_MySQL

媒体查询、定位、Flex布局

1、媒体查询(实列演示)

2、定位与固定定位实列

固定定位实列(模态框)

3、Flex 常用属性(实列演示)

3.1 `flex-direction`: 设置 flex 容器主轴方向

3.2 `flex-wrap`: 设置 flex 容器主轴方向

3.3 `flex-flow`: 设置 flex 容器主轴方向与项目换行的简写

3.4 `justify-content`: 设置 flex 项目在容器主轴方向上的对齐方式

3.5 `align-content`: 设置 flex 项目在多行容器中交叉轴方向上的对齐方式

3.6 `align-items`: 设置 flex 项目在容器交叉轴方向上的对齐方式 |

3.7 `align-self`: 单独设置某个 flex 项目在容器交叉轴方向上的对齐方式 |

3.8 `flex-grow`: 设置项目放大因子——分配主轴剩余空间

3.9 `flex-shrink`: 项目收缩因子——主轴空间小于项目空间时，收缩项目空间

3.10 `flex-basis`: 项目计算尺寸——设置项目大小

3.11 `flex`: 项目放大、项目收缩、计算尺寸简写

3.12 `order`: 设置项目顺序

实例演示查看地址

CSS3中媒体查询结合rem布局适配手机屏幕

移动端开发rem布局之less+媒体查询布局的原理步骤和心得

vue的自适应布局（媒体查询）

@media screen媒体查询实现页面自适应布局

CSS弹性布局FLEX,媒体查询及移动端点击事件的实现

Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象

详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)

CSS3中媒体查询结合rem布局适配手机屏幕

媒体查询、定位、Flex布局

定位登录页面/flex布局

媒体查询、定位、Flex布局

1、媒体查询(实列演示)

2、定位与固定定位实列

固定定位实列(模态框)

3、Flex 常用属性(实列演示)

3.1 flex-direction: 设置 flex 容器主轴方向

3.2 flex-wrap: 设置 flex 容器主轴方向

3.3 flex-flow: 设置 flex 容器主轴方向与项目换行的简写

3.4 justify-content: 设置 flex 项目在容器主轴方向上的对齐方式

3.5 align-content: 设置 flex 项目在多行容器中交叉轴方向上的对齐方式

3.6 align-items: 设置 flex 项目在容器交叉轴方向上的对齐方式 |

3.7 align-self: 单独设置某个 flex 项目在容器交叉轴方向上的对齐方式 |

3.8 flex-grow: 设置项目放大因子——分配主轴剩余空间

3.9 flex-shrink: 项目收缩因子——主轴空间小于项目空间时，收缩项目空间

3.10 flex-basis: 项目计算尺寸——设置项目大小

3.11 flex: 项目放大、项目收缩、计算尺寸简写

3.12 order: 设置项目顺序

实例演示查看地址

CSS3中媒体查询结合rem布局适配手机屏幕

移动端开发rem布局之less+媒体查询布局的原理步骤和心得

vue的自适应布局（媒体查询）

@media screen媒体查询实现页面自适应布局

CSS弹性布局FLEX,媒体查询及移动端点击事件的实现

Bootstrap 滚动监听+小工具+Flex（弹性）布局+多媒体对象

详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)

CSS3中媒体查询结合rem布局适配手机屏幕

媒体查询、定位、Flex布局

定位登录页面/flex布局

3.1 `flex-direction`: 设置 flex 容器主轴方向

3.2 `flex-wrap`: 设置 flex 容器主轴方向

3.3 `flex-flow`: 设置 flex 容器主轴方向与项目换行的简写

3.4 `justify-content`: 设置 flex 项目在容器主轴方向上的对齐方式

3.5 `align-content`: 设置 flex 项目在多行容器中交叉轴方向上的对齐方式

3.6 `align-items`: 设置 flex 项目在容器交叉轴方向上的对齐方式 |

3.7 `align-self`: 单独设置某个 flex 项目在容器交叉轴方向上的对齐方式 |

3.8 `flex-grow`: 设置项目放大因子——分配主轴剩余空间

3.9 `flex-shrink`: 项目收缩因子——主轴空间小于项目空间时，收缩项目空间

3.10 `flex-basis`: 项目计算尺寸——设置项目大小

3.11 `flex`: 项目放大、项目收缩、计算尺寸简写

3.12 `order`: 设置项目顺序