百度前端学院第7-8天的5个布局，仅供大家参考，有问题留言

于 2020-04-13 22:18:09 发布
阅读量150 收藏
点赞数
文章标签： css3 html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43274526/article/details/105499175
版权

百度前端学院第7-8天

分别尝试使用Float、Position或者Flexbox来实现如下需求：

  • 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度

    第一种:

    实现要点:.less的宽度设为30%，.much的宽度设为70%，.much设置float:right，并且margin-top:-300px(.less的高度)

    <!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>任务一</title>
 <style>
   .main {
     width: 100%;
     background-color: yellowgreen;
   }

   .less {
     width: 30%;
     height: 300px;
     background-color: tomato;
     text-align: center;
     line-height: 300px;
   }

   .much {
     width: 70%;
     height: 300px;
     background-color: violet;
     float: right;
     margin-top: -300px;
     text-align: center;
     line-height: 300px;
   }
 </style>
</head>

<body>
 <!-- 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度 -->
 <!-- 实现方法: 
   .less的宽度设为30%，.much的宽度设为70%，.much设置float:right，并且margin-top:-300px(.less的高度)
 -->
 <div class="main">
   <div class="less">
     <h2>30%宽度</h2>
   </div>
   <div class="much">
     <h2 class>70%宽度</h2>
   </div>
 </div>
</body>

</html>

    第二种:

    实现要点:.less的宽度设为30%，.much的宽度设为70%，.less设置float:left,此时.less会脱离文档流，.much会占据.less的位置，再用margin-left: 30%;使.much

    向右偏移30%的距离。

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .main {
      width: 100%;
      background-color: yellowgreen;
    }

    .less {
      width: 30%;
      height: 300px;
      background-color: tomato;
      float: left;
    }

    .much {
      width: 70%;
      height: 300px;
      background-color: violet;
      margin-left: 30%;
      

    }
  </style>
</head>

<body>
  <!-- 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度 -->
</body>
<div class="main">
  <div class="less">
    30%宽度
  </div>
  <div class="much">
    70%宽度
  </div>
</div>

</html>

    第三种:

    实现要点:.less的宽度设为30%，.much的宽度设为70%，.less设置float:left，.much设置float:right

    <!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   .main {
     width: 100%;
     background-color: yellowgreen;
   }

   .less {
     width: 30%;
     height: 300px;
     background-color: tomato;
     float: left;
   }

   .much {
     width: 70%;
     height: 300px;
     background-color: violet;
     /* margin-left: 30%; */
     float: right;

   }
 </style>
</head>

<body>
 <!-- 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度 -->
</body>
<div class="main">
 <div class="less">
   30%宽度
 </div>
 <div class="much">
   70%宽度
 </div>
</div>

</html>

    以上都用的float(浮动)来实现

    **第四种: ** 绝对定位

    实现要点:.less的宽度设为30%，.much的宽度设为70%，给.much开启绝对定位后它会脱离文档流，原来的空间也会被删除，变成块级元素，给.main开启相对定位，使它成为.much的包含块，然后通过偏移属性top: 0;left: 30%;使.much回到右上角。

    <!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   .main {
     width: 100%;
     background-color: yellowgreen;
     position: relative;
   }

   .less {
     width: 30%;
     height: 300px;
     background-color: tomato;

   }

   .much {
     width: 70%;
     height: 300px;
     background-color: violet;
     position: absolute;
     top: 0;
     left: 30%;
   }
 </style>
</head>

<body>
 <!-- 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度 -->
</body>
<div class="main">
 <div class="less">
   30%宽度
 </div>
 <div class="much">
   70%宽度
 </div>
</div>

</html>

    第五种:

    实现方法: 相对定位

    给.much设置相对定位，相对定位不会脱离文档流，也不会改变元素盒类型，相对定位会根据原来的位置进行偏移，并且原来的空间还会保留，再用top: -300px;left: 30%;进行偏移

    <!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   .main {
     width: 100%;
     background-color: yellowgreen;
     position: relative;
   }
   .less {
     width: 30%;
     height: 300px;
     background-color: tomato;
   }

   .much {
     width: 70%;
     height: 300px;
     background-color: violet;
     position: relative;
     top: -300px;
     left: 30%;
   }
 </style>
