Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 定位的类型与应用
Blogger Information
Blog 37
fans 0
comment 0
visits 34787
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
定位的类型与应用
手机用户1607314868
Original
1244 people have browsed it

浮动的本质

浮动本质是为了解决图文并排显示的问题
浮动要解决的两个问题：
1.浮动元素的高度对于它的包含块不可见
2.浮动元素可以BFC块使它不影响到后面的元素布局
左浮动：float:left; 右浮动：float:right;
清除浮动：clear:both;

定位的种类

定位的属性是position
定位类型：静态定位static,相对定位relative,绝对定位absolute,固定定位fixed。

  1. 静态定位，”position:static” 是默认定位
  2. 相对定位：relative 相对于该元素在文档流中的原始位置进行偏移
    不脱离文档流，原来位置留下空白，如果想要盒子偏离自己原本的位置，却保留在文档流中，可以使用relative
  3. 绝对定位：absolute 相对于它的祖先中离它最近的‘定位元素’的位置发生偏移。会脱离文档流
  • 定位元素：只要这个元素中有position：relative 或者 position：absolute就称为定位元素
  • 如果祖先中没有定位元素，就参考根元素html定位
    如果我们想实现一个子元素，在父元素内部水平居中，那么父元素可以设置为relative，子元素设置为absolute
  1. 固定定位：position:fixed 绝对定位的一个特例,参考对象是浏览器。当需要一个元素在固定不变的位置时，就是用固定元素。

模态框案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>模态框</title>
  7.     <style>
  8.       *{
  9.           margin: 0;
  10.           padding: 0;
  11.           box-sizing: border-box;
  12.       }
  13.       header{
  14.           background-color: lightgreen;
  15.           padding: 0.5em 2em;
  16.           overflow: hidden;
  17.       }
  18.       header h2{
  19.           float: left;
  20.       }
  21.       header button{
  22.           float: right;
  23.           width: 10em;
  24.           height: 2.5em;
  25.       }
  26.      .modal .modal-backdrop{
  27.          background-color: rgb(0,0,0,0.5);
  28.          position: fixed;
  29.          top: 0;
  30.          bottom: 0;
  31.          left: 0;
  32.          right: 0;
  33.      }
  34.      .modal .modal-body{
  35.         padding: 1em;
  36.         min-width: 25em;
  37.         border: 1px solid #000;
  38.          background: linear-gradient(to right, lightcyan, #fff);
  39.          position: fixed;
  40.          top:10em;
  41.          left:30em;
  42.          right: 30em;
  43.      }
  44.      .modal form table {
  45.             width: 80%;
  47. }
  49. .modal form table caption {
  50.     font-weight: bold;
  51.     margin-bottom: 1em;
  52. }
  53. .modal form table {
  54.    text-align: center;
  55. }
  56.      .modal-body{
  57.          position: relative;
  58.      }
  59.      .modal-body .close{
  60.          position: absolute;
  61.          width: 4em;
  62.          height: 2em;
  63.          top: 1em;
  64.          right: 1em;
  65.      }
  67.     .modal{
  68.         display: none;
  69.     } 
  70.     </style>
  71. </head>
  72. <body>
  73.     <header>
  74.         <h2>php中文网</h2>
  75.         <button>消息</button>
  76.     </header>
  77.     <div class="modal">
  78.      <div class="modal-backdrop"></div>
  79.      <div class="modal-body">
  80.          <button class="close">关闭</button>
  81.          <form action="">
  82.              <table>
  83.              <caption>消息列表</caption>
  84.              <tr>
  85.                  <th>系统消息</th><th>好友消息</th>
  86.             </tr>
  87.              <tr>
  88.                  <td>xxxxx</td><td>yyyyy</td>
  89.             </tr>
  90.         </table>
  91.          </form>
  92.      </div>
  94.     </div>
  95.     <script>
  96.         const btn = document.querySelector('header button');
  97. const modal = document.querySelector('.modal');
  98. const close = document.querySelector('.close');
  100. btn.addEventListener('click', setModal, false);
  101. close.addEventListener('click', setModal, false);
  103. function setModal(ev) {
  104.     ev.preventDefault();
  105.     let status = window.getComputedStyle(modal, null).getPropertyValue('display');
  106.     modal.style.display = status === 'none' ? 'block' : 'none';
  107. }
  108.     </script>
  109. </body>
  110. </html>
Correcting teacher：天蓬老师天蓬老师

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