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

媒体查询、定位与Flex布局

程序员文章站 2022-05-25 07:50:57
...

媒体查询

从大屏开始适配，以下为核心代码：

    

  1. <body>
    2. 

  2.     <button class="btn small">按钮1</button>
    3. 

  3.     <button class="btn middle">按钮2</button>
    4. 

  4.     <button class="btn large">按钮3</button>
    5. 

  5.     <style>
    6. 

  6.       /* 按钮样式 */
    7. 

  7.       .btn {
    8. 

  8.         background-color: seagreen;
    9. 

  9.         color: white;
    10. 

  10.         border: none;
    11. 

  11.         outline: none;
    12. 

  12.       }
    13. 

  13.       .btn.small {
    14. 

  14.         font-size: 1.2rem;
    15. 

  15.       }
    16. 

  16.       .btn.middle {
    17. 

  17.         font-size: 1.6rem;
    18. 

  18.       }
    19. 

  19.       .btn.large {
    20. 

  20.         font-size: 1.8rem;
    21. 

  21.       }
    22. 

  22.       /* PC优先：从最大的屏幕开始进行适配 */
    23. 

  23.       @media only screen and (min-width: 414px) {
    24. 

  24.         html {
    25. 

  25.           font-size: 100px;
    26. 

  26.         }
    27. 

  27.       }
    28. 

  28.       /* 375px - 413px */
    29. 

  29.       @media only screen and (min-width: 375px) and (max-width: 413px) {
    30. 

  30.         html {
    31. 

  31.           font-size: 50px;
    32. 

  32.         }
    33. 

  33.       }
    34. 

  34.       /*  小于374px */
    35. 

  35.       @media only screen and (max-width: 374px) {
    36. 

  36.         html {
    37. 

  37.           font-size: 30px;
    38. 

  38.         }
    39. 

  39.       }
    40. 

  40.     </style>
    41. 

  41.   </body>
    42.

固定定位

相对定位：

相对自己原来的位置进行偏移，元素仍然在文档流中，所占空间不释放

    

  1. <body>
    2. 

  2.     <div class="box parent">
    3. 

  3.       <div class="box child first">Child 1</div>
    4. 

  4.       <div class="box child">Child 2</div>
    5. 

  5.     </div>
    6. 

  6.     <style>
    7. 

  7.       body {
    8. 

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

  9.       }
    10. 

  10.       .box {
    11. 

  11.         border: 1px solid #000;
    12. 

  12.       }
    13. 

  13.       .parent {
    14. 

  14.         width: 300px;
    15. 

  15.         height: 400px;
    16. 

  16.         background-color: lightcyan;
    17. 

  17.       }
    18. 

  18.       .box.child {
    19. 

  19.         width: 150px;
    20. 

  20.         height: 150px;
    21. 

  21.         background-color: yellow;
    22. 

  22.       }
    23. 

  23.       .box.child.first {
    24. 

  24.         background-color: lightgreen;
    25. 

  25.         position: relative;
    26. 

  26.         top: 30px;
    27. 

  27.         left: 30px;
    28. 

  28.       }
    29. 

  29.     </style>
    30. 

  30.   </body>
    31.

绝对定位

不在文档流中，相对于元素的包含块（父级），此包含块必须是“定位元素” ，即包含块的position不能是static，如果此绝对元素一直往上没有找到可定位的父级元素，那就相对于body，核心代码如下：

    

  1.  .box.child.first {
    2. 

  2.      background-color: lightgreen;
    3. 

  3.      position: absolute;
    4. 

  4.      top: 30px;
    5. 

  5.      left: 30px;
    6. 

  6.  }
    7.

也可以将父级设置为该元素的包含块，核心代码如下：

    

  1. .box.parent {
    2. 

  2.     position: relative;
    3. 

  3. }
    4.

