面试题CSS盒子模型，左右固定宽度，中间自适应的五种死法

最新推荐文章于 2022-04-22 10:58:48 发布

weixin_33872660

最新推荐文章于 2022-04-22 10:58:48 发布

阅读量503

点赞数

文章标签：面试前端 ViewUI

原文链接：https://segmentfault.com/a/1190000017137255

版权

面试题目假设高度已知，请写出三栏布局，左右300px，中间自适应

图片描述
有几种方法呢？

最容易的应该想到利用float来写，代码如下

css样式代码，以下五种都是用一个样式代码

<section>
  <article>
    <div class="container">
      <div class="main left"></div>
      <div class="main right"></div>
      <div class="main center">
        <h1>float </h1>
        <p>float浮动划分左中右</p>
      </div>
    </div>
  </article>
</section>

css代码

.main {
      height: 100px;
    }

    .left {
      float: left;
      width: 300px;
      background-color: green;
    }

    .right {
      float: right;
      width: 300px;
      background-color: gray;
    }

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

图片描述

总结优缺点，要理解优缺点，首先要明白什么是浮动
浮动布局的原理：对元素设置float:left或者right，使元素脱离文档流，同时显示为类似display:inline-block的形式（可以定义宽高，但是又不会换行）。
优点相比之前table布局更具有灵活性
缺点脱离文档流，下面的元素都受影响。并且要使用 clear:both 清除浮动父类添加clearfix类。

.clearfix:after{content:"";height:0;display:block;clear:both}
.clearfix{*display:inline-block}
.clearfix{*display:block;}

2 . position 定位方法实现
代码格式如下

.position-left {
      width: 300px;
      background-color: green;
      position: absolute;
      left: 0;
    }
    .position-right {
      width: 300px;
      background-color: gray;
      position: absolute;
      right: 0;
    }
    .position-center {
      background-color: gold;
      position: absolute;
      left: 300px;
      right: 300px;
    }

position 定位优缺点
优点: 每个元素的显示位置相对独立，方便每个元素的控制,使用定位属性，结合边偏移属性，可以将元素放置在任何需要的位置，这样做的好处在于，无需考虑元素本身的显示方式和页面代码中所处的位置，直接将元素分离出来进行定位。
缺点:每个元素独立控制，很难预测元素之间的相互影响，同时也可能发生元素重叠的情况，导致部分内容无法正常显示.

3.flex布局实现方法代码如下

.flex {
      margin-top: 160px;
      display: flex;
    }
    .flex-left {
      width: 300px;
      background-color: green;
    }
    .flex-right {
      width: 300px;
      background-color: gray;
    }
    .flex-center {
      flex: 1;
      background-color: gold;
    }

样式有稍微的改动代码如下

<article>
    <div class="flex">
      <div class="main flex-left"></div>
      <div class="main flex-center">
        <h1>flex </h1>
        <p>flex浮动划分左中右</p>
      </div>
      <div class="main flex-right"></div>
    </div>
  </article>

flex 布局的优缺点
优点：Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。现在是主流响应式布局开发的主力，任何一个容器都可以指定为 Flex 布局。
缺点：不支持IE8及以下的浏览器

4、表格布局代码如下

    .table {
      width: 100%;
      display: table;
      margin-top: 30px;
    }
    .table-left {
      display: table-cell;
      width: 300px;
      background-color: green;
    }
    .table-right {
      display: table-cell;
      width: 300px;
      background-color: gray;
    }
    .table-center {
      display: table-cell;
      background-color: gold;
    }

优点表格布局的兼容性很好，在flex布局不兼容的时候，可以尝试表格布局
缺点一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高，有时候这种效果不是我们想要的
5、网格布局
代码如下

  .gird {
      display: grid;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
      margin-top: 30px;
    }
    .gird-left {
      background-color: green;
    }
    .gird-right {
      background-color: gray;
    }
    .gird-center {
      background-color: gold;
    }

优点
1 能大大的提高网页的规范性和可重用性。在栅格系统下，将页面模块的尺寸标准化，这对于大型网站的开发和维护来说，能节约不少成本；
2 基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验；
3 对于设计师们来说，灵活的运用栅格系统，能做出很多优秀和独特的设计。
缺点 css新技术浏览器还没有全面支持。