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

媒体查询，三种定位方法，flex弹性盒子布局

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

媒体查询

  • 什么是媒体？
    1.屏幕，打印机，等等等等这些外接设备都称为媒体
    2.查询顾名思义可以理解为根据这些设备的一些类型进行相应的元素设置
  • 代码案例
    

  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>Document</title>
    8. 

  8.     <style>
    9. 

  9.       /* 这里是全局设置，padding内边距0，margin外边距0，并且设置盒子的大小只由width宽和height高决定 */
    10. 

  10.       * {
    11. 

  11.         padding: 0;
    12. 

  12.         margin: 0;
    13. 

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

  14.       }
    15. 

  15.       /* 这里设置html根元素字号的大小 */
    16. 

  16.       html {
    17. 

  17.         font-size: 10px;
    18. 

  18.       }
    19. 

  19.       /* 这里我们给class名为btn的button元素添加一些样式 */
    20. 

  20.       button.btn {
    21. 

  21.         /* 背景色:红色 */
    22. 

  22.         background-color: red;
    23. 

  23.         /* 按钮文本颜色:白色 */
    24. 

  24.         color: white;
    25. 

  25.         /* 边框:无 */
    26. 

  26.         border: none;
    27. 

  27.         /* 轮廓线:无 */
    28. 

  28.         outline: none;
    29. 

  29.       }
    30. 

  30.       /* 这里我们给按钮添加些鼠标移动上去后的一些效果 */
    31. 

  31.       .btn:hover {
    32. 

  32.         /* 光标:小手 */
    33. 

  33.         cursor: pointer;
    34. 

  34.         /* 透明度:50% */
    35. 

  35.         opacity: 0.5;
    36. 

  36.         /* 延迟0.3秒 */
    37. 

  37.         transition: 0.3s;
    38. 

  38.         /* 内边框左右0.4rem 上下0.8rem */
    39. 

  39.         padding: 0.4rem 0.8rem;
    40. 

  40.       }
    41. 

  41.       /* 小按钮的字号大小=1.2*html根元素字号的大小 */
    42. 

  42.       .btn.small {
    43. 

  43.         font-size: 1.2rem;
    44. 

  44.       }
    45. 

  45.       /* 中按钮的字号大小=1.6*html根元素字号的大小 */
    46. 

  46.       .btn.middle {
    47. 

  47.         font-size: 1.6rem;
    48. 

  48.       }
    49. 

  49.       /* 大按钮的字号大小=2*html根元素字号的大小 */
    50. 

  50.       .btn.large {
    51. 

  51.         font-size: 2rem;
    52. 

  52.       }
    53. 

  53.       /* 这里是使用媒体查询电脑屏幕的适配，宽度为1025以上的是电脑屏，屏幕大字号就大 */
    54. 

  54.       @media (min-width: 1025px) {
    55. 

  55.         /* 这里是通过改变html根元素的字号来调整按钮的字号大小从而实现在不同的屏幕宽度下按钮的大小不一样 */
    56. 

  56.         html {
    57. 

  57.           /* 调整html根元素字号大小 */
    58. 

  58.           font-size: 12px;
    59. 

  59.         }
    60. 

  60.       }
    61. 

  61.       /* 这里是使用媒体查询平板电脑的适配区间，屏幕宽度小字号就小点 */
    62. 

  62.       @media only screen and (min-width: 800px) and (max-width: 1024px) {
    63. 

  63.         /* 这里是通过改变html根元素的字号来调整按钮的字号大小从而实现在不同的屏幕宽度下按钮的大小不一样 */
    64. 

  64.         html {
    65. 

  65.           /* 调整html根元素字号大小 */
    66. 

  66.           font-size: 10px;
    67. 

  67.         }
    68. 

  68.       }
    69. 

  69.       /* 这里是使用媒体查询手机适配，屏幕宽度小于799时字号就小点 */
    70. 

  70.       @media only screen and (max-width: 799px) {
    71. 

  71.         /* 这里是通过改变html根元素的字号来调整按钮的字号大小从而实现在不同的屏幕宽度下按钮的大小不一样 */
    72. 

  72.         html {
    73. 

  73.           /* 调整html根元素字号大小 */
    74. 

  74.           font-size: 8px;
    75. 

  75.         }
    76. 

  76.       }
    77. 

  77.     </style>
    78. 

  78.   </head>
    79. 

  79.   <body>
    80. 

  80.     <button class="btn small">提交1</button>
    81. 

  81.     <button class="btn middle">提交2</button>
    82. 

  82.     <button class="btn large">提交3</button>
    83. 

  83.   </body>
    84. 

  84. </html>
    85.

