页面经典布局（中间固定，两边自适应）

最新推荐文章于 2022-05-25 13:00:43 发布

luckysangchenshi

最新推荐文章于 2022-05-25 13:00:43 发布

阅读量2k

点赞数 2

本文链接：https://blog.csdn.net/luckysangchenshi/article/details/102388839

版权

1.float布局（流体布局）

原理：

左右浮动，中间center盒子设置左右margin，宽度自适应，布局时，center要放在right之后

HTML布局

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div> 
</body>

CSS样式

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .left,
  .right {
    height: 400px;
    background-color: hotpink;
  }

  .left {
    float: left;
    width: 200px;

  }

  .right {
    float: right;
    width: 100px;
  }

  .center {
    height: 400px;
    background-color: skyblue;
  }
</style>

注意

适用PC端，但主要内容无法最先加载，当页面内容较多时，会影响用户体验。

2 BFC规则布局

原理：

BFC不会与浮动元素重叠

HTML布局

<body>
    <div class="left"></div>
    <div class="center"></div> 
    <div class="right"></div>
</body>

CSS样式

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .left,
  .right {
    height: 400px;
    background-color: hotpink;
  }

  .left {
    float: left;
    width: 200px;

  }

  .right {
    float: right;
    width: 100px;
  }

  .center {
    overflow:hidden;
    height: 400px;
    background-color: skyblue;
  }
</style>

注意

与浮动布局一致，适用PC端，但主要内容无法最先加载，当页面内容较多时，会影响用户体验。只是解决了BFC(块格式化上下文)问题。

3 绝对定位布局

原理：

左右两边使用absolute定位，中间center盒子设置左右margin,要处理好top值，否则元素会掉到下一行

HTML

<body>
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</body>

CSS

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .left,
  .right {
    position: absolute;
    height: 400px;
    background-color: hotpink;
  }

  .left {
    top: 0;
    left: 0;
    width: 200px;

  }

  .right {
    top: 0;
    right: 0;
    width: 100px;
  }

  .center {
    margin: 0 100px 0 200px;
    height: 400px;
    background-color: skyblue;
  }
</style>

注意

主要内容可以优先加载，但脱离了文档流，注意清除浮动问题。

4 margin负值法

1）圣杯布局（相对布局）

原理：

先给三个盒子的父级盒子设置padding-left和padding-right，使左右两边留有左右盒子宽度的空白区域，再将三个盒子同时设置左浮动float:left,并使中间盒子宽度100%,这样中间盒子独占一行显示，接着设置左右盒子的margin-left，让三个盒子并排显示，会遮住中间盒子的左右两边的一部分内容，最后左右盒子使用相对定位position: relative并分别配合right和left属性,将盒子定位到左右两边留白的位置。中间center盒子放在最前面。

HTML

<body>
  <div class="wrap">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

CSS

<style>
     * {
      margin: 0;
      padding: 0;
    }
  
    .wrap {
      padding: 0 100px 0 200px;
    }
  
    .left,
    .center,
    .right {
      float: left;
      position: relative;
      height: 400px;
      background-color: hotpink;
    }
  
    .left {
      width: 200px;
      left: -200px;
      margin-left: -100%;
    }
  
    .right {
      width: 100px;
      right: -100px;
      margin-left: -100px;
      
    }
  
    .center {
      width: 100%;
      background-color: skyblue;
    }
</style>

注意

适用移动端，主体内容优先加载，结构简单，样式复杂

2）双飞翼布局

原理：

在中间盒子外包裹一个div，接着将三个盒子一起float左浮动，中间盒子设置为100%，中间盒子独占一行，左右盒子分别设置自己的固定宽度，再设置左右盒子的margin-left，让三个盒子同一行显示，左盒子的margin-left的值和center外层包裹盒子的宽度相等，由于中间盒子包裹了一个div，并且设置了左右的padding值，与左右盒子的宽度一致，这样中间center盒子就不会被遮挡，就不用再使用定位解决，中间center盒子放在最前面。

HTML

<body>
  <div class="wrap">
    <div class="center"></div>
  </div>
  <div class="right"></div>
  <div class="left"></div>
</body>

CSS

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .wrap {
    width: 100%;
    height: 400px;
    background-color: skyblue;
  }

  .left,
  .wrap,
  .right {
    float: left;
    height: 400px;
  }

  .left {
    width: 200px;
    margin-left: -100%;
    background-color: hotpink;
  }

  .right {
    width: 100px;
    margin-left: -100px;
    background-color: hotpink;
  }

  .center {
    margin: 0 100px 0 200px;
  }
</style>

注意

适用移动端，主体内容优先加载，结构复杂，样式简单

圣杯布局和双飞翼布局的总结：

相同点

解决思路都是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

不同点

双飞翼布局比圣杯布局多创建一个div，多了1个div，少用4个css属性，因为不用再相对布局。（双飞翼布局给中间盒子设置了左右间距，这样左右盒子上来后，就会紧贴着中间盒子的外层大盒子，这样就不会遮挡住中间盒子，圣杯布局一开始将左右间距设置给整个大容器，中间盒子100%，左右盒子上来后，就会遮挡中间盒子的内容，需要使用相对定位解决这个问题）

5 CSS3新特性，弹性布局

原理：

外层包裹一个大盒子，设置display:flex,中间的盒子设置flex:1，左右两边盒子的宽度根据自己的需求定义，center盒子一定要放在中间

HTML

<body>
  <div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>

CSS

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .wrap {
    display: flex;
    height: 400px;
  }

  .left,
  .right {
    background-color: hotpink;
  }

  .left {
    width: 200px;

  }

  .right {
    width: 100px;
  }

  .center {
    flex: 1;
    background-color: skyblue;
  }
</style>

使用场景：

适用移动端，主体内容优先加载，但要考虑浏览器的兼容问题（IE8及以下浏览器不兼容）

6 table布局

原理：

将外层的大div设置display: table,设置宽度100%，设置需要的高度，三个盒子同时设置 display: table-cell，左右盒子设置宽度和颜色，中间center盒子设置颜色。

HTML

<body>
  <div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>

CSS

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .wrap {
    display: table;
    width: 100%;
    height: 400px;
   
  }

  .left,
  .center,
  .right {
    display: table-cell;
  }

  .left {
    width: 200px;
    background-color: hotpink;
  }

  .right {
    width: 100px;
    background-color: hotpink;
  }

  .center {
    background-color: skyblue;
  }
</style>

注意

适用PC端，兼容性好，但无法设置栏间距。

7 网格布局grid（HTML5新特性）

原理：

将外层的大div设置display: grid;,设置盒子高度grid-template-rows: 400px，设置左右两边间距grid-template-columns: 200px auto 100px;三个盒子设置各自的颜色就好，中间center盒子必须在中间。

HTML

<body>
  <div class="wrap">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</body>

CSS

<style>
  * {
    margin: 0;
    padding: 0;
  }

  .wrap {
    display: grid;
    width: 100%;
    grid-template-rows: 400px;
    grid-template-columns: 200px auto 100px;
  }

  .left,
  .right {
    background-color: hotpink;
  }

  .center {
    background-color: skyblue;
  }
</style>

注意：

适用移动端，兼容性不好，IE+10以上支持，而且只支持部分属性

参考博客：https://blog.csdn.net/lunhui1994_/article/details/78712496

luckysangchenshi

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
页面经典布局（中间固定，两边自适应）

1.float布局（流体布局）原理：左右浮动，中间center盒子设置左右margin，宽度自适应，布局时，center要放在right之后HTML布局<body> <div class="left"></div> <div class="right"></div> <div class...
复制链接

扫一扫