前端面试必问的布局

时间  2019-11-06
标签 前端 面试 布局 栏目 快乐工作 繁體版
原文   原文链接

两栏布局

特征：一栏固定宽，一栏自适应。

  • float浏览器

    • 代码实现
      body,
.container{
    margin: 0;
    padding: 0;
}
.left{
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
.right{
    margin-left: 100px;
    height: 100px;
    background: blue;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
复制代码

  • position: absolute布局

    • 代码实现
      body,
.container{
    margin: 0;
    padding: 0;
}
.left{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    background: red;
}
.right{
    margin-left: 100px;
    height: 100px;
    background: blue;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>
复制代码

  • BFCflex

    • 解释:
      • 右侧设置的overflow: hidden会触发块级格式化上下文(BFC) 具备BFC特性的元素能够看做是隔离了的独立容器，容器里面的元素不会在布局上影响外面的元素，而且BFC具备普通元素没有特性：以下边距不发生折叠；能够清楚浮动；能够阻止元素被覆盖。正由于有了这些特性，因此右边能够用触发BFC的元素来清除左边的浮动的影响。
      • 触发了BFC的元素依然会保持流体特性，也就是说BFC元素虽然不与浮动交集，自动退避浮动元素宽度的距离，但自己做为普通元素的流体特性依然存在，反映在布局上就是自动填满除去浮动内容之外的剩余空间
    • 代码实现
      .container{
    margin: 0;
    padding: 0;
}
.left{
    float: left;
    width: 100px;
    height: 100px;
    background: red;
}
.right{
    overflow: hidden;
    height: 100px;
    background: blue;
}

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
复制代码

  • flexspa

    • 代码实现
      .container{
    margin: 0;
    padding: 0;
    display: flex;
}
.left{
    width: 100px;
    height: 100px;
    background: red;
}
.right{
    flex-grow: 1;
    height: 100px;
    background: blue;
}

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>
复制代码

特征：一栏不定宽，一栏自适应。

  • float-overflow:hiddencode

    • 代码实现
      .container{
    zoom: 1;
}
.left{
    float: left;
    background: red;
}
.right{
    overflow: hidden;
    height: 100px;
    background: blue;
    zoom: 1;
}

<div class="container">
  <div class="left">
      <p>11111111111111111111</p>
  </div>
  <div class="right"></div>
</div>
复制代码

  • flex 布局it

    • 代码实现
      .container{
    display: flex;
}
.left{
    background: red;
}
.right{
    flex-grow: 1;
    background: blue;
}

<div class="container">
  <div class="left">
      <p>11111111111111111111</p>
  </div>
  <div class="right"></div>
</div>
复制代码

  • grid布局io

    • 代码实现
      .container{
    display: grid;
    grid-template-columns:auto 1fr;
}
.left{
    background: red;
}
.right{
    background: blue;
}

<div class="container">
  <div class="left">
      <p>11111111111111111111</p>
  </div>
  <div class="right"></div>
</div>
复制代码

三栏布局

特征：中间列自适应宽度，旁边两侧固定宽度

  • 流体布局table

    • 原理: 左右模块各自向左右浮动，并设置中间模块的margin值使中间模块宽度自适应
    • 缺点: 主要内容没法最早加载，当页面内容较多时会影响用户体验
    • 代码实现
      .left{            
    float: left;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: right;            
    width: 100px;            
    height: 100px;          
    background: blue;        
}         
.center{            
    margin-left: 100px;            
    margin-right: 100px;            
    height: 100px;            
    background: orange;        
 }

<div class="container">        
  <div class="left"></div>        
  <div class="right"></div>        
  <div class="center"></div>    
</div>
复制代码

  • BFC 三栏布局class

    • 原理: BFC规则有这样的描述：BFC 区域不会与浮动元素重叠, 所以咱们能够利用这一点来实现 3 列布局
    • 缺点: 主要内容模块没法最早加载，当页面中内容较多时会影响用户体验。所以为了解决这个问题，有了下面要介绍的布局方案双飞翼布局
    • 代码实现
      .left{            
    float: left;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: right;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}        
.center{            
    overflow: hidden;            
    height: 100px;            
    background: orange;        
}

<div class="container">        
  <div class="left"></div>        
  <div class="right"></div>        
  <div class="center"></div>    
</div>
复制代码

  • 双飞翼布局容器

    • 原理: 利用的是浮动元素margin负值的应用
    • 优势: 主体内容能够优先加载
    • 缺点: HTML代码结构稍微复杂点。
    • 代码实现
      .container{            
    float: left;            
    width: 100%;        
}        
.center{            
    margin-left: 100px;            
    margin-right: 100px;            
    height: 100px;            
    background: orange;        
}        
.left{            
    float: left;            
    margin-left: -100%;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: left;            
    margin-left: -100px;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
  <div class="center"></div>    
</div>
<div class="left"></div> 
<div class="right"></div>
复制代码

  • 圣杯布局

    • 和与双飞翼布局的区别：与双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来讲，HTML 结构相对简单，可是样式定义就稍微复杂，

    • 优势：也是优先加载内容主体。

    • 代码实现

      .container{            
    margin-left: 100px;            
    margin-right: 100px;        
}        
.center{            
    float: left;            
    width: 100%;            
    height: 100px;            
    background: orange;        
}        
.left{            
    float: left;            
    margin-left: -100%;            
    position: relative;            
    left: -100px;            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.right{            
    float: left;            
    margin-left: -100px;            
    position: relative;            
    right: -100px;            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
  <div class="center"></div>        
  <div class="left"></div>        
  <div class="right"></div>    
</div>
复制代码

    • Flex布局

      • 优势: 简单实用，将来的趋势，
      • 缺点: 须要考虑浏览器的兼容性。
      • 代码实现
        .container{            
    display: flex;        
}        
.center{            
    flex-grow: 1;            
    height: 100px;            
    background: orange;        
}        
.left{            
    order: -1; /* order属性定义项目的排列顺序 数值越小 排列越靠前 默认为0 */            
    flex: 0 1 100px; /* flex-grow flex-shrink flex-basis */            
    height: 100px;            
    background: red;        
}        
.right{            
    flex: 0 1 100px;            
    height: 100px;            
    background: blue;        
}        
/*            
    flex-grow属性定义项目的放大比例 默认为0 即若是存在剩余空间 也不放大            
    flex-shrink属性定义了项目的缩小比例 默认为1 即若是空间不足 该项目将缩小            
    flex-basis属性定义了在分配多余空间以前 项目占据的主轴空间（main size） 
        浏览器根据这个属性 计算主轴是否有多余空间 它的默认值为auto 即项目的原本大小        
*/

<div class="container">        
    <div class="center"></div>        
    <div class="left"></div>        
    <div class="right"></div>    
</div>
复制代码

  • Table布局

    • 缺点：没法设置栏间距
    • 代码实现
      .container{            
    display: table; /* 此元素会做为块级表格来显示（相似 <table>）表格先后带有换行符 */  
    width: 100%;        
}        
.left,        
.center,        
.right{            
    display: table-cell; /* 此元素会做为一个表格单元格显示（相似 <td> 和 <th>） */        
}        
.left{            
    width: 100px;            
    height: 100px;            
    background: red;        
}        
.center{            
    background: orange;        
}        
.right{            
    width: 100px;            
    height: 100px;            
    background: blue;        
}

<div class="container">        
  <div class="left"></div>        
  <div class="center"></div>        
  <div class="right"></div>    
</div>
复制代码

  • 绝对定位布局

    • 优势: 简单实用，而且主要内容能够优先加载。
    • 代码实现
      .container{
    position: relative;
}
.center{
    margin-left: 100px;
    margin-right: 100px;
    height: 100px;
    background: orange;
}
.left{
    position: absolute;
    left: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: red;
}
.right{
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 100px;
    background: blue;
 }

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>
复制代码

  • 网格布局(Grid布局)

    • 优势：Grid布局是一种新的布局方式，经过建立网格的方式实现布局。
    • 缺点：须要适配其余浏览器。
    • 代码实现
      .container{            
  display: grid;            
  grid-template-columns: 100px auto 100px;            
  /*                
      用于设置网格容器的列属性 其实就至关于列的宽度 当咱们须要几列展现时                    
      就设置几个值 这个属性能够接收具体数值好比100px 也能够接收百分比值                    
      表示占据容器的宽度               
      须要注意的是: 当给容器设定了宽度时 
      grid-template-columns设定的百分比值是以容器的宽度值为基础计算的                    
      若是未设置宽度时 会一直向上追溯到设置了宽度的父容器 直到body元素。            
  */            
  grid-template-rows: 100px;            
  /*             
      用于设置网格容器的行属性 其实就至关于行的高度                 
      其特性与grid-template-columns属性相似             
  */        
  }        
  .left{            
      background: red;        
  }        
  .center{            
      background :orange;        
  }
  .right{            
      background: blue;        
  }

  <div class="container">        
      <div class="left"></div>        
      <div class="center"></div>        
      <div class="right"></div>    
  </div>
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程