简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 布局常用排版方式——浮动，定位
Blogger Information
Blog 16
fans 0
comment 0
visits 13075
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
布局常用排版方式——浮动，定位
小雨丶
Original
1140 people have browsed it
浮动
  1. 仅限于水平方向
  3. 脱离文档流
  5. 不会影响前边布局
  7. *任何元素浮动后，都具备了块级元素的属性

浮动的本质是为了解决图文并排的问题

浮动元素的高度对于包含块不可见
浮动元素可以BFC块，使其不影响后边的布局

定位position
  1. static：静态定位，默认，跟元素文档流一样；
  2. relative：相对定位，相对于在文档流中的原始位置进行偏移；
  3. absolute：绝对定位，相对于其他最近定位元素的位置进行偏移；

模态框定位案例

  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.         .box{
  9.             position:absolute;
  10.             top:0;
  11.             width:100%;
  12.             height:100%;
  13.             background-color:black;
  14.             opacity:.6;
  15.             display:none;
  16.         }
  17.         .content{
  18.             position:absolute;
  19.             left:50%;
  20.             top:50%;
  21.             width:200px;
  22.             height:200px;
  23.             text-align: center;
  24.             line-height:200px;
  25.             background-color:white;
  26.             transform: translate(-50%,-50%);
  27.             z-index: 999;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <button>点击显示模态框</button>
  33.     <div class="box">
  34.         <div class="content">
  35.             这是模态框内容
  36.             点击消失
  37.         </div>
  38.     </div>
  40.     <script>
  41.         let btn = document.querySelector('button');
  42.         let box = document.querySelector('.box');
  43.         btn.onclick = function(){
  44.             box.style.display = 'block';
  45.         }
  46.         box.addEventListener('click',function(){
  47.             box.style.display = 'none';
  48.         })
  49.     </script>
  50. </body>
  51. </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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！