Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css布局之浮动与定位的应用
Blogger Information
Blog 29
fans 1
comment 0
visits 35341
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
css布局之浮动与定位的应用
祥子弟弟
Original
943 people have browsed it

一、浮动（float）

浮动属性 float 是指定一个元素沿其所在的容器的左侧或者右侧放置。浮动的出现想解决的问题就是文字和图片的并排显示，不过一旦使用了浮动属性，该元素就会脱离网页正常流动（文档流）。
浮动的缺点：任何一个元素使用浮动属性之后都会脱离文档流，然后在父级元素计算高度的时候，就会忽略内部的浮动元素，造成父级元素高度塌陷。
示例：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>浮动的示例</title>
  6.   </head>
  7.   <body>
  8.     <h1>浮动的本质</h1>
  9.     <div class="box">
  10.       <div class="child">浮动元素</div>
  11.     </div>
  12.   </body>
  13. </html>
  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  7. .box {
  8.   /* padding: 1em; */
  9.   border: 1px solid #000;
  10.   background-color: lightcyan;
  11. }
  12. .child {
  13.   width: 5em;
  14.   height: 5em;
  15.   background-color: lightgreen;
  16.   float: left;
  17. }

显示效果如下：


这样就可以看到，浮动后的元素是脱离了文档流的，直接造成了父级元素 box 的高度塌陷，这样的情况，我们可以有三种方法：

  1. 添加一个附加元素，让它消除浮动影响（不建议使用）

  2. 使用伪元素 “:after” 来消除浮动影响

  3. 使用创建 BFC 容器的方法消除浮动影响

  • 添加附加元素

这个就很简单了，就是在浮动元素同级下添加一个空的 div 元素，用来消除浮动影响。

  1. <body>
  2.   <h1>浮动的本质</h1>
  3.   <div class="box">
  4.     <div class="child">浮动元素</div>
  5.     <div calss="clear"></div>
  6.   </div>
  7. </body>
  1. .clear {
  2.   clear: both;
  3. }
  • 使用伪元素
  1. .box:after {
  2.   content: "";
  3.   /* 使这个区域变成以一个块级元素 */
  4.   display: block;
  5.   clear: both;
  6. }
  • 创建 BFC 容器

创建 BFC 的方式：任何一个元素添加上以下任何一个属性后就是一个 BFC 容器

  1. float：left / right，不能是 none;
  2. overflow: hidden / auto / scroll, 不能是 visible；
  3. display: flex / inline-flex;
  4. display: grid / inline-grid;
  5. display: inline-block / table-cell;
  6. position: absolute / fiexed。

使用 overflow:hidden;将父元素转为 BFC 容器，使它的布局不受到内部浮动元素的影响

  1. .box {
  2.   overflow: hidden;
  3. }

二、定位（position）

定位属性：position

定位类型：

  1. 静态定位（position:static;）：文档流定位；默认定位，元素的显示位置与它源码的位置一致

  2. 相对定位（position:relative;）：相对于该元素在文档流中的原始位置进行定位（偏移）。

  3. 绝对定位（position:absolute;）：相对于它的祖先中离它最近的 “定位元素” 的位置发生偏移（定位元素：只要这个元素中有 position: relative;或者 position:absolute;就称为定位元素，仅限这两种）。如果祖先元素中不存在定位元素，那它就参考根元素（html）进行定位，而且只有定位元素才有资格充当绝对定位元素的定位祖先元素（定位参考元素）。

  4. 固定定位（position:fixed;）：它是绝对定位的一个特例，它始终相对于 html 定位。固定定位应用场景：在线客服，广告位等。

定位实战

  • 模态框实现

特点：点击“登录”按钮弹出登录框，同时登录框居于屏幕中央，背景半透明，点击“关闭”按钮时，登录框隐藏，页面恢复原来亮度。

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>模态框</title>
  6.     <link rel="stylesheet" href="style/demo6.css" />
  7.   </head>
  8.   <body>
  9.     <!-- 页眉 -->
  10.     <header>
  11.       <h2>我的博客</h2>
  12.       <button>登录</button>
  13.     </header>
  14.     <!-- 模态框 -->
  15.     <div class="modal">
  16.       <!-- 蒙板：用来盖住后面的内容，使它半透明 -->
  17.       <div class="modal-coverback"></div>
  18.       <!-- 主体 -->
  19.       <div class="modal-body">
  20.         <button class="close">关闭</button>
  21.         <form action="" method="POST">
  22.           <table>
  23.             <caption>
  24.               用户登录
  25.             </caption>
  26.             <tr>
  27.               <td><label for="username">用户名:</label></td>
  28.               <td>
  29.                 <input type="text" name="username" id="username" required />
  30.               </td>
  31.             </tr>
  32.             <tr>
  33.               <td><label for="psd">密码:</label></td>
  34.               <td><input type="password" name="psd" id="psd" required /></td>
  35.             </tr>
  37.             <tr>
  38.               <td></td>
  39.               <td><button>登录</button></td>
  40.             </tr>
  41.           </table>
  42.         </form>
  43.       </div>
  44.     </div>
  45.   </body>
  46. </html>
  47. <script src="js/demo6.js"></script>