</head>

<body>
 <!-- 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度 -->
</body>
<div class="main">
 <div class="less">
   30%宽度
 </div>
 <div class="much">
   70%宽度
 </div>
</div>

</html>

    第六种:

    **实现方法:**固定定位

    固定定位和绝对定位相似，但它的包含块是当前视口，所以偏移的时候要考虑body的marign值。

    <!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   .main {
     width: 100%;
     background-color: yellowgreen;
    
   }

   .less {
     width: 30%;
     height: 300px;
     background-color: tomato;

   }

   .much {
     width: 70%;
     height: 300px;
     background-color: violet;
     position: fixed;
     top: 8px;
     left: 30%;

   }
 </style>
</head>

<body>
 <!-- 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度 -->
</body>
<div class="main">
 <div class="less">
   30%宽度
 </div>
 <div class="much">
   70%宽度
 </div>
</div>

</html>

    以上都用的position(定位)来实现

    第七种:

    实现方法:flex(伸缩盒)

    将父元素实现为flex(伸缩盒模式),就会自动排列成2栏

    <!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
   .main {
     width: 100%;
     background-color: yellowgreen;
     display: flex;
   }

   .less {
     width: 30%;
     height: 300px;
     background-color: tomato;

   }

   .much {
     width: 70%;
     height: 300px;
     background-color: violet;

   }
 </style>
</head>

<body>
 <!-- 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度 -->
</body>
<div class="main">
 <div class="less">30%宽度</div>
 <div class="much">70%宽度</div>
</div>

</html>

+++++

  • 实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化

    第一种:

    实现方法:display:table，父元素display：table，子元素display：table-cell，设置固定宽度（常用）

    <body>
  <div class="wrapper" id="wrapper">
    <div class="left">左侧固定宽度</div>
    <div class="right">右侧宽度自适应</div>
  </div>
</body>

    .wrapper {
      width: 100%;
      height: 300px;
      background-color: orange;
      display: table;
    }

    .left {
      width: 100px;
      background-color: palegreen;
      display: table-cell;
    }

    .right {
      background-color: pink;
      display: table-cell;
    }

    第二种:

    **实现方法:**固定宽度div左浮动，自适应div margin-left等于固定宽度

    <body>
 <div class="wrapper" id="wrapper">
   <div class="left">左侧固定宽度</div>
   <div class="right">右侧宽度自适应</div>
 </div>
</body>

    .wrapper {
     width: 100%;
     height: 300px;
     background-color: orange;
   }
   .left {
     width: 100px;
     background-color: palegreen;
     float: left;
   }
   .right {
     background-color: pink;
     margin-left: 100px;
   }

    第三种:

    **实现方法:**定位，固定宽度div绝对定位absolute，自适应margin-left（绝对定位元素脱离正常文档流）

    .wrapper {
     width: 100%;
     height: 300px;
     background-color: orange;
   }
   .left {
     width: 100px;
     background-color: palegreen;
     position: absolute;
   }
   .right {
     background-color: pink;
     margin-left: 100px;
   }

    第四种:

    实现方法:flex方案

    .wrapper {
      width: 100%;
      height: 300px;
      background-color: orange;
      display: flex;
      align-items: flex-start;
    }

    .left {
      width: 100px;
      background-color: palegreen;
      flex: 0 0 auto
    }

    .right {
      background-color: pink;
      flex: 1 1 auto;
    }

    第五种:

    实现方法:grid方案

     .wrapper {
      width: 100%;
      height: 300px;
      background-color: orange;
      display: grid;
      align-items: start;
      grid-template-columns: 100px 1fr;
    }

    .left {
      width: 100px;
      background-color: palegreen;
      grid-column: 1;
      box-sizing: border-box;
    }

    .right {
      background-color: pink;
      grid-column: 2;
      box-sizing: border-box;
    }

    第六种:

    实现方法:

++++

  • 实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化

    第一种:

**实现方法:****应用float和margin，应用float和margin

html

<body>
  <div class="wrapper" id="wrapper">
    <div class="right">右侧固定宽度</div>
    <div class="left">左侧宽度自适应</div>
  </div>
</body>

