前段定位与浮动实现三列经典布局 - 第十二期_前端开发

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

博主信息

博文 53

粉丝 3

访问量 58884

专题推荐

更多>

0618作业

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浮动元素的高度塌陷与解决方案</title>
    <style>
      .container {
        border: 3px dashed red;
      }
      .item {
        width: 150px;
        height: 150px;
      }
      .item:first-of-type {
        background-color: lightgreen;
      }
      .item:nth-of-type(2) {
        background-color: lightcoral;
      }
      .item:last-of-type {
        background-color: lightblue;
      }
      /* 将三个子元素全部浮动，此时父元素包不住子元素了，有什么办法解决 */
      .item {
        float: left;
      }
      /* 解决方案1：给父元素添加一个高度 */
      /* .container {
        height: 150px;
      } */
      /* 解决方案2：给父元素也浮动起来 */
      /* .container {
        float: left;
      } */
      /* 解决方案3：添加一个专用的清浮动的元素 */
      /* .clear {
        clear: both;
      } */
      /* 解决方案4：添加一个伪元素 */
      /* .container::after {
        content: "";
        display: block;
        clear: both;
      } */
      /* 解决方案5：最简单的解决方案 ，用BFC(块级格式化上下文)*/
      .container {
        overflow: hidden;
        /* 或者 overflow: auto; */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

解决方案梳理:

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用定位与浮动完成一个三列经典布局</title>
    <style>
      /* 初始化  常用套路*/
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      li {
        list-style: none;
        /* li前面的小黑点去掉 */
      }
      a {
        text-decoration: none;
        /* a标签的下划线去掉 */
        color: #666;
      }
      /* 页眉与页脚 */
      .header,
      .footer {
        height: 40px;
        background-color: lightblue;
      }
      /* 页眉与页脚 中间区域*/
      .content {
        width: 960px;
        margin: auto;
      }
      .content > ul > li {
        float: left;
        line-height: 40px;
        padding: 0 15px;
      }
      .content > ul > li:hover {
        background-color: gold;
        font-size: 1.1rem;
      }
      /* 页脚样式 */
      .content p {
        text-align: center;
        line-height: 40px;
      }
      /* 主体用定位 */
      .container {
        width: 960px;
        margin: 10px auto;
        min-height: 600px;
        /* 防止浮动元素的高度塌陷 */
        overflow: auto;
      }
      .container > .left {
        width: 200px;
        background-color: lightgreen;
        min-height: 600px;
        float: left;
      }
      .container > .right {
        width: 200px;
        background-color: lightgreen;
        min-height: 600px;
        float: right;
      }
      .container > .main {
        background-color: wheat;
        min-height: 600px;
        width: 540px;
        float: left;
        margin-left: 10px;
      }
    </style>
  </head>
  <body>
    <!-- 页眉 -->
    <div class="header">
      <div class="content">
        <ul>
          <li><a href="">首页</a></li>
          <li><a href="">会员管理</a></li>
          <li><a href="">购物车</a></li>
        </ul>
      </div>
    </div>
    <!-- 主体 -->
    <div class="container">
      <div class="left">左侧栏</div>
      <div class="main">中间内容区</div>
      <div class="right">右侧栏</div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <div class="content">
        <p>XX电商服务有限公司&copy;|备案号：粤ICP：*****335454***55</p>
      </div>
    </div>
  </body>
</html>

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

课堂小结：

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>懒加载原理：滚动高度与偏移高度的案例</title>
  </head>
  <body>
    <img src="15.jpg" alt="" data-src="16.png" />
    <img src="15.jpg" alt="" data-src="16.png" />
    <img src="15.jpg" alt="" data-src="16.png" />
    <img src="15.jpg" alt="" data-src="16.png" />
    <img src="15.jpg" alt="" data-src="16.png" />
    <img src="15.jpg" alt="" data-src="16.png" />
  </body>
  <script>
    // 视口大小,获取视口高度
    const viewHeight = document.documentElement.clientHeight;
    // 滚动距离
    document.addEventListener("scroll", showImg);
    // 初始化   ，打开页面的时候先加载已进入页面的图，
    window.addEventListener("load", showImg);
    //    回调函数
    function showImg() {
      //    获取所有图片
      let imgs = document.querySelectorAll("img");
      // 遍历每一张图片，判断当前图片是否进入到了用户的视口区域
      imgs.forEach(function (img) {
        let imgTop = img.offsetTop;
        // 滚动高度 = 视口高度+滚动距离
        let scrTop = viewHeight + document.documentElement.scrollTop;
        //当前图片如果进入定位父级的高度 < 当前的滚动高度 表明图片已经进入了可视区
        if (imgTop < scrTop) {
          img.src = img.dataset.src;
          //用自定义的类里面的图片地址替换原生的图片地址
        }
      });
    }
  </script>
</html>

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

data-src是一个自定义的类
1.拿到视口大小
const viewHight = document.documentElement.clientHeight;
2.监听文档对象的移动事件 ,，监听scroll事件
document.addEventListener("scroll", showImg);
3.滚动高度 = 视口高度+滚动距离
4.当前图片如果进入定位父级的高度 < 当前的滚动高度表明图片已经进入了可视区

 if (imgTop < scrTop) {
          img.src = img.dataset.src;
          //用自定义的类里面的图片地址替换原生的图片地址
        }

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;

批改老师：

查无此人

批改状态：合格

老师批语：不错，继续加油。

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML常用标签及实例-前端第九期线上班

2019-10-30 22:16:29