元素定位

  • 定位类型

    1.相对定位：position:relative相对自身在文档流中偏移

    2.绝对定位：position:absolute相当于他的包含快偏移，不在文档流中
    3.固定定位：position:fixed绝对定位的一个子集，只不过它的包含块是固定的，永远是body

  • 实例代码演示

    

  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>定位实战</title>
    8. 

  8.     <style>
    9. 

  9.       /* 初始化 */
    10. 

  10.       * {
    11. 

  11.         /* 内边距：0 */
    12. 

  12.         padding: 0;
    13. 

  13.         /* 外边距：0 */
    14. 

  14.         margin: 0;
    15. 

  15.         /* 设置盒子大小只由宽高决定 */
    16. 

  16.         box-sizing: border-box;
    17. 

  17.       }
    18. 

  18.       /* 顶部样式 */
    19. 

  19.       .header {
    20. 

  20.         padding: 0.5em 1em;
    21. 

  21.         background-color: blue;
    22. 

  22.         display: flex;
    23. 

  23.       }
    24. 

  24.       .header > .title {
    25. 

  25.         font-weight: lighter;
    26. 

  26.         font-style: italic;
    27. 

  27.         color: red;
    28. 

  28.         text-shadow: 10px 10px 10px green;
    29. 

  29.       }
    30. 

  30.       .header button {
    31. 

  31.         margin-left: auto;
    32. 

  32.         background-color: hotpink;
    33. 

  33.         width: 5em;
    34. 

  34.         border: none;
    35. 

  35.         border-radius: 0.5em;
    36. 

  36.       }
    37. 

  37.       .header button:hover {
    38. 

  38.         cursor: pointer;
    39. 

  39.         background-color: green;
    40. 

  40.         color: wheat;
    41. 

  41.         box-shadow: 0 0 8px red;
    42. 

  42.         transition: 0.3s;
    43. 

  43.       }
    44. 

  44.       fieldset {
    45. 

  45.         padding: 0.8em 0.5em 1.2em;
    46. 

  46.         border: 1px dashed red;
    47. 

  47.       }
    48. 

  48.       /* 模态框 */
    49. 

  49.       /* 登陆表单 */
    50. 

  50.       .modal > .modal-form > fieldset > legend {
    51. 

  51.         padding: 5px 1em;
    52. 

  52.         background-color: red;
    53. 

  53.         color: wheat;
    54. 

  54.       }
    55. 

  55.       .modal > .modal-form {
    56. 

  56.         position: fixed;
    57. 

  57.         top: 10em;
    58. 

  58.         left: 20em;
    59. 

  59.         right: 20em;
    60. 

  60.       }
    61. 

  61.       /* 半透明罩 */
    62. 

  62.       .modal > .modal-bg {
    63. 

  63.         position: fixed;
    64. 

  64.         top: 0px;
    65. 

  65.         right: 0px;
    66. 

  66.         bottom: 0px;
    67. 

  67.         left: 0px;
    68. 

  68.         background-color: rgba(0, 0, 0, 0.7);
    69. 

  69.       }
    70. 

  70.     </style>
    71. 

  71.   </head>
    72. 

  72.   <body>
    73. 

  73.     <div class="header">
    74. 

  74.       <h3 class="title">小夫的个人博客</h3>
    75. 

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

  76.         login
    77. 

  77.       </button>
    78. 

  78.     </div>
    79. 

  79.     <div class="modal">
    80. 

  80.       <!-- 1.透明罩 -->
    81. 

  81.       <div
    82. 

  82.         class="modal-bg"
    83. 

  83.         onclick="this.parentNode.style.display='none'"
    84. 

  84.       ></div>
    85. 

  85.       <form action="" class="modal-form">
    86. 

  86.         <fieldset>
    87. 

  87.           <legend>user login:</legend>
    88. 

  88.           <label for="username">username:</label>
    89. 

  89.           <input
    90. 

  90.             type="text"
    91. 

  91.             id="username"
    92. 

  92.             name="username"
    93. 

  93.             value=""
    94. 

  94.             placeholder="please input passwprd"
    95. 

  95.           />
    96. 

  96.           <label for="password">password:</label>
    97. 

  97.           <input
    98. 

  98.             type="password"
    99. 

  99.             id="password"
    100. 

  100.             name="password"
    101. 

  101.             value=""
    102. 

  102.             placeholder="please input password"
    103. 

  103.           />
    104. 

  104.           <button>login</button>
    105. 

  105.         </fieldset>
    106. 

  106.       </form>
    107. 

  107.     </div>
    108. 

  108.   </body>
    109. 

  109. </html>
    110.

