简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >媒体查询，固定定位以及 flex 常用属性实例解析

媒体查询，固定定位以及 flex 常用属性实例解析

小柯
小柯原创
2021年12月30日 19:29:21737浏览

1.媒体查询,移动优先与 PC 优先

1.1 移动优先案例解析
案例代码如下：

  1. <body>
  2.     <!-- 媒体: 屏幕, 打印机  -->
  3.     <!-- 查询: 查询当前的屏幕的宽度变化 -->
  4.     <!-- 布局前提: 宽度受限, 而高度不受限的空间内进行布局 -->
  6.     <button class="btn small">按钮1</button>
  7.     <button class="btn middle">按钮2</button>
  8.     <button class="btn large">按钮3</button>
  9.   </body>

布局样式代码：

  2.   <style>
  3.     html {
  4.       font-size: 10px;
  5.     }
  6.     /* 按钮基本样式 */
  7.     .btn {
  8.       background-color: seagreen;
  9.       color: white;
  10.       border: none;
  11.       outline: none;
  12.     }
  14.     .btn:hover {
  15.       cursor: pointer;
  16.       opacity: 0.8;
  17.       transition: 0.3s;
  18.       padding: 0.4rem 0.8rem;
  19.     }
  21.     /* 小按钮 */
  22.     .btn.small {
  23.       /* 1.2rem = 12px */
  24.       font-size: 1.2rem;
  25.     }
  27.     /* 中按钮 */
  28.     .btn.middle {
  29.       /* 1.6rem = 16px */
  30.       font-size: 1.6rem;
  31.     }
  32.     /* 中按钮 */
  33.     .btn.large {
  34.       /* 1.8rem = 18px */
  35.       font-size: 1.8rem;
  36.     }
  38.     /* 只要动态的修改rem , 就可以实现动态的改变按钮大小 */
  39.     /* 移动优先: 从最小的屏幕开始进行适配 */
  40.     /* < 375px  */
  41.     @media (max-width: 374px) {
  42.       html {
  43.         font-size: 12px;
  44.       }
  45.     }
  47.     /* 375px - 414px */
  48.     @media (min-width: 375px) and (max-width: 413px) {
  49.       html {
  50.         font-size: 14px;
  51.       }
  52.     }
  54.     /* > 414px */
  55.     @media (min-width: 414px) {
  56.       html {
  57.         font-size: 16px;
  58.       }
  59.     }
  60.   </style>

1.2 PC 优先案例解析

案例代码如下：

  1. <body>
  2.     <button class="btn small">按钮1</button>
  3.     <button class="btn middle">按钮2</button>
  4.     <button class="btn large">按钮3</button>
  5.   </body>

布局样式代码：

  2.   <style>
  3.     html {
  4.       font-size: 10px;
  5.     }
  6.     /* 按钮基本样式 */
  7.     .btn {
  8.       background-color: seagreen;
  9.       color: white;
  10.       border: none;
  11.       outline: none;
  12.     }
  14.     .btn:hover {
  15.       cursor: pointer;
  16.       opacity: 0.8;
  17.       transition: 0.3s;
  18.       padding: 0.4rem 0.8rem;
  19.     }
  21.     /* 小按钮 */
  22.     .btn.small {
  23.       /* 1.2rem = 12px */
  24.       font-size: 1.2rem;
  25.     }
  27.     /* 中按钮 */
  28.     .btn.middle {
  29.       /* 1.6rem = 16px */
  30.       font-size: 1.6rem;
  31.     }
  32.     /* 大按钮 */
  33.     .btn.large {
  34.       /* 1.8rem = 18px */
  35.       font-size: 1.8rem;
  36.     }
  38.     /* PC优先: 从最大的屏幕开始进行适配 */
  39.     /* > 1920px */
  40.     @media (min-width: 1920px) {
  41.       html {
  42.         font-size: 16px;
  43.       }
  44.     }
  45.     /* 1025px - 1919px */
  46.     @media (min-width: 1025px) and (max-width: 1919px) {
  47.       html {
  48.         font-size: 14px;
  49.       }
  50.     }
  51.     /* < 1024px  */
  52.     @media (max-width: 1024px) {
  53.       html {
  54.         font-size: 12px;
  55.       }
  56.     }
  58.   </style>

