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

CSS 响应式布局及定位的使用方法学习

程序员文章站 2022-05-29 12:48:35
...

1.响应式布局

@media响应式界面能够适应不同的设备

媒体功能 说明
min-width 定义输出设备中的页面最小可见区域宽度
max-width 定义输出设备中的页面最大可见区域宽度 
    

  1. <!DOCTYPE html>
    2. 

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

    4. 

  4. <head>
    5. 

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

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

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

  8.     <title>响应式布局: 媒体查询</title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <ui>
    13. 

  13.         <li class="box box_first">盒子1</li>
    14. 

  14.         <li class="box box_second">盒子2</li>
    15. 

  15.         <li class="box box_three">盒子3</li>
    16. 

  16.     </ui>
    17. 

  17. </body>
    18. 

  18. <style>
    19. 

  19. html {
    20. 

  20.         font-size: 10px;
    21. 

  21.     }
    22. 

    23. 

  23.     .box {
    24. 

  24.         background-color: #ffc70e;
    25. 

  25.         color: rgb(255, 255, 255);
    26. 

  26.         border: none;
    27. 

  27.         outline: none;
    28. 

  28.         margin-bottom: 1rem;
    29. 

  29.     }
    30. 

    31. 

  31.     .box:hover {
    32. 

  32.         cursor: pointer;
    33. 

  33.         opacity: 0.8;
    34. 

  34.         transition: 0.3s;
    35. 

  35.         padding: 0.4rem 0.8rem;
    36. 

  36.     }
    37. 

    38. 

  38.     .box.box_first {
    39. 

  39.         font-size: 1.5rem;
    40. 

  40.         width: 10rem;
    41. 

  41.     }
    42. 

    43. 

  43.     .box.box_second {
    44. 

  44.         font-size: 1.5rem;
    45. 

  45.         width: 12rem;
    46. 

  46.     }
    47. 

    48. 

  48.     .box.box_three {
    49. 

  49.         font-size: 1.5rem;
    50. 

  50.         width: 14rem;
    51. 

  51.     }
    52. 

  52.     /* 移动优先: 从最小的屏幕开始进行适配 */
    53. 

  53.     /* < 346px  */
    54. 

    55. 

  55.     @media (max-width: 346px) {
    56. 

  56.         html {
    57. 

  57.             font-size: 12px;
    58. 

  58.         }
    59. 

  59.     }
    60. 

  60.     /* 347px - 462px */
    61. 

    62. 

  62.     @media (min-width: 347px) and (max-width: 462px) {
    63. 

  63.         html {
    64. 

  64.             font-size: 14px;
    65. 

  65.         }
    66. 

  66.     }
    67. 

  67.     /* 463px - 959px */
    68. 

    69. 

  69.     @media (min-width: 463px) and (max-width: 959px) {
    70. 

  70.         html {
    71. 

  71.             font-size: 16px;
    72. 

  72.         }
    73. 

  73.     }
    74. 

  74.     /* >960px  */
    75. 

    76. 

  76.     @media (min-width: 960px) {
    77. 

  77.         html {
    78. 

  78.             font-size: 20px;
    79. 

  79.         }
    80. 

  80.     }
    81. 

  81. }
    82. 

  82. </style>
    83. 

    84. 

  84. </html>
    85.

演示效果：

CSS 响应式布局及定位的使用方法学习

