Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > 定位的类型与应用场景和使用条件
Blogger Information
Blog 45
fans 0
comment 0
visits 34871
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
1280 people have browsed it

浮动

浮动初心主要解决图文并排显示问题
float:left right;向左向右浮动
解决父级元素高度塌陷:
1、清除浮动：clear:both；
2、BFC 给父元素添加overflow: hidden;

  1.         * {
  2.             margin: 0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.         }
  6.         .box {
  7.             border: 1px solid #ccc;
  8.             overflow: hidden;
  9.         }
  10.         /* .box::after {
  11.             content: '';
  12.             display: block;
  13.             clear: both;
  14.         } */
  15.         .box img {
  16.             float: left;
  17.             width: 15em;
  18.             border-radius: 0.5em;
  19.             margin: 1em;
  20.         }
  22.         .box .desc {
  23.             overflow: hidden;
  24.         }
  25.     </style>
  26. <body>
  27.     <div class="box">
  28.         <img src="https://img.php.cn/upload/course/000/000/001/5fae4f08a043a576.png" alt="">
  29.         <div class="desc">
  30.             <h2>第十四期_前端开发</h2>
  31.             <p>php中文网第十四期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战； 2、完成网站所有静态页面布局；重点：弹性布局与网格布局；3.JavaScript、jQuery、ES6基础与实战 ；4.Vue.js基础与实战
  32.             </p>
  33.         </div>
  34.     </div>
  35. </body>

效果图

总结：

1、浮动仅限于水平方向
2、浮动元素脱离了文档流，后面的元素会上移填充它原来的空间
3、浮动元素不会影响到它前面的元素布局，只会影响到后面的允素的排列
4、任何元素（包括行内元素）浮动后，都具备了块级元素的特征

BFC：创建独立的布局单元

创建BFC的方式：任何一个元素添加以下任何一个属性后就是一个BFC容器；
1、float:left / right,不能是none；
2、overflow:hidden/auto/scroll,不能是visible;
3、display:inline-block/ table-cell;
4、display:flex / inline-flex;
5、display:grid / inline-grid;
6、position:absolute / fixed

定位的种类

定位属性：position
1、静态定位：static 默认定位
2、相对定位：relative 相对自身的位置

  1.     <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.         }
  7.         .box {
  8.             width: 15em;
  9.             height: 15em;
  10.             border: 1px solid #ccc;
  11.             overflow: hidden;
  12.             margin: 0 auto;
  13.         }
  15.         .box h2 {
  16.             position: relative;
  17.             top: 1em;
  18.             left: 1em;
  19.             background-color: burlywood;
  20.         }
  21.     </style>
  23. <body>
  24.     <div class="box">
  25.         <div class="desc">
  26.             <h2>第十四期_前端开发</h2>
  27.             <p>php中文网第十四期前端开发部分学习目标
  28.             </p>
  29.         </div>
  30.     </div>
  31. </body>

效果图

3、绝对定位：absolute 相对它的祖先中离它最近的定位元素的位置发生偏移，定位元素只能是相对定位或者绝对定位；

  1. .box h2 {
  2.             position: absolute;
  3.             top: 1em;
  4.             left: 1em;
  5.             background-color: burlywood;
  6.         }

效果图

如果祖先中不存在定位元素，则相对于根元素发生偏移
4、固定定位：fixed；是绝对定位中的一个特例，始终相对于根元素定位

模态框小案例

  1.  <style>
  2.         * {
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.         }
  8.         header {
  9.             background-color: #ccc;
  10.             padding: .5em 2em;
  11.         }
  13.         .modal .modal-back {
  14.             position: fixed;
  15.             top: 0;
  16.             bottom: 0;
  17.             left: 0;
  18.             right: 0;
  19.             background-color: rgba(0, 0, 0, .5);
  20.         }
  22.         .modal .modal-body {
  23.             position: fixed;
  24.             top: 10em;
  25.             left: 30em;
  26.             right: 30em;
  27.             padding: 1em;
  28.             width: 20em;
  29.             height: 10em;
  30.             border: 1px solid #000;
  31.             margin: 0 auto;
  32.             background-color: rosybrown;
  33.         }
  35.         .close {
  36.             position: absolute;
  37.             right: 1em;
  38.         }
  40.         .modal-body form {
  41.             margin-top: 2em;
  42.         }
  44.         .modal-body form p {
  45.             text-align: center;
  46.         }
  47.     </style>
  48. <body>
  49.     <header>
  50.         <h2>我的博客</h2>
  51.     </header>
  52.     <div class="modal">
  53.         <div class="modal-back"></div>
  54.         <div class="modal-body">
  55.             <button class="close">关闭</button>
  56.             <form action="">
  57.                 <p><label for="username">账号：</label><input type="text" name="username" id="username"></p>
  58.                 <p><label for="password">密码</label><input type="password" name="password" id="password"></p>
  59.                 <p><button>登录</button></p>
  60.             </form>
  61.         </div>
  62.     </div>
  63. </body>

效果图

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