面试相关

一.实现左侧固定,右侧自适应的方法

基本样式
html

css

    .container {
      width: 100%;
      height: 800px;
      border: 1px solid black;
    }

    .container .left {
      width: 200px;
      height: 800px;
      border: 1px solid black;
    }

    .container .right {
      height: 800px;
      margin-left: 200px;
      background-color: rebeccapurple;
    }

1.使用float+margin-left

实现:左边元素浮动,右侧元素设置margin-left调整与左侧元素的间距,代码如下

 .container  {
      overflow: hidden; /* 清除浮动 */
    }
 .container .left {
      float: left;
    }
 .container .right {
      margin-left: 200px;
    }

思路:右侧块级元素未规定宽度时,其宽度随父元素宽度大小而发生变化,再将左侧盒子浮动使其脱离文档流使左右两元素并排排列,这时右侧盒子可以实现自适应但左右两盒子重叠,这时增加右侧盒子的margin-left,使两盒子分离,从而实现需求.
缺点:
a.因为左侧盒子浮动,有些情况需要清除浮动
b.右侧盒子的margin-left计算时需要考虑左侧盒子的宽度

2.使用absolute+margin-left

实现:与上诉方法基本一致,左侧盒子由浮动变为绝对定位,代码如下

 .container .left {
      position: absolute;
    }
 .container .right {
      margin-left: 200px;
    }

思路:同上
缺点:a.需设置父盒子position属性为relative
b.没有清除浮动的方法,只能设置右侧盒子的min-height来防止父盒子坍塌

3.使用float+BFC

实现:左侧浮动,右侧变为一个BFC,代码如下

 .container  {
      overflow: hidden;  /* 清除浮动 */
    }
 .container .left {
      float: left;
      margin-right: 200px;
    }
 .container .right {
      overflow: hidden;
    }

思路:利用BFC规则:'BFC元素与浮动元素不重叠',使右边的盒子变为一个BFC,我们用到的方法是设置overflow: hidden,左侧盒子浮动,此时两盒子分离,在设置左侧盒子的右边距.
缺点:父盒子需要清除浮动

4.flex布局

实现:使用flex布局,代码如下

 .container  {
      display: flex;
      align-items: flex-start;  /* flex容器中的项目从头开始排列(并不拉伸) */
    }
 .container .left {
      flex: 0 1 auto;
    }
 .container .right {
      flex: 1 1 auto;
    }

思路:flex: 0 1 auto;是flex-grow, flex-shrink 和 flex-basis的缩写,代码项目的放大,缩小,项目占剩余空间的大小.
缺点:兼容性不好.