常用到的布局方式

最新推荐文章于 2022-07-20 02:31:28 发布

huyuehuyuehu

最新推荐文章于 2022-07-20 02:31:28 发布

阅读量343

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/huyuehuyuehu/article/details/111156215

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

掌握几大经典布局

有圣杯布局、双飞翼布局、左右固定中间自适应定位实现，还有flex弹性伸缩布局，grid网格布局，table-cell布局等等

圣杯布局

稍微说明一下： 浮动和负margin

html代码中 middle部分首先要放在container的最前部分。然后是left,right

**1.**将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）

**2.**middle部分 width:100%占满

**3.**此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%

**4.**这时left拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围container加上 padding:0 220px 0 200px

**5.**middle内容拉回来了，但left也跟着过来了，所以要还原，就对left使用相对定位 left:-200px 同理，right也要相对定位还原 right:-220px

**6.**到这里大概就自适应好了。如果想container高度保持一致可以给left middle right都加上min-height:130px

不过衰衰地发现ie中有问题… ie6/7/8/9中下面的空白高度都不一样…

当然，为了保证窗口不能缩太小无法展示左右，可以给body加上 min-width

代码敬上：

<style type="text/css">
  body {
    min-width: 600px;  /* 2x leftContent width + rightContent width */
    font-weight: bold;
    font-size: 20px;
  }
 
  #header, #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #footer {
    clear: both;
  }
 
  #container {
    padding-left: 200px;   /* leftContent width   为左右两列预留出相应的空间*/
    padding-right: 150px;  /* rightContent width */
    overflow: hidden;
  }
 
  #container .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
 
  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }
 
  #left {
    width: 200px;           /* leftContent width */
    right: 200px;           /* leftContent width */
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
 
  #right {
    width: 150px;           /* rightContent width */
    margin-right: -150px;   /* rightContent width */
    background: rgb(231, 105, 2);
  } 
</style>

<div id="header">#header</div>
  <div id="container">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>

整个布局的DOM结构，主体部分是由container包裹的center,left,right三列，其中center定义在最前面

最后一步，那就是页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+150=350px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px

双飞翼布局

浮动和负margin

听说双飞翼布局是玉伯大大提出来的，始于淘宝UED

如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方.

其实跟上边的圣杯布局差不多的，当然也可以改动一下（自己想想有哪些不同吧）

恩，这里有一只鸟~

左翅sub有200px,右翅extra…220px… 身体main自适应未知

**1.**html代码中，main要放最前边，sub extra

**2.**将main sub extra 都float:left

**3.**将main占满 width:100%

**4.**此时main占满了，所以要把sub拉到最左边，使用margin-left:-100% 同理 extra使用margin-left:-220px

（这时可以直接继续上边圣杯布局的步骤，也可以有所改动）

**5.**main内容被覆盖了吧，除了使用外围的padding，还可以考虑使用margin。

给main增加一个内层div-- main-inner, 然后margin:0 220px 0 200px

**6.**main正确展示

代码敬上：

body {
    min-width: 500px;  
    font-weight: bold;
    font-size: 20px;
  }
 
  #header, #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #footer {
    clear: both;
  }
 
  #container {
    width: 100%;
    overflow: hidden;
  }
 
  .column {
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
 
  #center {
    padding-left: 200px;   /* leftContent width */
    padding-right: 150px;  /* rightContent width */
    background: rgb(206, 201, 201);
  }
 
  #left {
    width: 200px;           /* leftContent width */
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
 
  #right {
    width: 150px;           /* rightContent width */
    margin-left: -150px;
    background: rgb(231, 105, 2);
  }

<div id="header">#header</div>
<div id="container" class="column">
    <div id="center">#center</div>
</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>
<div id="footer">#footer</div>

双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上

圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。

=>左右固定，中间自适应定位的三种方式

方案一

左右设置绝对定位，定宽，中间设置margin-left margin-right

<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  body {
    width: 100%; 
    overflow: hidden;
    font-weight: bold;
    font-size: 20px;
  } 
  .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
 
  #left {
    width: 200px;           /* leftContent width */
    background: rgba(95, 179, 235, 0.972);
    position: absolute;
    top: 0;
    left: 0;
  }
 
  #right {
    width: 150px;           /* rightContent width */
    background: rgb(231, 105, 2);
    position: absolute;
    top: 0;
    right: 0;
  } 
 
  #center {
    background: rgb(206, 201, 201);
    margin-left: 200px;
    margin-right: 150px;
  }
</style>

<div id="left" class="column">#left</div>
<div id="center" class="column">#center</div>
<div id="right" class="column">#right</div>

方案二

**采用负边距处理。**左中右都float：left;

中间的div里边再设置一个div ,外层div占满 width:100%; 内层div使用margin-left 和margin-right

左边加上负边距 margin-left:-100% 拉回最左端

右边加上负边距 margin-left:-220px (即为右边的宽度)拉回最右端

<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  body {
    width: 100%; 
    overflow: hidden;
    font-weight: bold;
    font-size: 20px;
  } 
  .column {
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
 
  #left {
    width: 200px;           /* leftContent width */
    background: rgba(95, 179, 235, 0.972);
    margin-left: -100%;
  }
 
  #right {
    width: 150px;           /* rightContent width */
    background: rgb(231, 105, 2);
    margin-left: -150px;
  } 
  
  #center{
    width: 100%;
  }
  #center .center-inner {
    background: rgb(206, 201, 201);
    margin-left: 200px;
    margin-right: 150px;
  }
