简体中文（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 常用属性小结

cool442
cool442原创
2021年12月30日 02:09:02601浏览

媒体查询、固定定位实战、flex 常用属性

一、媒体查询

- 媒体查询, 布局 PC 优先, 从大屏开始适配

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.     <button class="div1">字体大小变化1</button>
  11.     <button class="div2">字体大小变化2</button>
  12.     <button class="div3">字体大小变化3</button>
  13.     <style>
  14.       html {
  15.         /* 设置1rem=10px */
  16.         font-size: 10px;
  17.       }
  18.       div {
  19.         text-align: center;
  20.         padding: 0.5rem;
  21.         background-color: aqua;
  22.         margin: 1rem;
  23.       }
  24.       .div1 {
  25.         width: 9.6rem;
  26.         font-size: 1.2rem;
  27.       }
  28.       .div2 {
  29.         width: 12.8rem;
  30.         font-size: 1.6rem;
  31.       }
  32.       .div3 {
  33.         width: 16rem;
  34.         font-size: 2rem;
  35.       }
  37.       /* PC优先，从最大屏幕开始 */
  38.       /* 动态修改字号rem，可实现动态变化大小 */
  39.       /* 屏幕 > 992 */
  40.       @media (min-width: 992px) {
  41.         html {
  42.           font-size: 20px;
  43.         }
  44.       }
  45.       /* 991 > 屏幕 > 720 */
  46.       @media (max-width: 991px) and (min-width: 720) {
  47.         html {
  48.           font-size: 16px;
  49.         }
  50.       }
  51.       /* 719 > 屏幕 > 540 */
  52.       @media (min-width: 540px) and (max-width: 719px) {
  53.         html {
  54.           font-size: 12px;
  55.         }
  56.       }
  57.       /* 屏幕 < 539 */
  58.       @media (max-width: 539px) {
  59.         html {
  60.           font-size: 10px;
  61.         }
  62.       }
  63.     </style>
  64.   </body>
  65. </html>

二、固定定位做登录页面

1. 复习定位

- 文档流：页面中元素显示的顺序与文件中书写顺序一致。

- 静态定位： position: static; 为默认的定位。

- 相对定位： position: relative;

特点：元素仍然在文档流中，所占的空间仍存在，只是相对原空间发生位置偏移。

- 绝对定位： position: absolute;

特点：
（1）元素不再相对于自身原空间，而是相对于包含该元素的父级块。
（2）充当绝对定位父级块的元素必须是定位元素，即只要设置为不是 static 就可以了。
（3）如果绝对元素找不到父级定位元素，则会一直向上找，找不到就相对于 body 元素。
（4）脱离文档流，即让出所占用的空间给后面的元素。

- 固定定位： position: fixed;

特点：是绝对定位的子集，只不过其包含元素是固定的，永远是 body

2. 实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  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="header">
  11.       <div class="logo">宇宙编程大课堂</div>
  12.       <button class="logo_btn">登录</button>
  13.     </div>
  14.     <div class="zhezhao"></div>
  15.     <form action="" class="lgoin">
  16.       <input type="text" name="" placeholder="输入用户名" />
  17.       <input type="password" name="" placeholder="输入密码" />
  18.       <button class="form_btn">登录</button>
  19.     </form>
  20.     <style>
  21.       * {
  22.         margin: 0;
  23.         padding: 0;
  24.         box-sizing: border-box;
  25.       }
  26.       html {
  27.         font-size: 10px;
  28.       }
  29.       .header {
  30.         display: flex;
  31.         justify-content: space-between;
  32.         padding: 1em 1.2em;
  33.         background-color: lightseagreen;
  34.       }
  35.       .logo {
  36.         height: 1.5em;
  37.         font-size: 2.3em;
  38.         color: white;
  39.         text-shadow: 1px 1px 1px #555;
  40.       }
  42.       .logo_btn {
  43.         display: inline-block;
  44.         padding: 0.1em 1em;
  45.       }
  47.       .zhezhao {
  48.         position: fixed;
  49.         top: 0;
  50.         bottom: 0;
  51.         left: 0;
  52.         right: 0;
  53.         background-color: rgb(0, 0, 0, 0.3);
  54.       }
  55.       form {
  56.         min-width: 25em;
  57.         background-color: white;
  58.         border: 1px solid rgb(62, 62, 66);
  59.         position: fixed;
  60.         top: 20em;
  61.         left: 20em;
  62.         right: 20em;
  63.       }
  64.       input {
  65.         display: block;
  66.         text-align: center;
  67.         width: 15em;
  68.         margin: 1em auto;
  69.       }
  70.       .form_btn {
  71.         display: block;
  72.         margin: 1em auto;
  73.         padding: 0.3rem 3rem;
  74.       }
  75.       .form_btn:hover {
  76.         cursor: pointer;
  77.         background-color: goldenrod;
  78.       }
  79.     </style>
  80.   </body>
  81. </html>

运行效果

三、flex 常用属性

1. 设置 flex 容器

  1. <div class="flex_box">
  2.       <div class="flex_box_son">项目1</div>
  3.       <div class="flex_box_son">项目2</div>
  4.       <div class="flex_box_son">项目3</div>
  5.     </div>
  6.     <style>
  7.       div {
  8.         box-sizing: border-box;
  9.         border: 1px solid #000;
  10.       }
  11.       /* 1. 设置flex容器 */
  12.       /* 默认按主轴排列，从左到右 */
  13.       .flex_box {
  14.         height: 20em;
  15.         display: flex;
  16.       }
  17.       .flex_box_son {
  18.         width: 6em;
  19.         /* height: 5em; */
  20.         padding: 1.5em;
  21.         background-color: turquoise;
  22.       }
  23.       .flex_box_son:first-of-type {
  24.         background-color: yellow;
  25.       }
  26.       .flex_box_son:last-of-type {
  27.         background-color: tomato;
  28.       }

默认效果

2. 在容器中使用的属性

  1.       /* 2. 在容器中使用的属性 */
  2.       /* (1)设置容器主轴方向，满行时是否换行 */
  3.       .flex_box {
  4.         /* 主轴横向，换行 */
  5.         flex-flow: row wrap;
  6.       }

运行效果

  1.       /* (2)在项目之间分配容器剩余空间 */
  2.       .flex_box {
  3.         /* 两端对齐 */
  4.         place-content: space-between;
  5.         /* 分散对齐 */
  6.         place-content: space-around;
  7.         /* 平均对齐 */
  8.         place-content: space-evenly;
  9.       }

效果分别如下


  1.      /* （3）在交叉轴上的对齐 */
  2.       /* 不能设置place-content属性，否则无效 */
  3.       .flex_box {
  4.         place-items: stretch;
  5.         /* 上对齐 */
  6.         place-items: start;
  7.         /* 下对齐 */
  8.         place-items: end;
  9.         /* 中间对齐 */
  10.         place-items: center;
  11.       }

效果分别如下



3. 在项目中设置的属性

  1. /* 3. 在项目中设置的属性 */
  2.       /* (1)flex: 设置放大因子、收缩因子、计算宽度 */
  3.       .flex_box_son {
  4.         flex: 0 1 8em;
  5.       }
  6.       /* (2)排序 */
  7.       .flex_box_son:first-of-type {
  8.         /* 默认为0，比0大排在后，小在前 */
  9.         order: 1;
  10.       }
  11.       .flex_box_son:last-of-type {
  12.         order: -2;
  13.       }

效果

上一条：固定定位做的登录页面案例下一条：媒体查询、定位、Flex布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多