search

博客列表 >前段定位与浮动实现三列经典布局

前段定位与浮动实现三列经典布局

emagic
emagic原创
2020年06月21日 15:16:42736浏览

0618作业

一. 浮动元素高度塌陷产生的原因与解决方案（伪元素与overflow)

浮动元素高度塌陷产生的原因是元素浮动之后，释放原来占据的空间，会从文档流中脱离出来
元素浮动之后其后面的元素会占据浮动元素原来在文档流中的位置

  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.       .container {
  9.         border: 3px dashed red;
  10.       }
  11.       .item {
  12.         width: 150px;
  13.         height: 150px;
  14.       }
  15.       .item:first-of-type {
  16.         background-color: lightgreen;
  17.       }
  18.       .item:nth-of-type(2) {
  19.         background-color: lightcoral;
  20.       }
  21.       .item:last-of-type {
  22.         background-color: lightblue;
  23.       }
  24.       /* 将三个子元素全部浮动，此时父元素包不住子元素了，有什么办法解决 */
  25.       .item {
  26.         float: left;
  27.       }
  29.       /* 解决方案1：给父元素添加一个高度 */
  30.       /* .container {
  31.         height: 150px;
  32.       } */
  33.       /* 解决方案2：给父元素也浮动起来 */
  34.       /* .container {
  35.         float: left;
  36.       } */
  38.       /* 解决方案3：添加一个专用的清浮动的元素 */
  39.       /* .clear {
  40.         clear: both;
  41.       } */
  43.       /* 解决方案4：添加一个伪元素 */
  44.       /* .container::after {
  45.         content: "";
  46.         display: block;
  47.         clear: both;
  48.       } */
  50.       /* 解决方案5：最简单的解决方案 ，用BFC(块级格式化上下文)*/
  51.       .container {
  52.         overflow: hidden;
  53.         /* 或者 overflow: auto; */
  54.       }
  55.     </style>
  56.   </head>
  57.   <body>
  58.     <div class="container">
  59.       <div class="item">1</div>
  60.       <div class="item">2</div>
  61.       <div class="item">3</div>
  62.     </div>
  63.   </body>
  64. </html>

解决方案梳理:

