前端面试必问的布局

SunnyFly
1,179 阅读7分钟

两栏布局

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

  • 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>

  • BFC

    • 解释:
      • 右侧设置的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>

  • flex

    • 代码实现
      .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:hidden

    • 代码实现
      .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 布局

    • 代码实现
      .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布局

    • 代码实现
      .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>

三栏布局

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

  • 流体布局

    • 原理: 左右模块各自向左右浮动，并设置中间模块的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 三栏布局

    • 原理: 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>
avatar
文章
阅读
粉丝