Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 媒体查询、固定定位实战、flex 常用属性小结
Blogger Information
Blog 29
fans 0
comment 0
visits 14933
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
媒体查询、固定定位实战、flex 常用属性小结
cool442
Original
605 people have browsed it

媒体查询、固定定位实战、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.       }

效果

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：这样的演示效果很好
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post