2.定位与定位元素

2.1 静态定位：（position: static）文档流方式，显示顺序与书写顺序一致，完全由浏览器控制，根据元素在 html 文档中的顺序，也是没有定位。

2.2 相对定位：（position: relative）相对定位元素仍然在文档流中,所占空间不释放,只有相对原位置进行了偏移，指在自己原来的位置上进行偏移变化。
相对定位实例演示：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>相对定位:相对于自身原始位置的偏移</title>
  8.   </head>
  9.   <body>
  10.     <div class="box father">
  11.       <div class="box child first"></div>
  12.       <div class="box child second"></div>
  13.     </div>
  14.   </body>
  15. </html>
  16. <style>
  17.   body {
  18.     border: 1px solid #000;
  19.   }
  20.   .box {
  21.     border: 1px solid #000;
  22.   }
  23.   .box.father {
  24.     width: 400px;
  25.     height: 400px;
  26.     background-color: lightcyan;
  27.   }
  28.   .box.child {
  29.     width: 100px;
  30.     height: 100px;
  31.     background-color: yellow;
  32.   }
  33.   .box.child.first {
  34.     background-color: red;
  35.     position: relative;
  36.     top: 30px;
  37.     left: 30px;
  38.   }
  39. </style>

效果图示例：（相对于自己本身的偏移）

2.3 绝对定位：（position: absolute）不再相对于自身, 而是相对于它的包含块，定位元素: position 不能是 static 就可以了，如果绝对定位元素, 一直向上,找不到可定位的父级元素,就相对于 body 或者 html。
绝对定位实例演示：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>定位与定位元素</title>
  8.   </head>
  9.   <body>
  10.     <div class="box father">
  11.       <div class="box child first"></div>
  12.       <div class="box child second"></div>
  13.     </div>
  14.   </body>
  15. </html>
  17. <style>
  18.   body {
  19.     border: 1px solid #000;
  20.   }
  21.   .box {
  22.     border: 1px solid #000;
  23.   }
  24.   .box.father {
  25.     width: 400px;
  26.     height: 400px;
  27.     background-color: lightcyan;
  28.   }
  29.   .box.child {
  30.     width: 100px;
  31.     height: 100px;
  32.     background-color: yellow;
  33.   }
  34.   .box.child.first {
  35.     background-color: red;
  36.     position: relative;
  37.     top: 30px;
  38.     left: 30px;
  39.     position: absolute;
  40.   }
  41.   .box.father {
  42.     /* 设置定位参考父级/包含块,只要不是static 就可以了 */
  43.     position: relative;
  44.   }
  45. </style>

效果图示例：（相对于包含块的偏移）

