Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 媒体查询、定位与Flex布局
Blogger Information
Blog 11
fans 0
comment 0
visits 6953
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
媒体查询、定位与Flex布局
**
Original
679 people have browsed it

媒体查询

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

  1. <body>
  2.     <button class="btn small">按钮1</button>
  3.     <button class="btn middle">按钮2</button>
  4.     <button class="btn large">按钮3</button>
  5.     <style>
  6.       /* 按钮样式 */
  7.       .btn {
  8.         background-color: seagreen;
  9.         color: white;
  10.         border: none;
  11.         outline: none;
  12.       }
  13.       .btn.small {
  14.         font-size: 1.2rem;
  15.       }
  16.       .btn.middle {
  17.         font-size: 1.6rem;
  18.       }
  19.       .btn.large {
  20.         font-size: 1.8rem;
  21.       }
  22.       /* PC优先：从最大的屏幕开始进行适配 */
  23.       @media only screen and (min-width: 414px) {
  24.         html {
  25.           font-size: 100px;
  26.         }
  27.       }
  28.       /* 375px - 413px */
  29.       @media only screen and (min-width: 375px) and (max-width: 413px) {
  30.         html {
  31.           font-size: 50px;
  32.         }
  33.       }
  34.       /*  小于374px */
  35.       @media only screen and (max-width: 374px) {
  36.         html {
  37.           font-size: 30px;
  38.         }
  39.       }
  40.     </style>
  41.   </body>

固定定位

相对定位：

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

  1. <body>
  2.     <div class="box parent">
  3.       <div class="box child first">Child 1</div>
  4.       <div class="box child">Child 2</div>
  5.     </div>
  6.     <style>
  7.       body {
  8.         border: 1px solid #000;
  9.       }
  10.       .box {
  11.         border: 1px solid #000;
  12.       }
  13.       .parent {
  14.         width: 300px;
  15.         height: 400px;
  16.         background-color: lightcyan;
  17.       }
  18.       .box.child {
  19.         width: 150px;
  20.         height: 150px;
  21.         background-color: yellow;
  22.       }
  23.       .box.child.first {
  24.         background-color: lightgreen;
  25.         position: relative;
  26.         top: 30px;
  27.         left: 30px;
  28.       }
  29.     </style>
  30.   </body>

绝对定位

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

  1.  .box.child.first {
  2.      background-color: lightgreen;
  3.      position: absolute;
  4.      top: 30px;
  5.      left: 30px;
  6.  }

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

  1. .box.parent {
  2.     position: relative;
  3. }

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

  1. <body>
  2.       <header>
  3.         <h2 class="title">某某的博客</h2>
  4.         <button
  5.           onclick="document.querySelector('.modal').style.display='block'"
  6.         >
  7.           登录
  8.         </button>
  9.       </header>
  10.       <!-- 模态框 -->
  11.       <div class="modal">
  12.         <!-- 1. 点击遮罩,关闭表单 -->
  13.         <div
  14.           class="modal-bg"
  15.           onclick="this.parentNode.style.display='none'"
  16.         ></div>
  17.         <!-- 2. 弹层表单 -->
  18.         <form action="" class="modal-form">
  19.           <fieldset style="display: grid; gap: 1em">
  20.             <legend>用户登录</legend>
  21.             <input type="email" name="email" placeholder="user@email.com" />
  22.             <input type="password" name="password" placeholder="不少于6位" />
  23.             <button>登录</button>
  24.           </fieldset>
  25.         </form>
  26.       </div>
  27.       <style>
  28.         * {
  29.           padding: 0;
  30.           margin: 0;
  31.           box-sizing: border-box;
  32.         }
  33.         /* 顶部样式 */
  34.         header {
  35.           background-color: seagreen;
  36.           display: flex;
  37.           padding: 0.5em 1em;
  38.         }
  39.         header .title {
  40.           font-weight: lighter;
  41.           font-style: italic;
  42.           color: white;
  43.           text-shadow: 1px 1px 1px #444;
  44.           letter-spacing: 1px;
  45.         }
  46.         header button {
  47.           margin-left: auto;
  48.           width: 5em;
  49.           border: none;
  50.           border-radius: 0.5em;
  51.         }
  52.         header button:hover {
  53.           cursor: pointer;
  54.           background-color: coral;
  55.           color: white;
  56.           box-shadow: 0 0 0.5em #fff;
  57.           transition: 0.3s;
  58.         }
  59.         /* 模态框样式 */
  60.         .modal .modal-form fieldset legend {
  61.           padding: 5px 1em;
  62.           background-color: rebeccapurple;
  63.           color: white;
  64.         }
  65.         /* 表单：固定定位 */
  66.         .modal .modal-form {
  67.           position: fixed;
  68.           top: 10em;
  69.           left: 20em;
  70.           right: 20em;
  71.         }
  72.         /* 遮罩：固定定位 */
  73.         .modal .modal-bg {
  74.           position: fixed;
  75.           top: 0;
  76.           left: 0;
  77.           right: 0;
  78.           bottom: 0;
  79.           background-color: rgba(255, 0, 0, 0.3);
  80.         }
  81.         .modal {
  82.           display: none;
  83.         }
  84.       </style>
  85.   </body>

Flex常用属性

基础页面

  1. <body>
  2.     <div class="container">
  3.       <div class="item">item1</div>
  4.       <div class="item">item2</div>
  5.       <div class="item">item3</div>
  6.     </div>
  7.     <style>
  8.       * {
  9.         padding: 0;
  10.         margin: 0;
  11.         box-sizing: border-box;
  12.       }
  13.       .container {
  14.         /* flex容器 */
  15.         display: flex;
  16.         height: 20em;
  17.         border: 1px solid #000;
  18.       }
  19.       .container > .item {
  20.         width: 10em;
  21.         height: 10em;
  22.         padding: 1em;
  23.         background-color: lightcoral;
  24.         border: 1px solid #000;
  25.       }
  26.       }
  27.     </style>
  28.   </body>
1. 属性1：flex-flow

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

  1. .container {
  2.     /* 主轴横向排布+自动换行 */
  3.     flex-flow: row wrap;
  4. }
2. 属性2：place-content

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

  1.  .container {
  2.     /* 两端对齐 */
  3.     /* place-content: space-between; */
  4.     /* 分散对齐：每个项目2边空间相等 */
  5.     /* place-content: space-around; */
  6.     /* 平均对齐 */
  7.     place-content: space-evenly;
  8. }
3. 属性3：place-items

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

  1. .container {
  2.     /* place-items: stretch; */
  3.     /* place-items: start; */
  4.     /* place-items: end; */
  5.     place-items: center;
  6. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post