前端经典面试题CSS三栏布局

头像
默默
    阅读 7 分钟
    4

    对于前端来说，布局也是必须掌握的，一个好的布局可以让页面看起来更美观。提到布局，那就不得不说CSS三栏布局。这是前端面试经常会问到的一个问题，算是基础题。所谓的三栏布局，一般是指左右两边固定中间自适应，或者是中间固定左右两边自适应。

    左右两边固定中间自适应

    圣杯布局

    • HTML结构设置

      新建一个父元素，包含三个子元素：left、main、right（注意，main在写在前面，这样在页面渲染时会先加载中间，针对面试题优先加载中间部分）

    • style样式设置

      1、父元素设置高度
      2、三个元素均设置浮动
      3、中间main部分定宽100%：width: 100%，左右两边按产品需求设置宽高
      4、左边设置margin-left: -100%；右边设置margin-right: -右盒子宽
      5、父元素设置padding-left: 左盒子宽；padding-right: 右盒子宽
      6、左右盒子相对定位

      <div class="container">
  <div class="main f">go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
  <div class="left f"></div>
  <div class="right f"></div>
</div>
<style>
  body {
    min-width: 700px;
  }
  .container {
     height: 300px;
     padding: 0 200px 0 200px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
     position: relative;
     left: -200px;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
     position: relative;
     right: -200px;
  }
</style>

    该布局受内部元素影响而破坏布局的概率低，但是当浏览器屏幕缩小的一定程度时，左右两侧的内容会掉下来，或发生重叠现象。解决方案，给body加一个最小宽度（起码大于左右两侧宽度之和）

    双飞翼布局

    与圣杯布局的思路是一致的，只是有一些细微的差别。

    • HTML结构设置

      新建一个父元素，包含三个子元素：left、main、right（注意，main在写在前面，这样在页面渲染时会先加载中间，针对面试题优先加载中间部分）

    • style样式设置

      1、父元素设置高度
      2、三个元素均设置浮动
      3、中间main部分定宽100%：width: 100%，左右两边按产品需求设置宽高
      4、中间main部分再加一个盒子inner，放置内容（与圣杯布局的不同点）
      5、左边设置margin-left: -100%；右边设置margin-right: -右盒子宽
      6、新添加盒子，inner，设置左右padding或margin

      <div class="container">
   <div class="main f">
      <div class=inner>go aheadgo aheadvgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo aheadgo ahead</div>
   </div>
   <div class="left f"></div>
   <div class="right f"></div>
</div>
<style>
  .container {
     height: 300px;
  }
  .f {
     float: left;
  }
  .main {
     width: 100%;
     height: 300px;
     background-color: cornflowerblue;
  }
  .left {
     width: 200px;
     height: 300px;
     background-color: indianred;
     margin-left: -100%;
  }
  .right {
     width: 200px;
     height: 300px;
     background-color: lightgreen;
     margin-left: -200px;
  }
  .inner {
    padding: 0 200px 0 200px;
  }
</style>

    自身浮动

    • HTML结构设置

      新建三个元素：left、right、main（注意，main写在后面）

    • style样式设置

      1、左盒子左浮动，右盒子右浮动
      2、中间部分设置margin或padding值

      <div class="left"></div>
<div class="right"></div>
<div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
<style>
    .main {
        margin: 0 200px 0 200px;
        background-color: red;
        height: 200px;
    }
    .left {
        float: left;
        width: 200px;
        background-color: blue;
        height: 200px;
    }
    .right {
        float: right;
        width: 200px;
        background-color: pink;
        height: 200px;
    }
</style>

    CSS3新特性：flex

    • HTML结构设置

      新建一个父元素，包含三个子元素：left、main、right（注意，main写在中间）

    • style样式设置

      1、父元素设置宽度为100%，display: flex；
      2、左右两则按产品需求设置宽高
      3、中间部分设置flex: 1；

      <div class="container">
  <div class="left"></div>
  <div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
  <div class="right"></div>
</div>
<style>
    .container {
       width: 100%;
       height: 200px;
       display: flex;
   }
   .main {
       flex: 1;
       background-color: red;
       height: 200px;
   }
   .left {
       width: 200px;
       background-color: blue;
       height: 200px;
   }
   .right {
       width: 200px;
       background-color: pink;
       height: 200px;
   }