序号 解决方案 推荐指数
1 给父元素设置一个高度 不推荐，如果子元素的高度改了，父元素也会包不住，无法自适应
2 给父元素也浮动起来 不推荐，如果父元素上面还有父元素要布局，多层会造成传递效应
3 添加一个专用的清浮动的元素 不推荐，页面要依赖附加的dom结构
4 通过添加伪元素 可以用，但还有更好的，见方案5
5 用BFC(块级格式化上下文） 推荐使用这种overflow: hidden;或者overflow: auto;

二. 使用定位与浮动完成一个三列经典布局

  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.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  15.       li {
  16.         list-style: none;
  17.         /* li前面的小黑点去掉 */
  18.       }
  20.       a {
  21.         text-decoration: none;
  22.         /* a标签的下划线去掉 */
  23.         color: #666;
  24.       }
  26.       /* 页眉与页脚 */
  27.       .header,
  28.       .footer {
  29.         height: 40px;
  30.         background-color: lightblue;
  31.       }
  33.       /* 页眉与页脚 中间区域*/
  34.       .content {
  35.         width: 960px;
  36.         margin: auto;
  37.       }
  39.       .content > ul > li {
  40.         float: left;
  41.         line-height: 40px;
  42.         padding: 0 15px;
  43.       }
  45.       .content > ul > li:hover {
  46.         background-color: gold;
  47.         font-size: 1.1rem;
  48.       }
  50.       /* 页脚样式 */
  51.       .content p {
  52.         text-align: center;
  53.         line-height: 40px;
  54.       }
  56.       /* 主体用定位 */
  57.       .container {
  58.         width: 960px;
  59.         margin: 10px auto;
  61.         min-height: 600px;
  62.         /* 防止浮动元素的高度塌陷 */
  63.         overflow: auto;
  64.       }
  66.       .container > .left {
  67.         width: 200px;
  68.         background-color: lightgreen;
  69.         min-height: 600px;
  70.         float: left;
  71.       }
  72.       .container > .right {
  73.         width: 200px;
  74.         background-color: lightgreen;
  75.         min-height: 600px;
  76.         float: right;
  77.       }
  78.       .container > .main {
  79.         background-color: wheat;
  80.         min-height: 600px;
  81.         width: 540px;
  82.         float: left;
  83.         margin-left: 10px;
  84.       }
  85.     </style>
  86.   </head>
  87.   <body>
  88.     <!-- 页眉 -->
  89.     <div class="header">
  90.       <div class="content">
  91.         <ul>
  92.           <li><a href="">首页</a></li>
  93.           <li><a href="">会员管理</a></li>
  94.           <li><a href="">购物车</a></li>
  95.         </ul>
  96.       </div>
  97.     </div>
  99.     <!-- 主体 -->
  100.     <div class="container">
  101.       <div class="left">左侧栏</div>
  102.       <div class="main">中间内容区</div>
  103.       <div class="right">右侧栏</div>
  104.     </div>
  105.     <!-- 页脚 -->
  106.     <div class="footer">
  107.       <div class="content">
  108.         <p>XX电商服务有限公司&copy;|备案号：粤ICP：*****335454***55</p>
  109.       </div>
  110.     </div>
  111.   </body>
  112. </html>

  • min-height: 600px;
    /* 最小高度，无内容也有个区域高度 */

课堂小结：

懒加载：根据滚动条，让进入用户可视区的图片才加载

  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.   </head>
  8.   <body>
  9.     <img src="15.jpg" alt="" data-src="16.png" />
  10.     <img src="15.jpg" alt="" data-src="16.png" />
  11.     <img src="15.jpg" alt="" data-src="16.png" />
  12.     <img src="15.jpg" alt="" data-src="16.png" />
  13.     <img src="15.jpg" alt="" data-src="16.png" />
  14.     <img src="15.jpg" alt="" data-src="16.png" />
  15.   </body>
  16.   <script>
  17.     // 视口大小,获取视口高度
  18.     const viewHeight = document.documentElement.clientHeight;
  19.     // 滚动距离
  20.     document.addEventListener("scroll", showImg);
  21.     // 初始化   ，打开页面的时候先加载已进入页面的图，
  22.     window.addEventListener("load", showImg);
  23.     //    回调函数
  24.     function showImg() {
  25.       //    获取所有图片
  26.       let imgs = document.querySelectorAll("img");
  27.       // 遍历每一张图片，判断当前图片是否进入到了用户的视口区域
  28.       imgs.forEach(function (img) {
  29.         let imgTop = img.offsetTop;
  30.         // 滚动高度 = 视口高度+滚动距离
  31.         let scrTop = viewHeight + document.documentElement.scrollTop;
  32.         //当前图片如果进入定位父级的高度 < 当前的滚动高度 表明图片已经进入了可视区
  33.         if (imgTop < scrTop) {
  34.           img.src = img.dataset.src;
  35.           //用自定义的类里面的图片地址替换原生的图片地址
  36.         }
  37.       });
  38.     }
  39.   </script>
  40. </html>

<img src="占位图.png" alt="" data-src="实际要显示的图片.jpg"/>

  • data-src是一个自定义的类

  • 1.拿到视口大小
    const viewHight = document.documentElement.clientHeight;

  • 2.监听文档对象的移动事件 ,，监听scroll事件
    document.addEventListener("scroll", showImg);

  • 3.滚动高度 = 视口高度+滚动距离

  • 4.当前图片如果进入定位父级的高度 < 当前的滚动高度 表明图片已经进入了可视区

  1.  if (imgTop < scrTop) {
  2.           img.src = img.dataset.src;
  3.           //用自定义的类里面的图片地址替换原生的图片地址
  4.         }
  • 5.初始化，打开页面的时候先加载已进入页面的图，监听load事件
    window.addEventListener("load", showImg);

浮动的知识点

  • 浮动只能沿着水平方向浮动（即左右方向）
  • 浮动元素的浮动边界仅限于内容区
  • `元素浮动之后释放原来占据的空间，会从文档流中脱离出来
  • 元素浮动之后其后面的元素会占据浮动元素原来在文档流中的位置

  • 浮动元素只会影响其后面的元素布局，不会影响其前面的元素布局

  • 行内元素用于最终内容的载体（如文本），不能充当容器/父级，设置宽高是无效的。除非浮动起来

  • 任何元素一旦浮动都自动转为块级元素

  • 不想让他受到前面元素的影响，用clear. clear:left清除左浮动的影响，clear:right清除右浮动的影响，clear:both清除全部浮动的影响，

  • min-height: 设置最小高度，无内容也有个区域高度

圣杯布局

  • 两边固定，中间自适应
  • margin可以是负值
  • 圣杯布局要求主体内容优先渲染（写在同级元素前面）
  • 使用内边距把容器左右两边位置挤出来放左右边栏 ，因为浮动只在内边距区域内生效，而且主体设了100%

Grid布局

  • 1.整个页面转为Grid布局display: grid;
  • 2.列设置：
    根据需要设置三列
    grid-template-columns: 第一列的宽度 自适应(1fr) 第三列的宽度
    grid-template-columns: 200px 1fr 200px;
  • 3.行设置
    grid-template-rows: 40px 1fr 40px;
    -4.页眉、页脚归位
    grid-column-end: span 4;
  • 5.行列间距
    gap：10px;
上一条：CSS盒模型属性基础知识及绝对定位的水平垂直居中下一条：尝试把web.php路由文件分成多个
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多