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

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

图片描述
有几种方法呢?

  1. 最容易的应该想到利用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新技术浏览器还没有全面支持。

延伸问题

高度已知换为高度未知呢?
块内内容超出会是怎样的效果?
如果是上下高度已知,中间自适应呢?
如果是两栏布局呢?
如果是上下左右混合布局呢?

顺便打个广告 自学的前端快3个月了想找一份工作,地点北京。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值