欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-03-03 21:30:37
...

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

一、媒体查询

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

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>媒体查询</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <button class="div1">字体大小变化1</button>
    11. 

  11.     <button class="div2">字体大小变化2</button>
    12. 

  12.     <button class="div3">字体大小变化3</button>
    13. 

  13.     <style>
    14. 

  14.       html {
    15. 

  15.         /* 设置1rem=10px */
    16. 

  16.         font-size: 10px;
    17. 

  17.       }
    18. 

  18.       div {
    19. 

  19.         text-align: center;
    20. 

  20.         padding: 0.5rem;
    21. 

  21.         background-color: aqua;
    22. 

  22.         margin: 1rem;
    23. 

  23.       }
    24. 

  24.       .div1 {
    25. 

  25.         width: 9.6rem;
    26. 

  26.         font-size: 1.2rem;
    27. 

  27.       }
    28. 

  28.       .div2 {
    29. 

  29.         width: 12.8rem;
    30. 

  30.         font-size: 1.6rem;
    31. 

  31.       }
    32. 

  32.       .div3 {
    33. 

  33.         width: 16rem;
    34. 

  34.         font-size: 2rem;
    35. 

  35.       }
    36. 

    37. 

  37.       /* PC优先，从最大屏幕开始 */
    38. 

  38.       /* 动态修改字号rem，可实现动态变化大小 */
    39. 

  39.       /* 屏幕 > 992 */
    40. 

  40.       @media (min-width: 992px) {
    41. 

  41.         html {
    42. 

  42.           font-size: 20px;
    43. 

  43.         }
    44. 

  44.       }
    45. 

  45.       /* 991 > 屏幕 > 720 */
    46. 

  46.       @media (max-width: 991px) and (min-width: 720) {
    47. 

  47.         html {
    48. 

  48.           font-size: 16px;
    49. 

  49.         }
    50. 

  50.       }
    51. 

  51.       /* 719 > 屏幕 > 540 */
    52. 

  52.       @media (min-width: 540px) and (max-width: 719px) {
    53. 

  53.         html {
    54. 

  54.           font-size: 12px;
    55. 

  55.         }
    56. 

  56.       }
    57. 

  57.       /* 屏幕 < 539 */
    58. 

  58.       @media (max-width: 539px) {
    59. 

  59.         html {
    60. 

  60.           font-size: 10px;
    61. 

  61.         }
    62. 

  62.       }
    63. 

  63.     </style>
    64. 

  64.   </body>
    65. 

  65. </html>
    66.

二、固定定位做登录页面

1. 复习定位

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

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

- 相对定位： position: relative;

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

- 绝对定位： position: absolute;

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

- 固定定位： position: fixed;

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

2. 实例

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>固定定位做登录页面</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <div class="header">
    11. 

  11.       <div class="logo">宇宙编程大课堂</div>
    12. 

  12.       <button class="logo_btn">登录</button>
    13. 

  13.     </div>
    14. 

  14.     <div class="zhezhao"></div>
    15. 

  15.     <form action="" class="lgoin">
    16. 

  16.       <input type="text" name="" placeholder="输入用户名" />
    17. 

  17.       <input type="password" name="" placeholder="输入密码" />
    18. 

  18.       <button class="form_btn">登录</button>
    19. 

  19.     </form>
    20. 

  20.     <style>
    21. 

  21.       * {
    22. 

  22.         margin: 0;
    23. 

  23.         padding: 0;
    24. 

  24.         box-sizing: border-box;
    25. 

  25.       }
    26. 

  26.       html {
    27. 

  27.         font-size: 10px;
    28. 

  28.       }
    29. 

  29.       .header {
    30. 

  30.         display: flex;
    31. 

  31.         justify-content: space-between;
    32. 

  32.         padding: 1em 1.2em;
    33. 

  33.         background-color: lightseagreen;
    34. 

  34.       }
    35. 

  35.       .logo {
    36. 

  36.         height: 1.5em;
    37. 

  37.         font-size: 2.3em;
    38. 

  38.         color: white;
    39. 

  39.         text-shadow: 1px 1px 1px #555;
    40. 

  40.       }
    41. 

    42. 

  42.       .logo_btn {
    43. 

  43.         display: inline-block;
    44. 

  44.         padding: 0.1em 1em;
    45. 

  45.       }
    46. 

    47. 

  47.       .zhezhao {
    48. 

  48.         position: fixed;
    49. 

  49.         top: 0;
    50. 

  50.         bottom: 0;
    51. 

  51.         left: 0;
    52. 

  52.         right: 0;
    53. 

  53.         background-color: rgb(0, 0, 0, 0.3);
    54. 

  54.       }
    55. 

  55.       form {
    56. 

  56.         min-width: 25em;
    57. 

  57.         background-color: white;
    58. 

  58.         border: 1px solid rgb(62, 62, 66);
    59. 

  59.         position: fixed;
    60. 

  60.         top: 20em;
    61. 

  61.         left: 20em;
    62. 

  62.         right: 20em;
    63. 

  63.       }
    64. 

  64.       input {
    65. 

  65.         display: block;
    66. 

  66.         text-align: center;
    67. 

  67.         width: 15em;
    68. 

  68.         margin: 1em auto;
    69. 

  69.       }
    70. 

  70.       .form_btn {
    71. 

  71.         display: block;
    72. 

  72.         margin: 1em auto;
    73. 

  73.         padding: 0.3rem 3rem;
    74. 

  74.       }
    75. 

  75.       .form_btn:hover {
    76. 

  76.         cursor: pointer;
    77. 

  77.         background-color: goldenrod;
    78. 

  78.       }
    79. 

  79.     </style>
    80. 

  80.   </body>
    81. 

  81. </html>
    82.

