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

leanxi 发布于2019-08-29 17:22 / 1544人阅读

摘要：优点相比之前布局更具有灵活性缺点脱离文档流，下面的元素都受影响。

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

有几种方法呢？

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

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


  
    
      
      
      
        float 
        float浮动划分左中右

css代码

.main {
      height: 100px;
    }

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

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

    .center {
      background-color: gold;
    }

总结 优缺点，要理解优缺点，首先要明白什么是浮动
浮动布局的原理：对元素设置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;
    }

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


    
      
      
        flex 
        flex浮动划分左中右

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

超融合服务器服务器托管自适应宽度宽度自适应自适应宽度按钮 rem宽度自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114279.html

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

摘要：优点相比之前布局更具有灵活性缺点脱离文档流，下面的元素都受影响。面试题目假设高度已知，请写出三栏布局，左右300px，中间自适应 showImg(https://segmentfault.com/img/bVbj39Y?w=1152&h=648);有几种方法呢？最容易的应该想到利用float来写，代码如下 css样式代码，以下五种都是用一个样式代码 ...

goji 2019-08-05 15:34 评论0 收藏0
前端面试题（总结）

摘要：为何只要写不基于标准通用标记语言，所以不需要引用，但需要来规范浏览器的行为使得浏览器知道应该以何种解析方式对文档进行解析基于，所以要引用才能告知浏览器文档所使用的文档类型讲讲行内元素块元素空元素有哪些行内元素，，，，，，，标记性元素块元素， HTML 1.HTML5为何只要写 HTML5不基于SGML（标准通用标记语言），所以不需要引用DTD，但需要doctype来规范浏览器的行为（...

AlphaWatch 2019-08-02 16:02 评论0 收藏0
前端面试题（总结）

摘要：为何只要写不基于标准通用标记语言，所以不需要引用，但需要来规范浏览器的行为使得浏览器知道应该以何种解析方式对文档进行解析基于，所以要引用才能告知浏览器文档所使用的文档类型讲讲行内元素块元素空元素有哪些行内元素，，，，，，，标记性元素块元素， HTML 1.HTML5为何只要写 HTML5不基于SGML（标准通用标记语言），所以不需要引用DTD，但需要doctype来规范浏览器的行为（...

kelvinlee 2019-08-05 14:10 评论0 收藏0
前端面试题（总结）

摘要：为何只要写不基于标准通用标记语言，所以不需要引用，但需要来规范浏览器的行为使得浏览器知道应该以何种解析方式对文档进行解析基于，所以要引用才能告知浏览器文档所使用的文档类型讲讲行内元素块元素空元素有哪些行内元素，，，，，，，标记性元素块元素， HTML 1.HTML5为何只要写 HTML5不基于SGML（标准通用标记语言），所以不需要引用DTD，但需要doctype来规范浏览器的行为（...

lpjustdoit 2019-08-30 15:53 评论0 收藏0
CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

includecmath 2019-08-29 12:17 评论0 收藏0