简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >使用 overflow 给元素定位与浮动完成三列经典布局学习总结

使用 overflow 给元素定位与浮动完成三列经典布局学习总结

JKY辉哥
JKY辉哥原创
2020年06月19日 18:19:59898浏览

  • 1. 浮动元素高度塌陷产生的原因与解决方案

  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.       }
  12.       .item {
  13.         width: 150px;
  14.         height: 150px;
  15.       }
  17.       .item:first-of-type {
  18.         background-color: lightgreen;
  19.       }
  20.       .item:nth-last-of-type(2) {
  21.         background-color: lightpink;
  22.       }
  23.       .item:last-of-type {
  24.         background-color: lightsalmon;
  25.       }
  26.       /* 将三个子元素全部浮动 */
  27.       .item {
  28.         float: left;
  29.       }
  31.       /* 出现一个问题，父元素包不住子元素了？ 如何解决呢？ */
  33.       /* 解决方案1: 给父元素也添加一个高度,缺点子元素高度变化，父元素也要跟着调整 */
  34.       .container {
  35.         /* height: 150px; */
  36.       }
  38.       /* 解决方案2: 把父元素也浮动起来 ,缺点会产生传导效应*/
  39.       /* .container {
  40.         float: left;
  41.       }
  42.       .box {
  43.         float: left;
  44.       } */
  46.       /* 解决方案3: 添加一个专用元素用于清浮动 */
  47.       /* .clear {
  48.         clear: both;
  49.       } */
  51.       /* 解决方案4： 通过添加一个伪元素来解决 */
  52.       /* .container::after {
  53.         content: "";
  54.         display: block;
  55.         clear: both;
  56.       } */
  57.       /* 解决方案5: 最简单的解决方案,用到BFC(块级格式化上下文) */
  58.       .container {
  59.         /* overflow: hidden; */
  60.         overflow: auto;
  61.       }
  62.     </style>
  63.   </head>
  64.   <body>
  65.     <!-- .container>.item1+.item2+.item3  快速生成语法1-->
  66.     <!-- .container>.item{$}*3 快速生成语法2-->
  68.     <!-- <div class="box"> -->
  70.     <div class="container">
  71.       <div class="item">1</div>
  72.       <div class="item">2</div>
  73.       <div class="item">3</div>
  74.       <!-- <div class="clear"></div> -->
  75.     </div>
  77.     <!-- </div> -->
  78.   </body>
  79. </html>