flex

  • 什么是 flex？
序号 种类 定义
1 弹性容器 拥有 display:flex/display:inline-flex 属性，使用 flex 弹性布局的区块
2 弹性项目 弹性容器中的子元素
3 主轴 弹性项目排列时参考的轴线有水平和垂直两种
4 交叉轴 与主轴垂直的布局参考线

  • 弹性容器的语法

    1.flex 布局术语，容器主轴属性

    

  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.     <style>
    9. 

  9.       * {
    10. 

  10.         padding: 0;
    11. 

  11.         margin: 0;
    12. 

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

  13.       }
    14. 

  14.       /* flex容器 */
    15. 

  15.       .container {
    16. 

  16.         display: flex;
    17. 

  17.         height: 20em;
    18. 

  18.         border: 1px solid red;
    19. 

  19.         /* 控制flex容器内项目：主轴方向：水平 允许换行：否 */
    20. 

  20.         flex-flow: row nowrap;
    21. 

  21.         /* 控制flex容器内项目：主轴方向：水平 允许换行：是 */
    22. 

  22.         flex-flow: row wrap;
    23. 

  23.         /* 控制flex容器内项目：主轴方向：垂直 允许换行：否 */
    24. 

  24.         flex-flow: column nowrap;
    25. 

  25.         /* 控制flex容器内项目：主轴方向：垂直 允许换行：是 */
    26. 

  26.         /* 控制flex容器内项目：主轴方向：水平 允许换行：否 */
    27. 

  27.         flex-flow: column wrap;
    28. 

  28.         /* 这里如果我们设置成了可以换行的话项目的高度就不会等于容器的高度了，而是会由项目自身内的内容撑开 */
    29. 

  29.         flex-flow: row wrap;
    30. 

  30.         /* 起始对齐：把项目放在起始位置，项目剩余空间在右边 */
    31. 

  31.         place-content: start;
    32. 

  32.         /* 结尾对齐：把项目放在结束位置，剩余空间在左边 */
    33. 

  33.         place-content: end;
    34. 

  34.         /* 居中对齐：把项目放在start和end中间剩余空间分配在项目左右 */
    35. 

  35.         place-content: center;
    36. 

  36.         /* 两端对齐：把第一个项目和最后一个项目分别放在起始位置和结束位置，剩余空间围绕着容器里其他项目进行分配 */
    37. 

  37.         place-content: space-between;
    38. 

  38.         /* 分散对齐：把每个项目分散开对齐，每个项目左右的剩余空间相等 */
    39. 

  39.         place-content: space-around;
    40. 

  40.         /* 平均对齐：把项目平均分布在在起始位置和结束位置之间 */
    41. 

  41.         place-content: space-evenly;
    42. 

  42.       }
    43. 

  43.       /* flex下的子元素（项目） */
    44. 

  44.       .container > .item {
    45. 

  45.         width: 10em;
    46. 

  46.         height: 20em;
    47. 

  47.         padding: 1em;
    48. 

  48.         background-color: seagreen;
    49. 

  49.         border: 1px solid blue;
    50. 

  50.       }
    51. 

  51.     </style>
    52. 

  52.   </head>
    53. 

  53.   <body>
    54. 

  54.     <div class="container">
    55. 

  55.       <div class="item">item1</div>
    56. 

  56.       <div class="item">item2</div>
    57. 

  57.       <div class="item">item3</div>
    58. 

  58.       <!-- <div class="item">item4</div> -->
    59. 

  59.     </div>
    60. 

  60.   </body>
    61. 

  61. </html>
    62.