CSS

 .wrapper {
      width: 100%;
      height: 300px;
      background-color: orange;
    }
    .left {

      background-color: palegreen;
      margin-right: 200px;
      height: 100%;
    }
    .right {
      width: 200px;
      background-color: pink;
      float: right;
      height: 100%;
    }

第二种:

实现方法:display:table-cell的应用

html

<body>
  <div class="wrapper" id="wrapper">
    <div class="right">右侧固定宽度</div>
    <div class="left">左侧宽度自适应</div>
  </div>
</body>

CSS

.wrapper {
      width: 100%;
      height: 300px;
      background-color: orange;
      display: table;
    }

    .left {
      display: table-cell;
      background-color: palegreen;

      height: 100%;
    }

    .right {
      display: table-cell;
      width: 200px;
      background-color: pink;
      height: 100%;
    }

第三种:

实现方法:flex布局

html

<body>
  <div class="wrapper" id="wrapper">
    <div class="left">左侧宽度自适应</div>
    <div class="right">右侧固定宽度</div>
  </div>
</body>

css

.wrapper {
      width: 100%;
      height: 300px;
      background-color: orange;
      display: flex;
    }

    .left {
      background-color: palegreen;
      height: 100%;
      flex: 1 1 auto;
    }

    .right {
      flex: 0 0 auto;
      width: 200px;
      background-color: pink;
      height: 100%;
    }

第四种:

实现方法:定位和calc()和属性偏移

html

<body>
  <div class="wrapper" id="wrapper">
    <div class="left">左侧宽度自适应</div>
    <div class="right">右侧固定宽度</div>
  </div>
</body>

css

.wrapper {
      width: 100%;
      height: 300px;
      background-color: orange;
      position: relative;
    }

    .left {
      background-color: palegreen;
      height: 100%;
      width: calc(100% - 200px);
    }

    .right {

      width: 200px;
      background-color: pink;
      height: 100%;
      position: absolute;
      top: 0px;
      right: 0px;
    }

  • 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化

    第一种:

    **实现方法:**双float

    html

    <body>
  <!-- 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化  -->
  <div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="middle">middle</div>
  </div>
</body>

    css

    .left {
      width: 200px;
      height: 400px;
      background-color: salmon;
      float: left;
    }

    .right {
      width: 200px;
      height: 400px;
      background-color: springgreen;
      float: right;
    }

    .middle {
      margin: 0 200px;
      height: 400px;
      background-color: violet;
    }

    ***注意:***先写左边的div，再写右边的div，最后写中间的。假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。参考

    第二种:

    实现方法:父盒子相对定位，子盒子绝对定位

    html

    <body>
  <!-- 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化  -->
  <div class="container">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
  </div>
</body>

    css

     .container {
      position: relative;
      margin: 0 auto;
    }

    .left {
      width: 200px;
      height: 400px;
      background-color: salmon;
      position: absolute;
      top: 0px;
      left: 0px;
    }

    .right {
      width: 200px;
      height: 400px;
      background-color: springgreen;
      position: absolute;
      top: 0px;
      right: 0px;
    }

    .middle {
      margin: 0 200px;
      height: 400px;
      background-color: violet;
    }

  • 实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化

    第一种:

    实现方法:伸缩盒模型

    html

    <body>
  <!-- 实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化 -->
  <div class="container">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
  </div>
</body>

    css

     .container {
      width: 100%;
      display: flex;
    }

    .left {
      width: 200px;
      height: 400px;
      background-color: salmon;
      flex: 0 0 auto;
    }

    .middle {
      width: 200px;
      height: 400px;
      background-color: teal;
      flex: 0 0 auto;
    }
    .right {
      height: 400px;
      background-color: yellow;
      flex: 1 1 auto;
    }

    第二种:

    实现方法:父元素:table,子元素table-cell,自适应的元素不设置width

    html

    <body>
  <!-- 实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化 -->
  <div class="container">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
  </div>
</body>

    css

     .container {
      width: 100%;
      display: table;
    }

    .left {
      width: 200px;
      height: 400px;
      background-color: salmon;
      display: table-cell;
    }

    .middle {
      width: 200px;
      height: 400px;
      background-color: teal;
      display: table-cell;
    }

    .right {
      display: table-cell;
      height: 400px;
      background-color: yellow;
      flex: 1 1 auto;

    }
weixin_user911
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值