运行效果
媒体查询、固定定位实战、flex 常用属性小结

三、flex 常用属性

1. 设置 flex 容器

    

  1. <div class="flex_box">
    2. 

  2.       <div class="flex_box_son">项目1</div>
    3. 

  3.       <div class="flex_box_son">项目2</div>
    4. 

  4.       <div class="flex_box_son">项目3</div>
    5. 

  5.     </div>
    6. 

  6.     <style>
    7. 

  7.       div {
    8. 

  8.         box-sizing: border-box;
    9. 

  9.         border: 1px solid #000;
    10. 

  10.       }
    11. 

  11.       /* 1. 设置flex容器 */
    12. 

  12.       /* 默认按主轴排列，从左到右 */
    13. 

  13.       .flex_box {
    14. 

  14.         height: 20em;
    15. 

  15.         display: flex;
    16. 

  16.       }
    17. 

  17.       .flex_box_son {
    18. 

  18.         width: 6em;
    19. 

  19.         /* height: 5em; */
    20. 

  20.         padding: 1.5em;
    21. 

  21.         background-color: turquoise;
    22. 

  22.       }
    23. 

  23.       .flex_box_son:first-of-type {
    24. 

  24.         background-color: yellow;
    25. 

  25.       }
    26. 

  26.       .flex_box_son:last-of-type {
    27. 

  27.         background-color: tomato;
    28. 

  28.       }
    29.

默认效果
媒体查询、固定定位实战、flex 常用属性小结

2. 在容器中使用的属性

    

  1.       /* 2. 在容器中使用的属性 */
    2. 

  2.       /* (1)设置容器主轴方向，满行时是否换行 */
    3. 

  3.       .flex_box {
    4. 

  4.         /* 主轴横向，换行 */
    5. 

  5.         flex-flow: row wrap;
    6. 

  6.       }
    7.

运行效果
媒体查询、固定定位实战、flex 常用属性小结

    

  1.       /* (2)在项目之间分配容器剩余空间 */
    2. 

  2.       .flex_box {
    3. 

  3.         /* 两端对齐 */
    4. 

  4.         place-content: space-between;
    5. 

  5.         /* 分散对齐 */
    6. 

  6.         place-content: space-around;
    7. 

  7.         /* 平均对齐 */
    8. 

  8.         place-content: space-evenly;
    9. 

  9.       }
    10.

效果分别如下
媒体查询、固定定位实战、flex 常用属性小结
媒体查询、固定定位实战、flex 常用属性小结
媒体查询、固定定位实战、flex 常用属性小结

    

  1.      /* （3）在交叉轴上的对齐 */
    2. 

  2.       /* 不能设置place-content属性，否则无效 */
    3. 

  3.       .flex_box {
    4. 

  4.         place-items: stretch;
    5. 

  5.         /* 上对齐 */
    6. 

  6.         place-items: start;
    7. 

  7.         /* 下对齐 */
    8. 

  8.         place-items: end;
    9. 

  9.         /* 中间对齐 */
    10. 

  10.         place-items: center;
    11. 

  11.       }
    12.

效果分别如下
媒体查询、固定定位实战、flex 常用属性小结
媒体查询、固定定位实战、flex 常用属性小结
媒体查询、固定定位实战、flex 常用属性小结
媒体查询、固定定位实战、flex 常用属性小结

3. 在项目中设置的属性

    

  1. /* 3. 在项目中设置的属性 */
    2. 

  2.       /* (1)flex: 设置放大因子、收缩因子、计算宽度 */
    3. 

  3.       .flex_box_son {
    4. 

  4.         flex: 0 1 8em;
    5. 

  5.       }
    6. 

  6.       /* (2)排序 */
    7. 

  7.       .flex_box_son:first-of-type {
    8. 

  8.         /* 默认为0，比0大排在后，小在前 */
    9. 

  9.         order: 1;
    10. 

  10.       }
    11. 

  11.       .flex_box_son:last-of-type {
    12. 

  12.         order: -2;
    13. 

  13.       }
    14.

效果
媒体查询、固定定位实战、flex 常用属性小结

上一篇： 流程控制、函数的参数与返回值、对象字面量的简化、模板函数总结

下一篇： 常用 Ement 语法、Html 标签属性和布局标签总结

推荐阅读