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

CSS媒体查询，模态框，Flex常用属性

程序员文章站 2022-04-17 19:03:47
...

媒体查询

响应式布局：媒体查询。
主要是查询设备：屏幕，打印机类。
布局一般是宽度受限，高度不受限；也可以高度和宽度都受限，叫单屏布局；不可用高度和宽度都不受限。
实例说明媒体查询

    

  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.     <!-- 创建3个btn实例,第一个类叫基本样式类，第二个叫修饰类-->
    11. 

  11.     <button class="btn small">按钮1</button>
    12. 

  12.     <button class="btn middle">按钮2</button
    13. 

  13.     ><button class="btn large">按钮3</button>
    14. 

  14.     <!-- 创建样式 -->
    15. 

  15.     <style>
    16. 

  16.       /* 初始化box */
    17. 

  17.       * {
    18. 

  18.         margin: 0;
    19. 

  19.         padding: 0;
    20. 

  20.         box-sizing: border-box;
    21. 

  21.       }
    22. 

  22.       /* 创建html的font-size大小 */
    23. 

  23.       html {
    24. 

  24.         font-size: 10px;
    25. 

  25.       }
    26. 

  26.       /* 创建按钮基本样式 */
    27. 

  27.       .btn {
    28. 

  28.         background-color: seagreen;
    29. 

  29.         color: aliceblue;
    30. 

  30.         border: none;
    31. 

  31.         outline: none;
    32. 

  32.         margin: 3px;
    33. 

  33.       }
    34. 

  34.       /* 创建鼠标悬停效果 */
    35. 

  35.       .btn:hover {
    36. 

  36.         cursor: pointer; /*指针设置为小手*/
    37. 

  37.         background-color: orangered;
    38. 

  38.         opacity: 0.8; /*透明度*/
    39. 

  39.         transition: 0.2s; /*过渡效果*/
    40. 

  40.         padding: 0.4rem 0.8rem; /*设置内边距*/
    41. 

  41.       }
    42. 

  42.       /* 分别设置3个btn的fontsize，用相对单位rem表示,只要动态调整rem大小就可以实现动态调整按钮大小的功能 */
    43. 

  43.       .btn.small {
    44. 

  44.         font-size: 1.2rem;
    45. 

  45.       }
    46. 

  46.       .btn.middle {
    47. 

  47.         font-size: 1.6rem;
    48. 

  48.       }
    49. 

  49.       .btn.large {
    50. 

  50.         font-size: 1.8rem;
    51. 

  51.       }
    52. 

  52.       /* 媒体查询 ，移动优先，从最小屏幕开始匹配，已ipone11为例，iphone11的屏幕大小为375*812px */
    53. 

  53.       /* 查询当屏幕小于375px时 */
    54. 

  54.       /*此处min-width写成了min-width，检查了好久没发现，以后还要细心一些*/
    55. 

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

  56.         html {
    57. 

  57.           font-size: 12px;
    58. 

  58.         }
    59. 

  59.       }
    60. 

  60.       @media (min-width: 375px) and (max-width: 414px) {
    61. 

  61.         html {
    62. 

  62.           font-size: 14px;
    63. 

  63.         }
    64. 

  64.       }
    65. 

  65.       @media (min-width: 415px) {
    66. 

  66.         html {
    67. 

  67.           font-size: 16px;
    68. 

  68.         }
    69. 

  69.       }
    70. 

  70.       /* PC优先，从最大屏幕开始适配 */
    71. 

  71.       @media (min-width: 600px) {
    72. 

  72.         html {
    73. 

  73.           font-size: 20px;
    74. 

  74.         }
    75. 

  75.       }
    76. 

  76.       @media (min-width: 501px) and(max-width:599px) {
    77. 

  77.         html {
    78. 

  78.           font-size: 16px;
    79. 

  79.         }
    80. 

  80.       }
    81. 

  81.       @media (max-width: 500px) {
    82. 

  82.         html {
    83. 

  83.           font-size: 10px;
    84. 

  84.         }
    85. 

  85.       }
    86. 

  86.     </style>
    87. 

  87.   </body>
    88. 

  88. </html>
    89.

CSS媒体查询，模态框，Flex常用属性
CSS媒体查询，模态框，Flex常用属性