元素高度塌陷 5 种解决方案：解决方案

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

    • 2.1 使用绝对定位来完成一个通用三列布局

    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.       padding: 0;
    11.       margin: 0;
    12.       box-sizing: border-box;
    13.     }
    15.     li {
    16.       list-style: none;
    17.     }
    18.     a {
    19.       text-decoration: none;
    20.       color: #ccc;
    21.     }
    22.     /* 页眉页脚 */
    23.     .header,
    24.     .footer {
    25.       height: 40px;
    26.       background-color: teal;
    27.     }
    28.     /* 页眉与页脚的内容区 */
    29.     .content {
    30.       width: 960px;
    31.       margin: auto;
    32.     }
    34.     .content ul li {
    35.       float: left;
    36.       line-height: 40px;
    37.       padding: 0 15px;
    38.     }
    39.     .content ul li:hover {
    40.       background-color: lightyellow;
    41.     }
    43.     /* 页脚样式 */
    44.     .content p {
    45.       text-align: center;
    46.       line-height: 40px;
    47.     }
    49.     .container {
    50.       width: 960px;
    51.       margin: 10px auto;
    52.       min-height: 600px;
    53.       /* 转为定位元素，做为定位父级 */
    54.       position: relative;
    55.     }
    57.     /* 主体用定位 */
    58.     .container > .left {
    59.       width: 200px;
    60.       background-color: wheat;
    61.       min-height: 600px;
    62.       position: absolute;
    63.       top: 0;
    64.       left: 0;
    65.     }
    66.     .container > .right {
    67.       width: 200px;
    68.       background-color: turquoise;
    69.       min-height: 600px;
    70.       position: absolute;
    71.       top: 0;
    72.       right: 0;
    73.     }
    74.     .container > .main {
    75.       background-color: violet;
    76.       min-height: 600px;
    77.       width: 540px;
    78.       position: absolute;
    79.       top: 0;
    80.       left: 210px;
    81.     }
    82.   </style>
    83. </head>
    84. <body>
    85.   <!-- 页眉 -->
    86.   <div class="header">
    87.     <!-- 内容区: 水平居中 -->
    88.     <div class="content">
    89.       <ul>
    90.         <li><a href="">首页</a></li>
    91.         <li><a href="">618专场</a></li>
    92.         <li><a href="">在线客服</a></li>
    93.       </ul>
    94.     </div>
    95.   </div>
    97.   <!-- 主体 -->
    98.   <div class="container">
    99.     <div class="left">左侧</div>
    100.     <div class="main">内容区</div>
    101.     <div class="right">右侧</div>
    102.   </div>
    104.   <!-- 页脚 -->
    105.   <div class="footer">
    106.     <div class="content">
    107.       <p>安徽小皮教育科技有限公司© | 备案号: 皖ICP *********</p>
    108.     </div>
    109.   </div>
    110. </body>
    111. </html>

    绝对定位实现通用三列布局：绝对定位

    • 2.2 使用浮动来完成一个通用三列布局

    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.       padding: 0;
    11.       margin: 0;
    12.       box-sizing: border-box;
    13.     }
    15.     li {
    16.       list-style: none;
    17.     }
    18.     a {
    19.       text-decoration: none;
    20.       color: #ccc;
    21.     }
    22.     /* 页眉页脚 */
    23.     .header,
    24.     .footer {
    25.       height: 40px;
    26.       background-color: teal;
    27.     }
    28.     /* 页眉与页脚的内容区 */
    29.     .content {
    30.       width: 960px;
    31.       margin: auto;
    32.     }
    34.     .content ul li {
    35.       float: left;
    36.       line-height: 40px;
    37.       padding: 0 15px;
    38.     }
    39.     .content ul li:hover {
    40.       background-color: lightyellow;
    41.     }
    43.     /* 页脚样式 */
    44.     .content p {
    45.       text-align: center;
    46.       line-height: 40px;
    47.     }
    49.     .container {
    50.       width: 960px;
    51.       margin: 10px auto;
    52.       min-height: 600px;
    53.     }
    55.     /* 主体用定位 */
    56.     .container > .left {
    57.       width: 200px;
    58.       background-color: wheat;
    59.       min-height: 600px;
    60.       float: left;
    61.     }
    62.     .container > .right {
    63.       width: 200px;
    64.       background-color: turquoise;
    65.       min-height: 600px;
    66.       float: right;
    67.     }
    68.     .container > .main {
    69.       background-color: violet;
    70.       min-height: 600px;
    71.       width: 540px;
    72.       float: left;
    73.       margin-left: 10px;
    74.     }
    75.   </style>
    76. </head>
    77. <body>
    78.   <!-- 页眉 -->
    79.   <div class="header">
    80.     <!-- 内容区: 水平居中 -->
    81.     <div class="content">
    82.       <ul>
    83.         <li><a href="">首页</a></li>
    84.         <li><a href="">618专场</a></li>
    85.         <li><a href="">在线客服</a></li>
    86.       </ul>
    87.     </div>
    88.   </div>
    90.   <!-- 主体 -->
    91.   <div class="container">
    92.     <div class="left">左侧</div>
    93.     <div class="main">内容区</div>
    94.     <div class="right">右侧</div>
    95.   </div>
    97.   <!-- 页脚 -->
    98.   <div class="footer">
    99.     <div class="content">
    100.       <p>安徽小皮教育科技有限公司© | 备案号: 皖ICP *********</p>
    101.     </div>
    102.   </div>
    103. </body>
    104. </html>

    浮动实现三列通用布局：浮动

    • 2.3 使用圣杯来完成一个通用三列布局：二端固定，中间自适应

    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>
    7.     布局实例: 使用圣杯来完成一个通用三列布局：二端固定，中间自适应
    8.   </title>
    9.   <style>
    10.     /* 初始化 */
    11.     * {
    12.       padding: 0;
    13.       margin: 0;
    14.       box-sizing: border-box;
    15.     }
    17.     li {
    18.       list-style: none;
    19.     }
    20.     a {
    21.       text-decoration: none;
    22.       color: #ccc;
    23.     }
    24.     /* 页眉页脚 */
    25.     .header,
    26.     .footer {
    27.       height: 40px;
    28.       background-color: lightyellow;
    29.     }
    31.     /* 页眉与页脚的内容区 */
    32.     .content {
    33.       width: 960px;
    34.       margin: auto;
    35.     }
    37.     .content ul li {
    38.       float: left;
    39.       line-height: 40px;
    40.       padding: 0 15px;
    41.     }
    42.     .content ul li:hover {
    43.       background-color: seagreen;
    44.       color: black;
    45.     }
    47.     /* 页脚样式 */
    48.     .content p {
    49.       text-align: center;
    50.       line-height: 40px;
    51.     }
    53.     .container {
    54.       border: 1px dashed;
    55.       overflow: hidden;
    56.     }
    58.     .container > * {
    59.       min-height: 400px;
    60.     }
    62.     /* 左右固定 */
    63.     .container > .left,
    64.     .container > .right {
    65.       background-color: thistle;
    66.       width: 200px;
    67.     }
    69.     /* 中间样式 */
    70.     .container > .main {
    71.       background-color: turquoise;
    72.       width: 100%;
    73.     }
    75.     /* 所有子元素浮动起来 */
    76.     .container > * {
    77.       float: left;
    78.     }
    80.     /* 使用内边距把左右二边的位置挤出来 */
    81.     .container {
    82.       /* padding-right: 200px;
    83.       padding-right:200px; */
    84.       padding: 0 200px;
    85.     }
    86.     .container > .left {
    87.       /* 使用相对定位将它复位 */
    88.       margin-left: -100%;
    89.       position: relative;
    90.       top: 0;
    91.       right: 200px;
    92.     }
    93.     .container > .right {
    94.       margin-right: -200px;
    95.       position: relative;
    96.       top: 0;
    97.       left: 0;
    98.     }
    99.   </style>
    100. </head>
    101. <body>
    102.   <!-- 页眉 -->
    103.   <div class="header">
    104.     <!-- 内容区: 水平居中 -->
    105.     <div class="content">
    106.       <ul>
    107.         <li><a href="">首页</a></li>
    108.         <li><a href="">618专场</a></li>
    109.         <li><a href="">在线客服</a></li>
    110.       </ul>
    111.     </div>
    112.   </div>
    114.   <!-- 主体 -->
    115.   <div class="container">
    116.     <!-- 圣杯布局要求主体内容优先渲染 -->
    117.     <div class="main">内容区</div>
    118.     <div class="left">左侧</div>
    119.     <div class="right">右侧</div>
    120.   </div>
    122.   <!-- 页脚 -->
    123.   <div class="footer">
    124.     <div class="content">
    125.       <p>安徽小皮教育科技有限公司© | 备案号: 皖ICP *********</p>
    126.     </div>
    127.   </div>
    128. </body>
    129. </html>

    圣杯实现三列通用布局：圣杯

  • 3.使用 Grid 实现三列经典布局（选学）

  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>Grid: 选学</title>
  7.     <style>
  8.       body {
  9.         display: grid;
  10.         /* 总共三列，第一列200px,第二列自适应，第三列200px */
  11.         grid-template-columns: 200px 1fr 200px;
  12.         /* 总共三行，第一行40px,第二行500px,第三行40px */
  13.         grid-template-rows: 40px 500px 40px;
  14.         /* 定义所有元素间隙10px */
  15.         gap: 10px;
  16.       }
  17.       /* 添加参考线 */
  18.       body > * {
  19.         outline: 1px dashed red;
  20.         /* 定义每个元素背景 */
  21.         background-color: lightseagreen;
  22.         color: white;
  23.       }
  24.       .header,
  25.       .footer {
  26.         /* 跨行跨列 */
  27.         grid-column-end: span 4;
  28.       }
  29.     </style>
  30.   </head>
  31.   <body>
  32.     <div class="header">头部</div>
  33.     <div class="left">左侧</div>
  34.     <div class="main">主体</div>
  35.     <div class="right">右侧</div>
  36.     <div class="footer">底部</div>
  37.   </body>
  38. </html>