2.4 固定定位: （position: fixed）是绝对定位的子集, 只不过他的定位包含块是固定的,永远是 body
登录页面实例演示:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>固定定位演示代码</title>
  8.   </head>
  9.   <body>
  10.     <header>
  11.       <h2 class="title">固定定位实例</h2>
  12.       <!-- js点击事件暂未理解的，后续再做案例分析 -->
  13.       <button onclick="document.querySelector('.modal').style.display='block'">登录</button>
  14.     </header>
  16.     <!-- 模态框 -->
  17.     <div class="modal">
  18.       <!-- 1. 半透明的遮罩 -->
  19.       <!-- 点击遮罩,关闭表单 -->
  20.       <div class="modal-bg" onclick="this.parentNode.style.display='none'"></div>
  21.       <!-- 2. 弹层表单 -->
  22.       <form action="" class="modal-form">
  23.         <fieldset style="display: grid; gap: 1em">
  24.           <legend>用户登录</legend>
  25.           <input type="email" name="email" placeholder="guding@php.cn" />
  26.           <input type="password" name="password" placeholder="不少于6位" />
  27.           <button>登录</button>
  28.         </fieldset>
  29.       </form>
  30.     </div>
  32.     <style>
  33.       /* 初始化 */
  34.       * {
  35.         margin: 0;
  36.         padding: 0;
  37.         box-sizing: border-box;
  38.       }
  39.       /* 头部样式采用flex容器布局开始 */
  40.       header {
  41.         background-color: lightseagreen;
  42.         padding: 0.5em 1em;
  43.         display: flex;
  44.       }
  45.       /* 标题logo */
  46.       header .title {
  47.         font-weight: lighter;
  48.         font-style: italic;
  49.         color: white;
  50.         text-shadow: 1px 1px 1px #555;
  51.         letter-spacing: 1px;
  52.       }
  53.       /* 登录按钮 */
  54.       header button {
  55.         margin-left: auto;
  56.         width: 5em;
  57.         border: none;
  58.         border-radius: 0.5em;
  59.       }
  60.       header button:hover {
  61.         cursor: pointer;
  62.         background-color: coral;
  63.         color: white;
  64.         box-shadow: 0 0 5px #fff;
  65.         transition: 0.3s;
  66.       }
  68.       /* 模态框表单 */
  69.       .modal .modal-form fieldset {
  70.         background-color: lightcyan;
  71.         border: none;
  72.         padding: 2em;
  73.         box-shadow: 0 0 5px #888;
  74.       }
  75.       /* 模态框表单标题 */
  76.       .modal .modal-form fieldset legend {
  77.         padding: 5px 1em;
  78.         background-color: rebeccapurple;
  79.         color: white;
  80.       }
  81.       .modal .modal-form {
  82.         /* 固定定位 */
  83.         position: fixed;
  84.         /* 顶部要留出头部导航的位置，top：距离顶部的多少 */
  85.         top: 10em;
  86.         /* 左右相等,将表单挤到正中间，固定在中部 */
  87.         left: 20em;
  88.         right: 20em;
  89.       }
  90.       /* 半透明的遮罩 */
  91.       .modal .modal-bg {
  92.         /* 固定布局,定位空间在整个屏幕 */
  93.         position: fixed;
  94.         /* 屏幕视口的四个顶点的坐标，全部为0时候是覆盖整个页面 */
  95.         top: 0;
  96.         left: 0;
  97.         right: 0;
  98.         bottom: 0;
  99.         /* 背景半透明，前三个数据为rgb的参数，第四个参数为透明度 */
  100.         background-color: rgb(0, 0, 0, 0.5);
  101.       }
  102.       /* 初始化时将模态框弹层隐藏 */
  103.       .modal {
  104.         display: none;
  105.       }
  106.     </style>
  107.   </body>
  108. </html>

效果图示例：（相对于 body/html 的偏移）

3.flex 常用属性

3.1 flex-flow 的常用属性值

常用参数 参数的值 代码 说明
flex-flow row wrap flex-flow: row wrap 左对齐允许换行
flex-flow row-reverse wrap flex-flow: row-reverse wrap 右对齐允许换行
flex-flow row nowrap flex-flow: row nowrap 左对齐不允许换行
flex-flow row-reverse nowrap flex-flow: row-reverse nowrap 右对齐不允许换行

项目属性实例 1：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>flex项目属性实例1</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item">item1</div>
  12.       <div class="item">item2</div>
  13.       <div class="item">item3</div>
  14.     </div>
  15.     <style>
  16.       * {
  17.         padding: 0;
  18.         margin: 0;
  19.         box-sizing: border-box;
  20.       }
  21.       html {
  22.         font-size: 10px;
  23.       }
  24.       .container {
  25.         display: flex;
  26.         height: 20em;
  27.         border: 1px solid;
  28.       }
  29.       .container > .item {
  30.         width: 10em;
  31.         padding: 1em;
  32.         background-color: red;
  33.         border: 1px solid;
  34.       }
  35.       .container {
  36.         /* 左对齐允许换行 */
  37.         flex-flow: row wrap;
  38.         /* 右对齐允许换行 */
  39.         flex-flow: row-reverse wrap;
  40.         /* 左对齐不允许换行 */
  41.         flex-flow: row nowrap;
  42.         /* 右对齐，不允许换行 */
  43.         flex-flow: row-reverse nowrap;
  44.       }
  45.     </style>
  46.   </body>
  47. </html>

效果图 1：左对齐允许换行


效果图 2：右对齐允许换行

效果图 3：左对齐不允许换行

效果图 4：右对齐不允许换行

3.2 place-content 的常用属性值(项目在容器主轴上剩余空间的分配)

