search

博客列表 >07 浮动元素、高度塌陷、三列页面

07 浮动元素、高度塌陷、三列页面

老黑
老黑原创
2020年06月19日 19:09:45558浏览

主要内容：

  • ① 通过js提升图片页面加载速度（懒加载原理）。
  • ② 元素浮动和位置让出。
  • ③ 左右浮动和免受影响。
  • ④ 高度塌陷及各种解决办法。
  • ⑤ 典型三列页面的实现（定位模式、浮动模式、圣杯模式、Grid模式）。

1、通过js提升图片页面加载速度

直接加载图片会导致页面加载速度放慢。于是可以先放一些用来占位的小图。然后等到图在页面中出现了（结合scroll这块来判断），再用js加载成正式的图。

  1.   <body>
  2.     <img src="temp.jpg" alt="" data-src="thief.png" />
  3.     <img src="temp.jpg" alt="" data-src="thief.png" />
  4.     <img src="temp.jpg" alt="" data-src="thief.png" />
  5.   </body>
  6.   <script>
  7.     // 视口大小: 窗口大小
  8.     const viewHeight = document.documentElement.clientHeight;
  10.     // 监听文档对象的滚动事件
  11.     document.addEventListener("scroll", showImg);
  12.     // 初始化
  13.     window.addEventListener("load", showImg);
  15.     // 回调
  16.     function showImg() {
  17.       // 获取所有图片
  18.       let imgs = document.querySelectorAll("img");
  19.       // 遍历每一张图片，判断当前的图片是否进入到用户的可视区域
  20.       imgs.forEach(function (img) {
  21.         let imgTop = img.offsetTop;
  23.         // 滚动高度 = 视口高度 + 滚动距离
  24.         let scrTop = viewHeight + document.documentElement.scrollTop;
  25.         // 图片已进入可视区
  26.         if (imgTop < scrTop) {
  27.           img.src = img.dataset.src;
  28.         }
  29.       });
  30.     }
  31.   </script>

2、元素浮动和位置让出

  1. 元素浮动之后从文档流中脱离出来(会释放它原来在文档流中占据的空间)
  2. 后面的元素会自动填充它出让出来的空间大小
  3. 浮动元素只会影响到它后面的元素布局，对前面没有影响
  4. 行内元素用于最终内容的载体, 不能充当容器/当父级，不能设置或设置了宽高也是无效的。例如a、p元素等
  5. 任何元素，一旦浮动都自动转为块级元素

3、左右浮动和免受影响

  1. float: left;
  2. float: right;
  3. clear: both;(免受前面浮动元素的影响)
  4. 当然也有:
  5. clear:left; clear:right;

4、高度塌陷及解决办法

什么是高度塌陷：父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷。

  1.       /* 解决方案1: 给父元素也添加一个高度。缺点是无法随浮动元素的高度变化而变化*/
  2.       .container {
  3.       height: 150px;
  4.       }
  6.       /* 解决方案2: 把父元素也浮动起来 */
  7.       .container {
  8.         float: left;
  9.       }
  10.       .box {
  11.           float: left;
  12.       }
  14.       /* 解决方案3: 添加一个专用元素用于清浮动 */
  15.       div.clear {
  16.         clear: both;
  17.       }
  19.       /* 解决方案4： 通过添加一个伪元素来解决 */
  20.       .container::after {
  21.         content: "";
  22.         display: block;
  23.         clear: both;
  24.       }
  26.       /* 解决方案5: 最简单的解决方案,用到BFC(块级格式化上下文) */
  27.       .container {
  28.         /* overflow: hidden; */
  29.         overflow: auto;
  30.       }

5、典型三列页面的实现（定位模式、浮动模式、圣杯模式、Grid模式）

方法1：定位模式
  1.     <!--body中的块元素-->
  2.     <div class="container">
  3.       <div class="left">左侧</div>
  4.       <div class="main">内容区</div>
  5.       <div class="right">右侧</div>
  6.     </div>
  7.     <!--css中的左右定位等-->
  8.     <style>
  9.       /* 主体用定位 */
  10.       .container {
  11.         width: 960px;
  12.         margin: 10px auto;
  13.         /* background-color: #ccc; */
  14.         min-height: 600px;
  15.         /* 转为定位元素，做为定位父级 */
  16.         position: relative;
  17.       }
  19.       .container > .left {
  20.         width: 200px;
  21.         background-color: wheat;
  22.         min-height: 600px;
  24.         position: absolute;
  25.         top: 0;
  26.         left: 0;
  27.       }
  29.       .container > .right {
  30.         width: 200px;
  31.         background-color: wheat;
  32.         min-height: 600px;
  33.         position: absolute;
  34.         top: 0;
  35.         right: 0;  /*这块是以右侧为锚定点来进行定位*/
  36.       }
  38.       .container > .main {
  39.         background-color: lightgreen;
  40.         min-height: 600px;
  41.         width: 540px;
  43.         position: absolute;
  44.         top: 0;
  45.         left: 210px;
  46.       }
  47.     </style>
