Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 模态框与flex,grid思维导图
Blogger Information
Blog 18
fans 0
comment 0
visits 11013
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,grid思维导图
手机用户1631860753
Original
607 people have browsed it

一.模态框

1.定位：

  • 文档流：元素显示顺序与书写顺序一致，又称为静态定位

    静态定位关键字static

  • 静态定位:就是没有定位,完全由浏览器根据元素在html文档中的顺序来控制;

  • display:block;默认为块元素,但是不能设置宽高; 关键字inline-block,可以将块元素转换为内联块,就可以设置宽高了;
  • 一旦某个元素使用了#static的定位属性,那么它就转换为”定位元素”;
  • 转换为”定位元素”,它内部的绝对定位元素就相对于它进行定位;

转换为相对定位关键字:relative

  • 相对定位:相对于它在文档流中的原始位置进行定位偏移,但是它占据的原来空间位置不释放;

绝对定位关键字:absolute

  • 绝对定位:相对于离它最近的”定位元素”进行偏移,如果没有就向上到最初的body/html进行定位偏移;

  • 如果一个元素总是相对于html/包含块进行定位,那么它就是一个固定定位元素;

固定定位关键字:fixed

  • 固定定位:其实是绝对定位的一个特例,它总是相对于一个固定的参照物(根元素)来进行定位;

黏性定位关键字:sticky

  • 黏性定位:黏性定位相当于相对定位+固定定位的二合一

  • position 位置; top 顶部; left 左边; right 右边;

  • overflow 设置滚动条; line-height 设置行高,行与行之间的间隙;
  • border-radius 设置图片的角度
  • box-shadow 设置图片阴影:第一个参数:向左;第二个参数:向右;第三个参数:扩散;第四个参数:设置阴影颜色;
  • z-index 显示层级

2.模态框

模态框效果
  • 代码
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>模态框</title>
    8. </head>
    9. <body>
    10.   <header>
    11.     <h2>微博</h2>
    12.     <button onclick="document.querySelector(`.modal`).style.display=`block`">登录</button>
    13.   </header>
    14.   <div class="modal">
    15.     <div class="modal-zz" onclick="this.parentNode.style.display=`none`"></div>
    16.     <form action="" class="modal-form">
    17.       <fieldset style="display: grid; gap: 1em">
    18.         <legend>用户登录</legend>
    19.         <label for="username"> 账号:</label>
    20.         <input type="username" name="username" placeholder="请输入账号名或者手机号" />
    21.         <label for="password"> 密码:</label>
    22.         <input type="password" name="password" placeholder="不少于6位" />
    23.         <button>登录</button>
    24.         <button>注册</button>
    25.       </fieldset>
    26.     </form>
    27.   </div>
    28.   <style>
    29.     * {
    30.       margin: 0;
    31.       padding: 0;
    32.       box-sizing: border-box;
    33.     }
    34.     body {
    35.       background-color: #eee;
    36.     }
    37.     body button {
    38.       background-color: royalblue;
    39.       color: white;
    40.       border: none;
    41.       outline: none;
    42.     }
    43.     button:hover {
    44.       cursor: pointer;
    45.       opacity: 0.5;
    46.       transition: 0.8s;
    47.     }
    48.     header {
    49.       background-color: lightyellow;
    50.       padding: 0.5em 1em;
    51.       display: flex;
    52.     }
    53.     header button {
    54.       margin-left: auto;
    55.       width: 4em;
    56.     }
    57.     .modal {
    58.       position: relative;
    59.     }
    60.     .modal .modal-form fieldset {
    61.       background-color: lightcyan;
    62.       border: none;
    63.       padding: 2em;
    64.       box-shadow: 0 0 5px #888;
    65.     }
    66.     .modal .modal-form fieldset legend {
    67.       padding: 10px 1.5em;
    68.       background-color: rebeccapurple;
    69.       color: white;
    70.     }
    71.     .modal .modal-form fieldset label {
    72.       color: rgb(82, 79, 79);
    73.     }
    74.     .modal .modal-form {
    75.       position: fixed;
    76.       top: 10em;
    77.       left: 20em;
    78.       right: 20em;
    79.     }
    80.     .modal .modal-zz {
    81.       position: fixed;
    82.       right: 0;
    83.       bottom: 0;
    84.       left: 0;
    85.       top: 0;
    86.       background-color: rgb(0, 0, 0, 0.5);
    87.     }
    88.     .modal {
    89.       display: none;
    90.     }
    91.   </style>
    92. </body>
    93. </html>
  • 输出:

二.思维导图,布局属性

1.flex思维导图

2.grid思维导图

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