常用参数 参数的值 代码 说明
place-content start place-content: start 项目左对齐分配
place-content center place-content: center 项目居中分配
place-content end place-content: end 项目右对齐分配
place-content space-between place-content: space-between 项目两端分配
place-content space-around place-content: space-around 项目分散分配
place-content space-evenly place-content: space-evenly 项目平均分配

项目属性实例：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>flex项目属性实例2</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item">item1</div>
  12.       <div class="item">item2</div>
  13.       <div class="item">item3</div>
  14.     </div>
  15.     <style>
  16.       * {
  17.         padding: 0;
  18.         margin: 0;
  19.         box-sizing: border-box;
  20.       }
  21.       html {
  22.         font-size: 10px;
  23.       }
  24.       .container {
  25.         display: flex;
  26.         height: 20em;
  27.         border: 1px solid;
  28.       }
  29.       .container > .item {
  30.         width: 10em;
  31.         padding: 1em;
  32.         background-color: red;
  33.         border: 1px solid;
  34.       }
  35.       .container {
  36.         /* 项目左对齐分配，允许收缩 */
  37.         place-content: start;
  38.         /* 项目居中分配，允许收缩 */
  39.         place-content: center;
  40.         /* 项目右对齐分配，允许收缩 */
  41.         place-content: end;
  42.         /* 项目两端分配，允许收缩 */
  43.         place-content: space-between;
  44.         /* 项目分散分配，首尾两段间隔与中间不一样，允许收缩 */
  45.         place-content: space-around;
  46.         /* 项目平均分配，首尾两段间隔与中间都一样，允许收缩 */
  47.         place-content: space-evenly;
  48.       }
  49.     </style>
  50.   </body>
  51. </html>

效果图 1:项目左对齐分配

效果图 2:项目居中对齐分配，允许收缩

效果图 3:项目右对齐分配（和flow的右对齐顺序不同）

效果图 4:项目两端分配，允许收缩

效果图 5:项目分散对齐

效果图 6:项目平均分配

3.3 place-items 的常用属性值(项目在交叉轴上的对齐，因交叉轴无剩余空间概念，所以无法再分配)

常用参数 参数的值 代码 说明
place-items start place-items: start 向上排列
place-items center place-items: center 居中排列
place-items end place-items: end 向下排列
place-items stretch place-items: stretch 拉伸占满

交叉轴属性实例演示：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>flex项目属性实例</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item">item1</div>
  12.       <div class="item">item2</div>
  13.       <div class="item">item3</div>
  14.     </div>
  15.     <style>
  16.       * {
  17.         padding: 0;
  18.         margin: 0;
  19.         box-sizing: border-box;
  20.       }
  21.       html {
  22.         font-size: 10px;
  23.       }
  24.       .container {
  25.         display: flex;
  26.         height: 20em;
  27.         border: 1px solid;
  28.       }
  29.       .container > .item {
  30.         width: 10em;
  31.         padding: 1em;
  32.         background-color: red;
  33.         border: 1px solid;
  34.       }
  35.       .container {
  36.         /* 向上对齐 */
  37.         place-items: start;
  38.         /* 居中对齐 */
  39.         place-items: center;
  40.         /* 向下对齐 */
  41.         place-items: end;
  42.         /* 拉伸占满 */
  43.         place-items: stretch;
  44.       }
  45.     </style>
  46.   </body>
  47. </html>

交叉轴的实例图
效果图 1:项目向上排列

效果图 2:项目居中排列

效果图 3:项目向下排列

效果图 4:项目拉伸占满

3.4 flex 的三个值解析（是否放大，是否缩小，计算宽度）
其中 flex 计算宽度的权重大小为 max-width > 计算宽度 > width

代码 简化 说明
flex: 0 1 auto flex: initial 默认值，禁止放大允许缩小
flex: 1 1 auto flex: auto 允许放大缩小，完全响应式
flex: 0 0 auto flex: none 用于 PC 端完全失去响应式
flex:1 flex-grow:1 允许放大缩小，完全响应式
flex: 1 300px; 无 允许缩小，可以放大到 300px，然后固定。

3.5 flex 内的 order 值
每个项目的默认顺序是 0,order 的值越大，越靠后。

上一条：媒体查询，大屏适配，定位及flex布局下一条：JS中变量与作用域
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多