固定定位应用—登陆模态框

    

  1. <body>
    2. 

  2.       <header>
    3. 

  3.         <h2 class="title">某某的博客</h2>
    4. 

  4.         <button
    5. 

  5.           onclick="document.querySelector('.modal').style.display='block'"
    6. 

  6.         >
    7. 

  7.           登录
    8. 

  8.         </button>
    9. 

  9.       </header>
    10. 

  10.       <!-- 模态框 -->
    11. 

  11.       <div class="modal">
    12. 

  12.         <!-- 1. 点击遮罩,关闭表单 -->
    13. 

  13.         <div
    14. 

  14.           class="modal-bg"
    15. 

  15.           onclick="this.parentNode.style.display='none'"
    16. 

  16.         ></div>
    17. 

  17.         <!-- 2. 弹层表单 -->
    18. 

  18.         <form action="" class="modal-form">
    19. 

  19.           <fieldset style="display: grid; gap: 1em">
    20. 

  20.             <legend>用户登录</legend>
    21. 

  21.             <input type="email" name="email" placeholder="user@email.com" />
    22. 

  22.             <input type="password" name="password" placeholder="不少于6位" />
    23. 

  23.             <button>登录</button>
    24. 

  24.           </fieldset>
    25. 

  25.         </form>
    26. 

  26.       </div>
    27. 

  27.       <style>
    28. 

  28.         * {
    29. 

  29.           padding: 0;
    30. 

  30.           margin: 0;
    31. 

  31.           box-sizing: border-box;
    32. 

  32.         }
    33. 

  33.         /* 顶部样式 */
    34. 

  34.         header {
    35. 

  35.           background-color: seagreen;
    36. 

  36.           display: flex;
    37. 

  37.           padding: 0.5em 1em;
    38. 

  38.         }
    39. 

  39.         header .title {
    40. 

  40.           font-weight: lighter;
    41. 

  41.           font-style: italic;
    42. 

  42.           color: white;
    43. 

  43.           text-shadow: 1px 1px 1px #444;
    44. 

  44.           letter-spacing: 1px;
    45. 

  45.         }
    46. 

  46.         header button {
    47. 

  47.           margin-left: auto;
    48. 

  48.           width: 5em;
    49. 

  49.           border: none;
    50. 

  50.           border-radius: 0.5em;
    51. 

  51.         }
    52. 

  52.         header button:hover {
    53. 

  53.           cursor: pointer;
    54. 

  54.           background-color: coral;
    55. 

  55.           color: white;
    56. 

  56.           box-shadow: 0 0 0.5em #fff;
    57. 

  57.           transition: 0.3s;
    58. 

  58.         }
    59. 

  59.         /* 模态框样式 */
    60. 

  60.         .modal .modal-form fieldset legend {
    61. 

  61.           padding: 5px 1em;
    62. 

  62.           background-color: rebeccapurple;
    63. 

  63.           color: white;
    64. 

  64.         }
    65. 

  65.         /* 表单：固定定位 */
    66. 

  66.         .modal .modal-form {
    67. 

  67.           position: fixed;
    68. 

  68.           top: 10em;
    69. 

  69.           left: 20em;
    70. 

  70.           right: 20em;
    71. 

  71.         }
    72. 

  72.         /* 遮罩：固定定位 */
    73. 

  73.         .modal .modal-bg {
    74. 

  74.           position: fixed;
    75. 

  75.           top: 0;
    76. 

  76.           left: 0;
    77. 

  77.           right: 0;
    78. 

  78.           bottom: 0;
    79. 

  79.           background-color: rgba(255, 0, 0, 0.3);
    80. 

  80.         }
    81. 

  81.         .modal {
    82. 

  82.           display: none;
    83. 

  83.         }
    84. 

  84.       </style>
    85. 

  85.   </body>
    86.

Flex常用属性

基础页面

    

  1. <body>
    2. 

  2.     <div class="container">
    3. 

  3.       <div class="item">item1</div>
    4. 

  4.       <div class="item">item2</div>
    5. 

  5.       <div class="item">item3</div>
    6. 

  6.     </div>
    7. 

  7.     <style>
    8. 

  8.       * {
    9. 

  9.         padding: 0;
    10. 

  10.         margin: 0;
    11. 

  11.         box-sizing: border-box;
    12. 

  12.       }
    13. 

  13.       .container {
    14. 

  14.         /* flex容器 */
    15. 

  15.         display: flex;
    16. 

  16.         height: 20em;
    17. 

  17.         border: 1px solid #000;
    18. 

  18.       }
    19. 

  19.       .container > .item {
    20. 

  20.         width: 10em;
    21. 

  21.         height: 10em;
    22. 

  22.         padding: 1em;
    23. 

  23.         background-color: lightcoral;
    24. 

  24.         border: 1px solid #000;
    25. 

  25.       }
    26. 

  26.       }
    27. 

  27.     </style>
    28. 

  28.   </body>
    29.
1. 属性1：flex-flow

控制主轴方向项目的分布方式及控制项目是否换行：

    

  1. .container {
    2. 

  2.     /* 主轴横向排布+自动换行 */
    3. 

  3.     flex-flow: row wrap;
    4. 

  4. }
    5.
2. 属性2：place-content

项目在主轴上的排列与空间分配

    

  1.  .container {
    2. 

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

  3.     /* place-content: space-between; */
    4. 

  4.     /* 分散对齐：每个项目2边空间相等 */
    5. 

  5.     /* place-content: space-around; */
    6. 

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

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

  8. }
    9.
3. 属性3：place-items

项目在交叉轴上的对齐方式

    

  1. .container {
    2. 

  2.     /* place-items: stretch; */
    3. 

  3.     /* place-items: start; */
    4. 

  4.     /* place-items: end; */
    5. 

  5.     place-items: center;
    6. 

  6. }
    7.

上一篇： Table及Form表单

下一篇： 详谈HTML表格和表单

推荐阅读