2.固定定位案例

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法类型；
属性值 说明 描述
position: static 静态定位 默认值。没有定位，元素出现在正常的流中
position: absolute, 绝对定位 元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
position: fixed, 固定定位 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动
position: relative, 相对定位 元素仍然在文档流中,所占空间不释放,只有相对原位置进行了偏移
代码演示：
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

    4. 

  4. <head>
    5. 

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

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

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

  8.     <title>固定登录框</title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <header>
    13. 

  13.         <h2 class="title">固定登录框</h2>
    14. 

  14.         <button onclick="document.querySelector('.modal').style.display='block'">登录</button>
    15. 

  15.     </header>
    16. 

    17. 

  17.     <!-- 模态框 -->
    18. 

  18.     <div class="modal">
    19. 

  19.         <!-- 1. 半透明的遮罩 -->
    20. 

  20.         <!-- 点击遮罩,关闭表单 -->
    21. 

  21.         <div class="modal-bg" onclick="this.parentNode.style.display='none'"></div>
    22. 

  22.         <!-- 2. 弹层表单 -->
    23. 

  23.         <form action="" class="modal-form">
    24. 

  24.             <fieldset style="display: grid; gap: 1em">
    25. 

  25.                 <legend>用户登录</legend>
    26. 

  26.                 <input type="email" name="email" placeholder="user@email.com" />
    27. 

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

  28.                 <button>登录</button>
    29. 

  29.             </fieldset>
    30. 

  30.         </form>
    31. 

  31.     </div>
    32. 

    33. 

  33.     <style>
    34. 

  34.         /* 初始化 */
    35. 

    36. 

  36.         * {
    37. 

  37.             margin: 0;
    38. 

  38.             padding: 0;
    39. 

  39.             box-sizing: border-box;
    40. 

  40.         }
    41. 

  41.         /* 头部样式 */
    42. 

    43. 

  43.         header {
    44. 

  44.             background-color: rgb(32, 47, 178);
    45. 

  45.             padding: 0.5em 1em;
    46. 

  46.             display: flex;
    47. 

  47.         }
    48. 

    49. 

  49.         header .title {
    50. 

  50.             font-weight: lighter;
    51. 

  51.             font-style: italic;
    52. 

  52.             color: white;
    53. 

  53.             text-shadow: 1px 1px 1px #555;
    54. 

  54.             letter-spacing: 1px;
    55. 

  55.         }
    56. 

  56.         /* 登录按钮 */
    57. 

    58. 

  58.         header button {
    59. 

  59.             margin-left: auto;
    60. 

  60.             width: 5em;
    61. 

  61.             border: none;
    62. 

  62.             border-radius: 0.5em;
    63. 

  63.         }
    64. 

    65. 

  65.         header button:hover {
    66. 

  66.             cursor: pointer;
    67. 

  67.             background-color: coral;
    68. 

  68.             color: white;
    69. 

  69.             box-shadow: 0 0 5px #fff;
    70. 

  70.             transition: 0.3s;
    71. 

  71.         }
    72. 

  72.         /* 模态框表单 */
    73. 

    74. 

  74.         .modal .modal-form fieldset {
    75. 

  75.             background-color: rgb(91, 181, 241);
    76. 

  76.             border: none;
    77. 

  77.             padding: 2em;
    78. 

  78.             box-shadow: 0 0 5px #888;
    79. 

  79.         }
    80. 

  80.         /* 模态框表单标题 */
    81. 

    82. 

  82.         .modal .modal-form fieldset legend {
    83. 

  83.             padding: 1em 1em;
    84. 

  84.             background-color: rgb(32, 47, 178);
    85. 

  85.             color: white;
    86. 

  86.             border-radius: 5px;
    87. 

  87.         }
    88. 

    89. 

  89.         .modal .modal-form {
    90. 

  90.             /* 固定定位 */
    91. 

  91.             position: fixed;
    92. 

  92.             top: 10em;
    93. 

  93.             left: 20em;
    94. 

  94.             right: 20em;
    95. 

  95.         }
    96. 

  96.         /* 半透明的遮罩 */
    97. 

    98. 

  98.         .modal .modal-bg {
    99. 

  99.             position: fixed;
    100. 

  100.             top: 0;
    101. 

  101.             left: 0;
    102. 

  102.             right: 0;
    103. 

  103.             bottom: 0;
    104. 

  104.             background-color: rgb(0, 0, 0, 0.5);
    105. 

  105.         }
    106. 

    107. 

  107.         .modal {
    108. 

  108.             display: none;
    109. 

  109.         }
    110. 

  110.     </style>
    111. 

  111. </body>
    112. 

    113. 

  113. </html>
    114.

演示效果：

CSS 响应式布局及定位的使用方法学习

3.flex常用属性,实例演示

1.display:flex;（定义了一个flex容器）
2.flex-direction（决定主轴的方向）
属性值 说明
row 默认值，水平从左到右
colunm 垂直从上到下
row-reverse 水平从右到左
column-reverse 垂直从下到上
3.flex-wrap（定义如何换行）
属性值 说明
nowrap 默认值，不换行
wrap 换行
wrap-reverse 换行，且颠倒行顺序，第一行在下方
4.子元素order（默认情况下flex order会按照书写顺训呈现，可以通过order属性改变，数值小的在前面，还可以是负数）
    

  1. <!DOCTYPE html>
    2. 

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

    4. 

  4. <head>
    5. 

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

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

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

  8.     <title>Document</title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <div class="parent">
    13. 

  13.         <span class="item">item1</span>
    14. 

  14.         <pan class="item">item2</pan>
    15. 

  15.         <pan class="item">item3</pan>
    16. 

  16.         <pan class="item">item4</pan>
    17. 

  17.         <pan class="item">item5</pan>
    18. 

  18.     </div>
    19. 

  19. </body>
    20. 

  20. <style>
    21. 

  21.     .parent {
    22. 

  22.         display: flex;
    23. 

  23.         flex-flow: row nowrap;
    24. 

  24.         place-content: center;
    25. 

  25.         height: 12em;
    26. 

  26.     }
    27. 

    28. 

  28.     .item {
    29. 

  29.         width: 3.6em;
    30. 

  30.         background-color: rgb(0, 255, 85);
    31. 

  31.         margin: 10px;
    32. 

  32.         color: rgb(255, 255, 255);
    33. 

  33.         text-align: center;
    34. 

  34.     }
    35. 

    36. 

  36.     .parent :first-of-type {
    37. 

  37.         background-color: rgb(230, 46, 230);
    38. 

  38.         order: -1;
    39. 

  39.     }
    40. 

    41. 

  41.     .parent :last-of-type {
    42. 

  42.         background-color: rgb(83, 20, 255);
    43. 

  43.         order: 3;
    44. 

  44.     }
    45. 

  45. </style>
    46. 

    47. 

  47. </html>
    48.

演示效果：

CSS 响应式布局及定位的使用方法学习

上一篇： JS流程控制和模板字面量及模板函数的学习

下一篇： dom 操作与事件

推荐阅读