简体中文（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

博客列表 >使用定位与浮动完成三列布局-web前端第7章6.18

使用定位与浮动完成三列布局-web前端第7章6.18

希望
希望原创
2020年06月19日 14:57:30846浏览

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

  • 浮动基本特征：
  1. 浮动元素都是块级元素
  2. 浮动元素会脱离原来在文档流中的位置，后面的元素自动填充它让出来的位置
  3. 对前面的元素没有影响
  4. 行内元素，设置不了高宽大小，不能充当容器或父级，所以要把行内元素转变成块级元素才能浮动
  5. 还可以清除浮动元素影响
  6. 浮动元素水平移动，没有办法贴到边框上
  • 浮动元素的高度与塌陷：
  1. 将三个元素同时全部浮动，父元素包不住了，怎么办？
    a. 得去调父级，但是不能自适应
    b. 一级一级去调试，最终影响到html整个布局
    c. 添加一个专用元素来清除浮动
    d. 添加伪元素
    e. 用BFC块级格式化上下文，此方法比较简单，推荐使用
  2. 用BFC块级(overflow: auto/overflow: hidden)实现三个元素同时浮动，图片如下：
    BFC块级
  • 代码如下：
    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 deepskyblue;
    10.     }
    11.     .item {
    12.       width: 100px;
    13.       height: 100px;
    14.     }
    15.     .item:first-of-type {
    16.       background-color: firebrick;
    17.     }
    18.     .item:nth-last-of-type(2) {
    19.       background-color: fuchsia;
    20.     }
    21.     .item:last-of-type {
    22.       background-color: gold;
    23.     }
    24.     .item {
    25.       float: left;
    26.     }
    27.     .container {
    28.       overflow: auto;
    29.     }
    30.   </style>
    31. </head>
    32. <body>
    33.   <div class="container">
    34.     <div class="item">1</div>
    35.     <div class="item">2</div>
    36.     <div class="item">3</div>
    37.   </div>
    38. </body>
    39. </html>

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

    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.       margin: 0;
    11.       padding: 0;
    12.       box-sizing: border-box;
    13.     }
    14.     li {
    15.       list-style: none;
    16.     }
    17.     a {
    18.       text-decoration: none;
    19.       color: #666;
    20.     }
    21.     /* 页眉与页脚 */
    22.     .header,
    23.     .footer {
    24.       height: 40px;
    25.       background-color: lightsteelblue;
    26.     }
    27.     .content {
    28.       width: 960px;
    29.       margin: auto;
    30.       /* background-color: #ccc; */
    31.     }
    32.     .content ul li {
    33.       float: left;
    34.       line-height: 40px;
    35.       padding: 0 15px;
    36.     }
    37.     .content ul li:hover {
    38.       background-color: limegreen;
    39.     }
    40.     /* 页脚 */
    41.     .content p {
    42.       text-align: center;
    43.       line-height: 40px;
    44.     }
    46.     /* 主体用定位来做 */
    47.     .container {
    48.       width: 960px;
    49.       margin: 10px auto;
    50.       /* background-color: seashell; */
    51.       min-height: 600px;
    52.       /* 定位做的，转为定位元素，父级 */
    53.       position: relative;
    54.     }
    55.     .container > .left {
    56.       width: 200px;
    57.       background-color: navajowhite;
    58.       min-height: 600px;
    59.       position: absolute;
    60.       top: 0;
    61.       left: 0;
    62.     }
    63.     .container > .right {
    64.       width: 200px;
    65.       background-color: navajowhite;
    66.       min-height: 600px;
    67.       position: absolute;
    68.       top: 0;
    69.       right: 0;
    70.     }
    71.     .container > .main {
    72.       background-color: plum;
    73.       min-height: 600px;
    74.       width: 540px;
    76.       position: absolute;
    77.       top: 0;
    78.       left: 210px;
    79.     }
    80.   </style>
    81. </head>
    82. <body>
    83.   <!-- 页眉 -->
    84.   <div class="header">
    85.     <div class="content">
    86.       <ul>
    87.         <li><a href="">首页</a></li>
    88.         <li><a href="">会场</a></li>
    89.         <li><a href="">售后</a></li>
    90.       </ul>
    91.     </div>
    92.   </div>
    93.   <!-- 主体 -->
    94.   <div class="container">
    95.     <div class="left">左</div>
    96.     <div class="main">中</div>
    97.     <div class="right">右</div>
    98.   </div>
    99.   <!-- 页脚 -->
    100.   <div class="footer">
    101.     <div class="content">
    102.       <p>教育科技有限公司&copy; | 备案号：*******</p>
    103.     </div>
    104.   </div>
    105. </body>
    106. </html>

    2.使用浮动完成一个三列经典布局，与上面1的图片一样的布局，防止浮动元素塌陷用overflow: hidden，代码如下：

    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.     }
    14.     li {
    15.       list-style: none;
    16.     }
    17.     a {
    18.       text-decoration: none;
    19.       color: #666;
    20.     }
    21.     /* 页眉与页脚 */
    22.     .header,
    23.     .footer {
    24.       height: 40px;
    25.       background-color: lightsteelblue;
    26.     }
    27.     .content {
    28.       width: 960px;
    29.       margin: auto;
    30.       /* background-color: #ccc; */
    31.     }
    32.     .content ul li {
    33.       float: left;
    34.       line-height: 40px;
    35.       padding: 0 15px;
    36.     }
    37.     .content ul li:hover {
    38.       background-color: limegreen;
    39.     }
    40.     /* 页脚 */
    41.     .content p {
    42.       text-align: center;
    43.       line-height: 40px;
    44.     }
    46.     /* 主体用定位来做 */
    47.     .container {
    48.       width: 960px;
    49.       margin: 10px auto;
    50.       /* background-color: seashell; */
    51.       min-height: 600px;
    52.       /* 防止浮动元素塌陷 */
    53.       overflow: hidden;
    54.     }
    55.     .container > .left {
    56.       width: 200px;
    57.       background-color: navajowhite;
    58.       min-height: 600px;
    59.       float: left;
    60.     }
    61.     .container > .right {
    62.       width: 200px;
    63.       background-color: navajowhite;
    64.       min-height: 600px;
    65.       float: right;
    66.     }
    67.     .container > .main {
    68.       background-color: plum;
    69.       min-height: 600px;
    70.       width: 540px;
    71.       float: left;
    72.       margin-left: 10px;
    73.     }
    74.   </style>
    75. </head>
    76. <body>
    77.   <!-- 页眉 -->
    78.   <div class="header">
    79.     <div class="content">
    80.       <ul>
    81.         <li><a href="">首页</a></li>
    82.         <li><a href="">会场</a></li>
    83.         <li><a href="">售后</a></li>
    84.       </ul>
    85.     </div>
    86.   </div>
    87.   <!-- 主体 -->
    88.   <div class="container">
    89.     <div class="left">左</div>
    90.     <div class="main">中</div>
    91.     <div class="right">右</div>
    92.   </div>
    93.   <!-- 页脚 -->
    94.   <div class="footer">
    95.     <div class="content">
    96.       <p>教育科技有限公司&copy; | 备案号：*******</p>
    97.     </div>
    98.   </div>
    99. </body>
    100. </html>
上一条：laravel扩展数据库类下一条：浮动与布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多