demo6.css 代码如下：

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. /* 页眉样式 */
  8. header {
  9.   background-color: #ccc;
  10.   padding: 0.5em 2em;
  11.   overflow: hidden;
  12.   font-style: italic;
  13.   color: #123456;
  14. }
  15. header h2 {
  16.   float: left;
  17. }
  18. header button {
  19.   float: right;
  20.   width: 5em;
  21.   height: 2.5em;
  22. }
  24. header button:hover {
  25.   cursor: pointer;
  26.   opacity: 0.8;
  27. }
  28. /* 模态框样式 */
  30. /* 蒙版 */
  31. /* 使用固定定位 */
  32. .modal .modal-coverback {
  33.   background-color: rgb(0, 0, 0, 0.5);
  34.   position: fixed;
  35.   top: 0;
  36.   left: 0;
  37.   right: 0;
  38.   bottom: 0;
  39. }
  40. /* 主体 */
  41. .modal .modal-body {
  42.   padding: 1em;
  43.   min-width: 20em;
  44.   min-height: 10em;
  45.   border: 1px solid #000;
  46.   background: linear-gradient(to right, lightcyan, #fff);
  48.   /* 固定定位 */
  49.   position: fixed;
  50.   /* top: 0;
  51.   left: 0;
  52.   right: 0;
  53.   bottom: 0; */
  54.   /* margin: auto; */
  55.   /* 实现屏幕居中 */
  56.   top: 50%;
  57.   left: 50%;
  58.   /* 向后平移以自身为基准的50% */
  59.   transform: translate(-50%, -50%);
  60. }
  61. .modal form table {
  62.   width: 80%;
  63. }
  64. .modal form table caption {
  65.   font-weight: bold;
  66.   margin-bottom: 1em;
  67. }
  68. .modal form table td {
  69.   padding: 0.5em 0;
  70.   margin-bottom: 2em;
  71. }
  72. .modal form table td:first-of-type {
  73.   width: 5em;
  74. }
  75. .modal form table td input {
  76.   width: auto;
  77.   height: auto;
  78. }
  79. .modal form table button {
  80.   width: 7.5em;
  81.   height: 2.5em;
  82. }
  83. .modal form table button:hover {
  84.   opacity: 0.8;
  85.   cursor: pointer;
  86. }
  88. .modal-body {
  89.   position: relative;
  90. }
  91. .modal .close {
  92.   position: absolute;
  93.   width: 4em;
  94.   height: 2em;
  95.   top: 1em;
  96.   right: 1em;
  97. }
  98. .modal .close:hover {
  99.   cursor: pointer;
  100.   background-color: lightcyan;
  101.   color: #000;
  102.   box-shadow: 0 0 2px #eee;
  103. }
  104. /* 页面初始化时，模态框应该隐藏 */
  105. .modal {
  106.   display: none;
  107. }

demo6.js 代码：

  1. const btn = document.querySelector("header button");
  2. const modal = document.querySelector(".modal");
  3. const close = document.querySelector(".close");
  5. btn.addEventListener("click", setModal, false);
  6. close.addEventListener("click", setModal, false);
  8. function setModal(ev) {
  9.   ev.preventDefault();
  10.   let status = window.getComputedStyle(modal, null).getPropertyValue("display");
  11.   modal.style.display = status === "none" ? "block" : "none";
  12. }

显示效果如下：

点击前效果：

点击后效果：

  • 使用定位制作一个五环

五环样式要求如下：

为了显示效果，将五环置于屏幕中央
示例代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>使用绝对定位实现五环效果</title>
  6.     <link rel="stylesheet" href="style/five-ring.css" />
  7.   </head>
  8.   <body>
  9.     <div class="body">
  10.       <div class="circle1"></div>
  11.       <div class="circle2"></div>
  12.       <div class="circle3"></div>
  13.       <div class="circle4"></div>
  14.       <div class="circle5"></div>
  15.     </div>
  16.   </body>
  17. </html>

five-ring.css 代码

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  6. html {
  7.   font-size: 10px;
  8. }
  9. .body {
  10.   width: 35em;
  11.   height: 20em;
  12.   /* border: 1px solid #000;
  13.   background-color: lightcyan; */
  14. }
  15. .body {
  16.   position: relative;
  17.   /* overflow: hidden; */
  18.   position: fixed;
  19.   top: 50%;
  20.   left: 50%;
  21.   transform: translate(-50%, -50%);
  22. }
  23. .circle1,
  24. .circle2,
  25. .circle3,
  26. .circle4,
  27. .circle5 {
  28.   position: absolute;
  29.   width: 10em;
  30.   height: 10em;
  31.   border: 10px solid #0388d4;
  32.   border-radius: 50%;
  33. }
  34. .circle1 {
  35.   top: 0;
  36.   left: 0;
  37.   z-index: 1;
  38. }
  39. .circle2 {
  40.   top: 0;
  41.   left: 11em;
  42.   border-color: #000;
  43.   z-index: 3;
  44. }
  45. .circle3 {
  46.   top: 0;
  47.   left: 22em;
  48.   border-color: #df0510;
  49.   z-index: 5;
  50. }
  51. .circle4 {
  52.   top: 4.5em;
  53.   left: 5.5em;
  54.   border-color: #f7b714;
  55.   z-index: 2;
  56. }
  57. .circle5 {
  58.   top: 4.5em;
  59.   left: 16.5em;
  60.   border-color: #038f40;
  61.   z-index: 4;
  62. }

显示效果如下：

五环

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