grid 实现三列通用布局，推荐布局方式：grid

  • 4.页面图片懒加载（选学）

  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="temp.jpg" alt="图片" data-src="thief.png" />
  10.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  11.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  12.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  13.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  14.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  15.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  16.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  17.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  18.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  19.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  20.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  21.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  22.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  23.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  24.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  25.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  26.     <img src="temp.jpg" alt="图片" data-src="thief.png" />
  27.   </body>
  29.   <script>
  30.     //视口大小：窗口大小
  31.     const viewHeight = document.documentElement.clientHeight;
  33.     //监听文档对象的滚动事件
  34.     document.addEventListener("scroll", showImg);
  36.     // 初始化
  37.     window.addEventListener("load", showImg);
  39.     // 回调
  40.     function showImg() {
  41.       //  获取所有图片
  42.       let imgs = document.querySelectorAll("img");
  43.       console.log(imgs);
  45.       // 遍历每一张图片，判断当前的图片是否进入到入用户的可视区域
  46.       imgs.forEach(function (img) {
  47.         let imgTop = img.offsetTop;
  49.         // 滚动高度 = 视口高度 + 滚动距离
  50.         let scrTop = viewHeight + document.documentElement.scrollTop;
  52.         //图片已进入可视区
  53.         if (imgTop < scrTop) {
  54.           img.src = img.dataset.src;
  55.         }
  56.       });
  57.     }
  58.   </script>
  59. </html>

图片懒加载:懒加载

  • 4.总结

    • 任何元素，一旦浮动都自动转为块级元素
    • 浮动元素只会影响到它后面的元素布局，对前面没有影响
    • 浮动元素只能水平方向浮动，浮动元素的浮动边界仅限于内容区
    • 浮动元素浮动之后，它后面的元素会自动填充它让出来的空间大小
    • box2 浮动之后从文档流中脱离出来(意思就是它会释放它原来在文档流中占据的空间)
    • 行内元素用于最终内容的载体, 不能充当容器/当父级，不能设置或设置了宽高也是无效的
    • 浮动元素的高度塌陷与解决方案，最简单的解决方案,用到 BFC(块级格式化上下文)，给父元素添加 overflow: hidden 或 overflow: auto;
上一条：浮动元素的高度塌陷与解决方案 overflow下一条：HTML布局 浮动元素高度塌陷原因及解决方案 定位 浮动实现web三列经典布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多