CSS(一) 经典布局（两边固定，中间自适应）的五种方式

最新推荐文章于 2024-07-25 14:15:14 发布

置顶 maktubK

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量1.7k

点赞数 2

分类专栏： css 文章标签： css html js 面试定位

本文链接：https://blog.csdn.net/lemaktub/article/details/107138319

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

两边固定，中间自适应

本篇总结五种思路实现方式，

圣杯布局

圣杯布局，方便理解是带有两只耳朵的奖杯，耳朵跟奖杯是一体，所以左右两边跟中间同级，但是content在上面
第一步：中间盒子100%，两边固定宽度，三个盒子依次上下
第二步：子盒子全左浮动 left与right脱离文档流在第二行
第三步：父级盒子不要给宽度，padding：0 200px;留出左右盒子位置
第四步： left 盒子
（1）margin-left:100% 先将浮动元素向上移动一行文档流‘
（2）position：relative；left：自身宽度；微调left位置(此处可以用position：absolute 也行)

第五步：right盒子使用margin-right：自身宽度
第六步：清除浮动，不然可能带来高度塌陷问题

代码如下：

CSS

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      height: 100%;
      overflow: hidden;
    }
 .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
    .main{
      position: relative;
      padding: 0 200px;
      min-height: 400px;
    }
    .content,.left,.right{
      float: left;
    }
    .content{
      width: 100%;
      min-height: 500px;
      background-color: hotpink;
    }
    .left,.right{
      background-color: greenyellow;
      width: 200px;
      min-height: 300px;
    }
    .left{
      margin-left: -100%;
      position: relative;
      left: -200px;
      /* 
        通过absolute
        position: absolute;   
        left: 0;
       */  
      z-index: 1000;
    }
    .right{
      margin-right: -200px;
    }
  </style>

html

<body>
  <div class="main clearfix">
    <div class="content">content</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

双飞翼布局

双飞翼布局，左右两边像是翅膀插在两边，像每一个平凡人一样需要借助外部力量才能飞翔。
所以中间与左右不属于同级
left right 像是翅膀通过margin-left插在左右两边
content 通过margin 调整
第一步：中间父盒子，左右盒子依次上下排开
第二步：中间父盒子，左右盒子全部脱离文档流，中间父盒子设置100%独占一行
第三步：中间盒子通过margin值调整 margin：0 200px 给左右盒子腾出位置
第四步：left盒子，通过margin-left:-100% 向上一行文档流
第五步：right盒子通过margin-left:-200px 调整位置
第六步：清除浮动，不然可能带来高度塌陷问题

CSS

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      height: 100%;
      overflow: hidden;
    }

    .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }
    .main,.left,.right{
      float:left;
    }
    .main{
      width: 100%;
      /* min-height: 400px;
      background-color: pink; */

    }
    .content{
      margin: 0 200px;
      height: 500px;
      background-color: pink;

    }
    .left,.right{
      width: 200px;
      height: 300px;
      background-color: greenyellow;
    }
    .left{
      margin-left: -100%;
    }
    .right{
      margin-left: -200px;
    }
  </style>

html

<body class="clearfix">
  <div class="main">
    <div class="content">content</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</body>

calc()函数

width：calc（100%-400px）
注意：
calc() 函数用于动态计算长度值。
运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
步骤：
一：左中右盒子依次上下排开
二：赋值宽度 left right 200px
中间 100% -400px
三：子盒子浮动

缺点只兼容到ie9 计算会阻塞加载对渲染不友好

CSS

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      height: 100%;
      overflow: hidden;
    }
    .main{
      width: 100%;
    }
    .content,.left,.right{
      float:left;
    }
    .left,.right{
      width: 200px;
      min-height: 300px;
      background-color: greenyellow;
    }
    .content{
      width: calc(100% - 400px);
      min-height: 400px;
      background-color: indianred;
    }
  </style>

html

<body>
  <div class="main">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
  </div>
</body>

定位

定位也是比较常见的实现布局的方式
中间盒子 margin：0 200px
左右分别使用定位去到对应为位置即可

html

<body>
  <div class="main">
    <div class="content">content</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>

CSS

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      height: 100%;
      overflow: hidden;
    }
    .main{
      position: relative;
      width: 100%;
      min-height: 400px;
    }
    .content{
      margin: 0 200px;
      min-height: 400px;
      background-color: pink;
    }
    .left,.right{
      position: absolute;
      width: 200px;
      height: 300px;
      background-color: yellowgreen;
    }
    .left{
      left: 0;
      top: 0;
    }
    .right{
      top: 0;
      right: 0;
    }
  </style>

Flex

flex 是个人觉得布局最方便的方式了。而且兼容性也越来越好，代码简洁
父容器 flex 中间盒子flex：1 即可
CSS

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,
      body {
        overflow: hidden;
      }
    .box{
      height: 100vh;
      display: flex;

    }
    .left,.right{
      width: 200px;
      min-height: 500px;
      background-color: greenyellow;
    }
    .content{
      background-color: pink;
      min-height: 500px;
      flex: 1;
    }
  </style>

html

<body>
  <div class="box">
    <div class="left">left</div>
    <div class="content">content</div>
    <div class="right">right</div>
  </div>
</body>

总结

实现的方式有很多种，这个问题算是面试比较基础的吧，还有别的方式，像利用table，grid（栅格，有一定兼容性）等来实现
另外布局时，建议尽量减少定位和浮动来布局，在考虑兼容的同时实现快速布局，推荐flex

是本人第一篇博客，写的比较简单，主要还是为了方便自己闲暇时间可以扫一眼。依次养成一个良好习惯。记得刚入行时，有一个面试官问我，你每天除了工作，主动学习前端技术的时间平均有多少。当时真是充满愧疚哈哈。
代码源自于从一些资料，教程总结，亲测有效。侵删。

全力以赴奔向你le。

maktubK

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
CSS(一) 经典布局（两边固定，中间自适应）的五种方式

两边固定，中间自适应本篇总结五种思路实现方式，圣杯布局圣杯布局，方便理解是带有两只耳朵的奖杯，耳朵跟奖杯是一体，所以左右两边跟中间同级，但是content在上面第一步：中间盒子100%，两边固定宽度，三个盒子依次上下第二步：全员float：left， left与right 在第二行脱离文档流第三步：父级盒子不要给宽度，margin：0 200px 留出左右盒子位置第四步：left 盒子（1）margin-left:100% 将浮动元素向上移动一行文档流‘（2）positi
复制链接

扫一扫

专栏目录