面试题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个月了想找一份工作,地点北京。

原文链接:segmentfault.com

上一篇:(译)React hooks:它不是一种魔法,只是一个数组——使用图表揭秘提案规则
下一篇:【速记】借助ES6的模版字符串,在不用Babel插件的情况下实现一个轻量级类JSX功能

相关推荐

  • 🔥 从最近流行的一幅 CSS 风景画中学习 2 个知识点

    最近 CodePen 流行的一张用纯 CSS 绘制的风景画令人印象深刻: (/public/upload/d250206ad61c150f0fbec8efcd474c2a) 天空的眩光,睡眠反...

    3 个月前
  • 💫 CSS 幻术 | 抗锯齿

    前言 传统网页的呈现是基于像素单位的,所以图片不能和 SVG 一样进行任意尺寸缩放后还保持边缘平整。也就是说,放大像素逻辑的图片,必然导致可视质量下降(信息失真)。

    1 个月前
  • 💖CSS + JS 送学妹满屏幕小爱心

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ image.png(/public/upload/04aaa24e...

    2 个月前
  • (立下flag)每日10道前端面试题-15 关于【高级技巧】十问

    (/public/upload/4dc64bf14f4bd714fcd87e98b6a10373) 第一问:安全类型检测——typeof和instanceof 区别以及缺陷,以及解决方案 这两...

    2 个月前
  • 黑魔法之 CSS Entry

    大家都知道 webpack 的 Entry 都是 js,如果想输出 css 文件只能在 js 文件里导入 css,所以很多人都会想要是 entry 也可以是 css 那多好,这样就可以任意输出 cs...

    2 年前
  • 高级前端面试题大汇总(只有试题,没有答案)

    面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。有些面试题会重复。 ...

    2 年前
  • 高度等于动态宽度(CSS流体布局)[复制品]

    webtikiThomas Norman(https://stackoverflow.com/users/1811992/webtiki)提出了一个问题:Height equal to dynamic...

    2 年前
  • 面试题|手写JSON解析器

    这周的 Cassidoo 的每周简讯有这么一个面试题:: 写一个函数,这个函数接收一个正确的 JSON 字符串并将其转化为一个对象(或字典,映射等,这取决于你选择的语言)。

    4 个月前
  • 面试题:没有es6老项目,如何用jq解决异步的问题?

    我们都知道es6提供了promise异步写法,但是大部分的公司都是jq写的,那我们如何用Jq来写和promise异步一样的写法呢?这个知道的人不多下面我们就来写写把 注意: 1 JQ 1.5以上 ...

    2 年前
  • 面试题:nginx有配置过吗?反向代理知道吗?

    这篇文章主要是针对跨域进行配置,如果大佬们会配置的话,就不用看了~简述反向代理和正向代理反向代理: 我们将请求发送到服务器,然后服务器对我们的请求进行转发,我们只需要和代理服务器进行通信就好,偷个图:...

    2 个月前

官方社区

扫码加入 JavaScript 社区