方法2：浮动模式
  1.       <style>
  2.        /* 主体用定位 */
  3.       .container {
  4.         width: 960px;
  5.         margin: 10px auto;
  6.         /* background-color: #ccc; */
  7.         min-height: 600px;
  8.         /* 防止浮动元素的高度塌陷 */
  9.         overflow: hidden;
  10.       }
  12.       .container > .left {
  13.         width: 200px;
  14.         background-color: wheat;
  15.         min-height: 600px;
  16.         float: left;
  17.       }
  19.       .container > .right {
  20.         width: 200px;
  21.         background-color: wheat;
  22.         min-height: 600px;
  23.         float: right;
  24.       }
  26.       .container > .main {
  27.         background-color: lightgreen;
  28.         min-height: 600px;
  29.         width: 540px;
  30.         float: left;
  31.         margin-left: 10px;
  32.       }
  33.     </style>
方法3：圣杯模式

先将两边做好，然后中间自动填充。

  1.     <div class="container">
  2.       <!-- 圣杯布局要求主体内容优先渲染 -->
  3.       <div class="main">内容区</div>
  4.       <div class="left">左侧</div>
  5.       <div class="right">右侧</div>
  6.     </div>
  7.    <style>
  8.       .container {
  9.         border: 5px dashed;
  10.         overflow: hidden;
  11.       }
  12.       .container > * {
  13.         min-height: 400px;
  14.       }
  16.       /* 左右固定 */
  17.       .container > .left,
  18.       .container > .right {
  19.         width: 200px;
  20.         background-color: cyan;
  21.       }
  23.       /* 中间样式 */
  24.       .container > .main {
  25.         width: 100%;
  26.         background-color: wheat;
  27.       }
  29.       /* 所有子元素浮动起来 */
  30.       .container > * {
  31.         float: left;
  32.       }
  34.       /* 使用内边距把左右二边的位置挤出来 */
  35.       .container {
  36.         /* padding-left: 200px;
  37.         padding-right: 200px; */
  38.         padding: 0 200px;
  39.       }
  41.       .container > .left {
  42.         margin-left: -100%;
  43.         /* 使用相对定位将它复位 */
  44.         position: relative;
  45.         top: 0;
  46.         right: 200px;
  47.       }
  49.       .container > .right {
  50.         margin-left: -200px;
  51.         /* 使用相对定位将它复位 */
  52.         position: relative;
  53.         top: 0;
  54.         left: 200px;
  55.       }
  56.     </style>
方法4：Grid模式
  1.   <body>
  2.     <div class="header">页眉</div>
  3.     <div class="left">左侧</div>
  4.     <div class="main">主体</div>
  5.     <div class="right">右侧</div>
  6.     <div class="footer">页脚</div>
  7.   </body>
  8.     <style>
  9.       body {
  10.         display: grid;
  11.         grid-template-columns: 200px 1fr 200px;
  12.         grid-template-rows: 40px 500px 40px;
  13.         gap: 10px;
  14.       }
  16.       /* 参考线 */
  17.       body > * {
  18.         outline: 1px dashed red;
  19.         background-color: lightcyan;
  20.       }
  22.       .header,
  23.       .footer {
  24.         grid-column-end: span 4;
  25.       }
  26.     </style>

6、操练：使用定位与浮动完成典型三列页面

  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>Document</title>
  7.     <style>
  8.         * {
  9.             margin: 0px;
  10.             padding: 0px;
  11.             box-sizing: border-box;
  12.         }
  13.         li {
  14.            list-style: none;
  15.         }
  16.         a {
  17.             text-decoration: none;
  18.             color: white;
  19.         }
  20.         .head, .foot{
  21.             height: 40px;
  22.             background-color: darkgoldenrod;
  23.             width: 960px;
  24.             text-align: center;
  25.             line-height: 40px;
  26.             margin: auto;
  27.         }
  28.         .head ul li{
  29.             float: left;
  30.             /* line-height: 40px; */
  31.             padding:0 20px;
  32.         }
  33.         .head ul li:hover{
  34.             background-color: darkgrey;
  35.             color: red;
  36.         }
  37.         .head ul li{
  38.             float: left;
  39.         }
  40.         .container{
  41.             margin: 10px auto;
  42.             min-height: 600px;
  43.             position: relative;
  44.             width: 960px;
  45.         }
  46.         .container> .left{
  47.             width: 200px;
  48.             background-color: rosybrown;
  49.             min-height: 600px;
  50.             position: absolute;
  51.             top: 0;
  52.             left: 0;
  53.         }
  54.         .container> .right{
  55.             width: 200px;
  56.             background-color: rosybrown;
  57.             min-height: 600px;
  58.             position: absolute;
  59.             top: 0;
  60.             right: 0;
  61.         }
  62.         .middle{
  63.             background-color: skyblue;
  64.             min-height: 600px;
  65.             width: 540px;
  66.             position: absolute;
  67.             top: 0;
  68.             left: 210px;
  69.         }
  70.     </style>
  71. </head>
  72. <body>
  73.     <div class="head">
  74.         <ul>
  75.             <li><a href="">凡界</a></li>
  76.             <li><a href="">妖界</a></li>
  77.             <li><a href="">仙界</a></li>
  78.             <li><a href="">无界</a></li>
  79.         </ul>            
  80.     </div>
  81.     <br>
  82.     <div class="container">
  83.         <div class="left">左妖怪</div>
  84.         <div class="middle">中凡人</div>
  85.         <div class="right">右神仙</div>
  86.     </div>
  87.     <div class="foot">空间无限转，时间常年流</div>
  88. </body>
  89. </html>
上一条：表格完成购物车，表单完成用户注册表下一条：浮动元素的高度塌陷与解决方案 overflow
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多