</style>

    还有其他的写法，这里就不一一赘述，只是列举了一些比较常用的，以及面试可能会问到的情况。CSS3还有很多好玩的特性，在工作和学习的过程中值得深入研究。

    根据建议评论网友的建议，做了修改哟

    CSS3flex特性

    • HTML结构设置

      新建一个父元素，包含三个子元素：main、left、right（注意，main写在前面）

    • style样式设置

      1、父元素设置宽度为100%，display: flex；
      2、main中间部分设置flex: 1；
      3、左右两则按产品需求设置宽高；
      4、left设置order: -1；

      <div class="container">
  <div class="main">我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容</div>
  <div class="left"></div>
  <div class="right"></div>
</div>
<style>
    .container {
       width: 100%;
       height: 200px;
       display: flex;
   }
   .main {
       flex: 1;
       background-color: red;
       height: 200px;
   }
   .left {
       width: 200px;
       background-color: blue;
       height: 200px;
       order: -1;
   }
   .right {
       width: 200px;
       background-color: pink;
       height: 200px;
   }
</style>

    order属性是调整或设置盒模型对象的子元素出现的順序，数值越小排列越靠前，默认为0。在上面的布局中，left想要排在前面，就需要比0小，所以设置order: -1，left盒子会跑到前面。需要注意的是，如果父元素没有设置flex，则 order 属性不起作用。

    感谢【非常记得你】的建议，emmm，编程的解决方法有很多种，很多时候都是靠经验的积累。所以，小伙伴们，坚持会看到胜利的曙光，虽然我也在挣扎中(#^.^#)

    中间固定左右两边自适应

    浮动 + 负边距 （圣杯布局）

    • HTML结构设置

      新建一个父元素，包含三个子元素：left、main、right（注意，main写在中间）

    • style样式设置

      1、左右两边各占50%的宽度
      2、左边负边距 margin-left 占中间div宽度的一半
      3、右边负边距 margin-right 也占中间div宽度的一半

       <div class="container">
   <div class="left"></div>
   <div class="main">我是中间内容</div>
   <div class="right"></div>
 </div>
 <style>
    .main {
        width: 100px;
        text-align: center;
        float: left;
        background-color: lightgreen;
        height: 300px;
    }
    .left {
        height: 300px;
        float: left;
        width: 50%;
        margin-left: -50px;
        background-color: pink;
    }
    .right {
        height: 300px;
        float: right;
        width: 50%;
        margin-right: -50px;
        background-color: cornflowerblue;
    }
 </style>

    CSS3新特性：flex

    • HTML结构设置

      新建一个父元素，包含三个子元素：left、main、right

    • style样式设置

      1、父元素设置display: flex；flex-direction: row；
      2、左右设置flex-grow: 1，平分剩余空间

       <div class="container">
   <div class="left"></div>
   <div class="main">我是中间内容</div>
   <div class="right"></div>
 </div>
 <style>
    .container {
        display: flex;
        flex-direction : row;
    }
    .main {
        width: 200px;
        height: 300px;
        text-align: center;
        background-color: lightgreen;
    }
    .left {
        height: 300px;
        flex-grow: 1;
        background-color: pink;
    }
    .right {
        height: 300px;
        flex-grow: 1;
        background-color: cornflowerblue;
    }
 </style>

    CSS3特性 calc(四则运算)

    用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 50px)。

    • HTML结构设置

      新建一个父元素，包含三个子元素：left、main、right

    • style样式设置

      1、父元素设置100%宽；
      2、左右设置width: calc(50%, - 中间宽/2)

       <div class="container">
   <div class="left"></div>
   <div class="main">我是中间内容</div>
   <div class="right"></div>
 </div>
 .container {
     width: 100%;
     height: 300px;
 }
 .f {
     float: left;
 }
 .main {
     width: 100px;
     text-align: center;
     background-color: lightgreen;
     height: 300px;
 }
 .left {
     height: 300px;
     background-color: pink;
     width: calc(50% - 50px);  /*平分中间部分的宽度*/
 }
 .right {
     height: 300px;
     background-color: cornflowerblue;
     width: calc(50% - 50px);  /*平分中间部分的宽度*/
 }

    路漫漫其修远兮，没有别人聪慧，那就坚持不懈努，相信勤能补拙。每天进步一点点，总有一天会迈进一大步。

    css3
    默默
    252 声望5 粉丝
    « 上一篇
    vue-router和webpack懒加载，页面性能优化篇
    下一篇 »
    数组方法的二三事

    引用和评论

    推荐阅读
    头像
    Element-UI单选框（el-radio-group）点击事情的问题

    默默赞 2阅读 37.8k

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.4k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.1k

    头像
    盘点CSS文本两端对齐的N种方式

    XboxYan赞 1阅读 1.4k

    0 条评论
    得票最新