</style>

<div id="center" class="column">
    <div class="center-inner">#center</div>
</div>
<div id="left" class="column">#left</div>
<div id="right" class="column">#right</div>

方案三

左边使用float:left 右边用float:right，html代码中的中间部分要放后边

<style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .left {
      float: left;
      width: 200px;
      border: 1px solid #333;
      background: #aaa;
    }

    .right {
      float: right;
      width: 220px;
      background: #aaa;
    }

    .middle {
      margin-left: 200px;
      margin-right: 220px;
      border: 1px solid #333;
      background: #ccc;
      word-break: break-all;
    }
  </style>

<div class="left">
    <h4>left</h4>
    <p>oooooooooooooo
      0000000000000000
      00000000000000000
      ooooooooooooooo
      ooooooooooooooo
      000000000000000</p>
  </div>
  <div class="right">
    <h4>right</h4>
    <p>BBBBBBBBBBBBBB
      888888888888888888
      BBBBBBBBBBBBBBBBBB
      88888888888888888888</p>
  </div>
  <div class="middle">
    <h4>middle</h4>
    <p>HHHHHHHHHHHHHHHHHHHHHH
      hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
      HHHHHHHHHHHHHHHHHHHHHH
      hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    </p>
  </div>

display: flex弹性伸缩布局

header和footer设置样式，横向撑满。
container中的left、center、right依次排布即可
给container设置弹性布局 display: flex;

left和right区域定宽，center设置 flex: 1; 即可

<style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    #header,#footer{
      width: 100%;
      height: 40px;
      background-color: yellowgreen;
      text-align: center;
      line-height: 40px;
    }
    .column{
      height: 400px;
      text-align: center;
      line-height: 400px;
    }
    #container{
      display: flex;
    }
    #left{
      width: 200px;
      background-color: slateblue;
    }
    #right{
      width: 150px;
      background-color:tomato;
    }
    #center{
      flex: 1;
      background-color: thistle;
    }
  </style>


<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="left" class="column">#left</div>
    <div id="center" class="column">#center</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
</body>

使用calc

<style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #main {
      width: 100%;
      font-weight: bold;
      font-size: 20px;
      position: relative;
    }
    .column{
      height: 400px;
      text-align: center;
      line-height: 400px;
    }
    #left{
      float: left;
      width: 200px;
      background-color: slateblue;
    }
    #center{
      width: calc(100% - 350px);
      background-color: thistle;
      position: absolute;
      top: 0;
      left: 200px;
    }
    #right{
      float: right;
      width: 150px;
      background-color:tomato;
    }
  </style>

<div id="main">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
</div>

grid网格布局

我们把body划分成三行四列的网格，其中有5条列网格线

给body元素添加display: grid;属性变成一个grid(网格)
给header元素设置grid-row: 1; 和 grid-column: 1/5; 意思是占据第一行网格的从第一条列网格线开始到第五条列网格线结束
给footer元素设置grid-row: 3; 和 grid-column: 1/5; 意思是占据第三行网格的从第一条列网格线开始到第五条列网格线结束
给left元素设置grid-row: 2; 和 grid-column: 1/2; 意思是占据第二行网格的从第一条列网格线开始到第二条列网格线结束
给center元素设置grid-row: 2; 和 grid-column: 2/4; 意思是占据第二行网格的从第二条列网格线开始到第四条列网格线结束
给right元素设置grid-row: 2; 和 grid-column: 4/5; 意思是占据第二行网格的从第四条列网格线开始到第五条列网格线结束

<style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body {
      min-width: 550px;
      font-weight: bold;
      font-size: 20px;
      display: grid;
    }
    #header,#footer{
      height: 40px;
      background-color: yellowgreen;
      text-align: center;
      line-height: 40px;
    }
    #header{
      grid-row: 1;
      grid-column: 1/5;
    }
    #footer{
      grid-row: 3;
      grid-column: 1/5;
    }
    .column{
      height: 400px;
      text-align: center;
      line-height: 400px;
    }
    #left{
      grid-row: 2;
      grid-column: 1/2;
      background-color: slateblue;
    }
    #center{
      grid-row: 2;
      grid-column: 2/4;
      background-color: thistle;
    }
    #right{
      grid-row: 2;
      grid-column: 4/5;
      background-color:tomato;
    }
  </style>

<div id="header">#header</div>
<div id="left" class="column">#left</div>
<div id="center" class="column">#center</div>
<div id="right" class="column">#right</div>
<div id="footer">#footer</div>

最近在复习，发现好多知识点都快忘了，所以记录一下…

huyuehuyuehu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
常用到的布局方式

掌握几大经典布局有圣杯布局、双飞翼布局、左右固定中间自适应定位实现，还有flex弹性伸缩布局，grid网格布局，table-cell布局等等圣杯布局稍微说明一下：浮动和负marginhtml代码中 middle部分首先要放在container的最前部分。然后是left,right**1.**将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）**2.**middle部分 width:100%占满**3.**此时middle占满了，所以
复制链接

扫一扫