模态框

    

  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.     <header>
    11. 

  11.       <h2 class="title">模态框实例演示</h2>
    12. 

  12.       <button onclick="document.querySelector('.modal').style.display='block'">
    13. 

  13.         登录
    14. 

  14.       </button>
    15. 

  15.     </header>
    16. 

    17. 

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

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

  19.       <!-- 遮罩背景 -->
    20. 

  20.       <div
    21. 

  21.         class="modal_bg"
    22. 

  22.         onclick="this.parentNode.style.display='none'"
    23. 

  23.       ></div>
    24. 

  24.       <!-- 登录表单 -->
    25. 

  25.       <form action="" class="modal_form">
    26. 

  26.         <fieldset style="display: grid; gap: 1em">
    27. 

  27.         <legend>用户登录</legend>
    28. 

  28.         <p>
    29. 

  29.           <input type="email" name="email" placeholder="username@email.com" />
    30. 

  30.         </p>
    31. 

  31.         <p>
    32. 

  32.           <input type="passwd" name="passwd" placeholder="******" />
    33. 

  33.         </p>
    34. 

  34.         <p>
    35. 

  35.           <button onclick="">提交</button>
    36. 

  36.         </p>
    37. 

  37.       </form>
    38. 

  38.     </fieldset>
    39. 

  39.     </div>
    40. 

  40.   </body>
    41. 

  41.   <style>
    42. 

  42.     /* 初始化 */
    43. 

  43.     * {
    44. 

  44.       padding: 0;
    45. 

  45.       margin: 0;
    46. 

  46.       box-sizing: border-box;
    47. 

  47.     }
    48. 

  48.     /* 设置header样式 */
    49. 

  49.     header {
    50. 

  50.       background-color: seagreen;
    51. 

  51.       color: seashell;
    52. 

  52.       display: flex;
    53. 

  53.       padding: 0.2em 1em;
    54. 

  54.     }
    55. 

  55.     /* 设置header标题样式 */
    56. 

  56.     header .title {
    57. 

  57.       font-style: italic;
    58. 

  58.       font-weight: lighter;
    59. 

  59.       color: seashell;
    60. 

  60.       letter-spacing: 2px;
    61. 

  61.       text-shadow: 3px 3px 3px #555; /* 文本阴影 */
    62. 

  62.     }
    63. 

  63.     header button {
    64. 

  64.       margin-left: auto;
    65. 

  65.       border: none;
    66. 

  66.       outline: none;
    67. 

  67.       background-color: white;
    68. 

  68.       width: 5rem;
    69. 

  69.       padding: auto;
    70. 

  70.       border-radius: 0.4rem; /*  设置按钮边角圆滑 */
    71. 

  71.     }
    72. 

  72.     header button:hover {
    73. 

  73.       background-color: tomato;
    74. 

  74.       color: white;
    75. 

  75.       cursor: pointer;
    76. 

  76.       box-shadow: 2px 3px 5px #555;
    77. 

  77.       transition: 0.3s; /* 设置渐变 */
    78. 

  78.     }
    79. 

  79.     /* 打开首页，点击登录前隐藏表单 */
    80. 

  80.     .modal {
    81. 

  81.       display: none;
    82. 

  82.     }
    83. 

  83.     /* 设置模态框表单样式 */
    84. 

  84.     .modal .modal_form fieldset {   
    85. 

  85.       background-color: lightgreen;
    86. 

  86.       border: none;
    87. 

  87.       padding: 2em;
    88. 

  88.       box-shadow: 0 0 5px #555;
    89. 

  89.       width: 20rem;
    90. 

  90.     }
    91. 

  91.    .modal .modal_form fieldset legend {
    92. 

  92.        background-color: lightcyan;
    93. 

  93.       border: none;
    94. 

  94.       padding: 2em;
    95. 

  95.       box-shadow: 0 0 5px #888;
    96. 

  96.       height: 0.5em;
    97. 

  97.       width: 10em;
    98. 

  98.     }
    99. 

  99.     /* 模态框定位 */
    100. 

  100.     .modal .modal_form {
    101. 

  101.       position: fixed;
    102. 

  102.       top: 10em;
    103. 

  103.       left: 20em;
    104. 

  104.       right: 20em;
    105. 

  105.     }
    106. 

  106.     /* 半透明遮罩定位 */
    107. 

  107.     .modal .modal_bg {
    108. 

  108.       position: fixed;
    109. 

  109.       top: 0;
    110. 

  110.       left: 0;
    111. 

  111.       right: 0;
    112. 

  112.       bottom: 0;
    113. 

  113.       background-color: rgba(0, 0, 0, 0.5); /* 四个参数分别是红、绿、蓝、透明度 */
    114. 

  114.     }
    115. 

  115.   </style>
    116. 

  116. </html>
    117.

