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

媒体查询、定位、Flex布局

程序员文章站 2022-06-01 20:22:27
...

一、媒体查询(大屏优先)

    

  1.     <style>
    2. 

  2.         @media only screen and (min-width:1200px){
    3. 

  3.             html{
    4. 

  4.                 font-size: 16px;
    5. 

  5.             }
    6. 

  6.         }
    7. 

    8. 

  8.         @media only screen and (min-width:970px) and (max-width:1190px){
    9. 

  9.             html {
    10. 

  10.                 font-size: 14px;
    11. 

  11.             }
    12. 

  12.         }
    13. 

    14. 

  14.         @media only screen and (min-width:750px) and (max-width:969px){
    15. 

  15.             html{
    16. 

  16.                 font-size: 12px;
    17. 

  17.             }
    18. 

  18.         }
    19. 

    20. 

  20.         @media only screen and (max-width:749px){
    21. 

  21.             html{
    22. 

  22.                 font-size: 10px;
    23. 

  23.             }
    24. 

  24.         }
    25. 

  25.     </style>
    26.

二、定位

父元素设置position:relative,子元素设置position:absolute
媒体查询、定位、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>Document</title>
    8. 

  8.     <style>
    9. 

  9.         body{
    10. 

  10.             position: relative;
    11. 

  11.         }
    12. 

  12.         .model{
    13. 

  13.             position: fixed;
    14. 

  14.             top: 20em;
    15. 

  15.             left: 10em;
    16. 

  16.             right: 10em;
    17. 

  17.             padding: 1.5em 0;
    18. 

  18.             background-color: rgb(198, 250, 174);
    19. 

  19.             text-align: center;
    20. 

  20.         }
    21. 

  21.         .model-bg {
    22. 

  22.             position: fixed;
    23. 

  23.             left: 0;
    24. 

  24.             top: 0;
    25. 

  25.             right: 0;
    26. 

  26.             bottom: 0;
    27. 

  27.             background-color: rgba(0,0,0,0.6);
    28. 

  28.         }
    29. 

  29.     </style>
    30. 

  30. </head>
    31. 

  31. <body>
    32. 

  32.     <div class="model-bg"></div>
    33. 

  33.     <div class="model">
    34. 

  34.         <form action="">
    35. 

  35.             <div class="login">
    36. 

  36.                 <h2>用户登录</h2>
    37. 

  37.                 <p><input type="text" name="username" placeholder="请输入用户名"></p>
    38. 

  38.                 <p><input type="text" name="pwd" placeholder="请输入密码"></p>
    39. 

  39.                 <button>登录</button>
    40. 

  40.             </div>
    41. 

  41.         </form>
    42. 

    43. 

  43.     </div>
    44. 

    45. 

  45. </body>
    46. 

  46. </html>
    47.

三、Flex布局 常用属性

要实现Flex布局，需有容器和项目，容器包含项目

容器设置：display:flex

容器常用属性有3个：

  1. flex-flow:row/column wrap/nowrap
    第一个参数row/column指定行 / 列排列，默认为row
    第二个参数wrap/nowrap 指定当项目过多时是否自动换行，默认nowrap不换行

  2. 剩余空间分配及排列
    place-content:start/end/center/space-between/space-around/space-evenly 默认为start

  • space-between两端对齐
  • space-around分散对齐
  • space-evenly平均对齐
  1. 项目在交叉轴上的排列
    place-items:stretch/start/end/center 默认为stretch拉伸

    项目属性

  • 1 flex:1 1 auto
    第一个参数：放大因子
    第二个参数：缩小因子
    第三个参数：计算宽度
    优先级：max-width > 计算宽度 > width
  • 2 order 排序
    值越小越靠前
    媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、Flex布局

媒体查询、定位、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>Flex布局</title>
    8. 

  8.     <style>
    9. 

  9.         *{
    10. 

  10.             margin: 0;
    11. 

  11.             padding: 0;
    12. 

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

  13.         }
    14. 

  14.         .container {
    15. 

  15.             display: flex;
    16. 

  16.             height: 20em;
    17. 

  17.             flex-flow: row nowrap;
    18. 

  18.             /* place-content: start;
    19. 

  19.             place-content: center;
    20. 

  20.             place-content: end;
    21. 

  21.             place-content: space-between;
    22. 

  22.             place-content: space-around;
    23. 

  23.             place-content: space-evenly; */
    24. 

  24.             background-color: yellow;
    25. 

  25.             /* place-items: start;
    26. 

  26.             place-items: center;
    27. 

  27.             place-items: end; */
    28. 

  28.         }
    29. 

  29.         .item {
    30. 

  30.             background-color: lightgreen;
    31. 

  31.             border: 1px solid #f60;
    32. 

  32.             width: 5em;
    33. 

  33.             height: 10em;
    34. 

  34.             padding: 0.5em;
    35. 

  35.             flex:0 0 auto;
    36. 

  36.         }
    37. 

  37.         .item:first-of-type{
    38. 

  38.             background-color: #f60;
    39. 

  39.             order: 1;
    40. 

  40.         }
    41. 

  41.     </style>
    42. 

  42. </head>
    43. 

  43. <body>
    44. 

  44.     <div class="container">
    45. 

  45.         <div class="item">item 1</div>
    46. 

  46.         <div class="item">item 2</div>
    47. 

  47.         <div class="item">item 3</div>
    48. 

  48.         <div class="item">item 4</div>
    49. 

  49.         <div class="item">item 5</div>
    50. 

  50.         <div class="item">item 6</div>
    51. 

  51.         <div class="item">item 7</div>
    52. 

  52.     </div>
    53. 

  53. </body>
    54. 

  54. </html>
    55.

上一篇： 用table做课程表、用表单做注册界面

下一篇： 分享面试官常用16个c/c++面试题

推荐阅读