2.flex 容器交叉轴属性

    

  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.     <style>
    9. 

  9.       * {
    10. 

  10.         padding: 0;
    11. 

  11.         margin: 0;
    12. 

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

  13.       }
    14. 

  14.       /* flex容器 */
    15. 

  15.       .container {
    16. 

  16.         display: flex;
    17. 

  17.         height: 20em;
    18. 

  18.         border: 1px solid red;
    19. 

  19.         flex-flow: row wrap;
    20. 

  20.         /* 交叉轴默认值 */
    21. 

  21.         place-items: stretch;
    22. 

  22.         /* 靠近交叉轴起始边 */
    23. 

  23.         place-items: start;
    24. 

  24.         /* 靠近交叉轴末尾边 */
    25. 

  25.         place-items: end;
    26. 

  26.         /* 在交叉轴中间 */
    27. 

  27.         place-items: center;
    28. 

  28.       }
    29. 

  29.       /* flex下的子元素（项目） */
    30. 

  30.       .container > .item {
    31. 

  31.         min-width: 10em;
    32. 

  32.         /* height: 20em; */
    33. 

  33.         padding: 1em;
    34. 

  34.         background-color: seagreen;
    35. 

  35.         border: 1px solid blue;
    36. 

  36.       }
    37. 

  37.     </style>
    38. 

  38.   </head>
    39. 

  39.   <body>
    40. 

  40.     <div class="container">
    41. 

  41.       <div class="item">item1</div>
    42. 

  42.       <div class="item">item2</div>
    43. 

  43.       <div class="item">item3</div>
    44. 

  44.       <!-- <div class="item">item4</div> -->
    45. 

  45.     </div>
    46. 

  46.   </body>
    47. 

  47. </html>
    48.

3.flex 项目属性

    

  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.     <style>
    9. 

  9.       * {
    10. 

  10.         padding: 0;
    11. 

  11.         margin: 0;
    12. 

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

  13.       }
    14. 

  14.       /* flex容器 */
    15. 

  15.       .container {
    16. 

  16.         display: flex;
    17. 

  17.         height: 20em;
    18. 

  18.         border: 1px solid red;
    19. 

  19.       }
    20. 

  20.       /* flex下的子元素（项目） */
    21. 

  21.       .container > .item {
    22. 

  22.         /* min-width: 10em; */
    23. 

  23.         /* height: 20em; */
    24. 

  24.         padding: 1em;
    25. 

  25.         background-color: seagreen;
    26. 

  26.         border: 1px solid blue;
    27. 

  27.         /* flex:1.放大因子 2.收缩因子 3.计算宽度 */
    28. 

  28.         flex: 0 1 10em;
    29. 

  29.       }
    30. 

  30.       .item:nth-of-type(1) {
    31. 

  31.         background-color: yellow;
    32. 

  32.         /* 序号：越小越高前 */
    33. 

  33.         order: 1;
    34. 

  34.       }
    35. 

  35.       .item:nth-of-type(2) {
    36. 

  36.         /* 序号：越小越高前 */
    37. 

  37.         order: 2;
    38. 

  38.       }
    39. 

  39.       .item:nth-of-type(3) {
    40. 

  40.         background-color: blue;
    41. 

  41.         /* 序号：越小越高前 */
    42. 

  42.         order: 3;
    43. 

  43.       }
    44. 

  44.     </style>
    45. 

  45.   </head>
    46. 

  46.   <body>
    47. 

  47.     <div class="container">
    48. 

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

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

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

  51.       <!-- <div class="item">item4</div> -->
    52. 

  52.     </div>
    53. 

  53.   </body>
    54. 

  54. </html>
    55.

上一篇： Docker 部署 Spring Boot

下一篇： Node.js SDK 使用方法及代码示例

推荐阅读