CSS媒体查询，模态框，Flex常用属性

flex布局常用属性

flex布局常用的三个属性

  1. flex-flow：设置主轴方向row/column,设置是否换行wrap/nowrap
  2. plac-content:设置项目在主轴的排列及空间分配，值有：start，end，center，space-between（两端对齐），space-around（分散对齐），space-evenly（平均对齐）。

  3. plac-item：项目在文档交叉轴的对齐方式，值有：start，end，center，stretch（拉伸对齐）。

      

    1. <!DOCTYPE html>
      2. 

    2. <html lang="zh-CN">
      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>flex布局术语,容器,项目</title>
      8. 

    8. </head>
      9. 

    9. <body>
      10. 

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

    11.    <div class="item">item1</div>
      12. 

    12.    <div class="item">item2</div>
      13. 

    13.    <div class="item">item3</div>
      14. 

    14.  </div>
      15. 

    15.  <style>
      16. 

    16.    * {
      17. 

    17.      margin: 0;
      18. 

    18.      padding: 0;
      19. 

    19.      box-sizing: border-box;
      20. 

    20.    }
      21. 

    21.    .container {
      22. 

    22.      /* flex容器 */
      23. 

    23.      display: flex;
      24. 

    24.      height: 20em;
      25. 

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

    26.    }
      27. 

    27.    .container > .item {
      28. 

    28.      /* flex容器中的"子元素" 则成为" 弹性项目/flex项目"  */
      29. 

    29.      width: 10em;
      30. 

    30.      /* height: 10em; */
      31. 

    31.      padding: 1em;
      32. 

    32.      background-color: lightcyan;
      33. 

    33.      border: 1px solid #000;
      34. 

    34.    }
      35. 

      36. 

    36.    .container {
      37. 

    37.      /* 用在容器中的属性 */
      38. 

    38.      /* flex-direction: row; */
      39. 

    39.      /* flex-direction: column; */
      40. 

    40.      /* flex-wrap: wrap; */
      41. 

    41.      /* 1. 主轴方向,是否换行? */
      42. 

    42.      flex-flow: row nowrap;
      43. 

    43.      flex-flow:
      44. 

    44.      /* flex-flow: row wrap; */
      45. 

      46. 

    46.      /* 2. place-content: 容器中的剩余空间在项目之间进行分配 */
      47. 

    47.      place-content: start;
      48. 

    48.      place-content: end;
      49. 

    49.      place-content: center;
      50. 

    50.      /* 二端对齐 */
      51. 

    51.      place-content: space-between;
      52. 

    52.      /* 分散对齐 */
      53. 

    53.      place-content: space-around;
      54. 

    54.      /* 平均对齐 */
      55. 

    55.      place-content: space-evenly;
      56. 

      57. 

    57.      /* 3. 项目在交叉轴上的对齐 */
      58. 

    58.      place-items: stretch;
      59. 

    59.      place-items: start;
      60. 

    60.      place-items: end;
      61. 

    61.      place-items: center;
      62. 

      63. 

    63.      /* flex容器上只需要记住三个属性就可以了 */
      64. 

    64.      /* 1. flex-flow: 主轴方向, 换行  */
      65. 

    65.      /* 2. place-content: 项目在主轴上的排列与空间分配 */
      66. 

    66.      /* 2. place-items: 项目在交叉轴上的对齐方式 */
      67. 

    67.    }
      68. 

    68.  </style>
      69. 

    69. </body>
      70. 

    70. </html>
      71.

上一篇： 前端html基础知识之图片/链接/列表和表单

下一篇： 学习了事件的冒泡与事件的委托代理以及表单提交验证js线程运行机制还有字符的拼接截取替换html插入以及数组常用的api，例如转类数组增删遍历归并删除替换等

推荐阅读