html----响应式布局，左侧栏目固定，右侧内容随着屏幕宽度变化而变化

1. 响应式布局，左侧栏目固定，右侧内容随着屏幕宽度变化而变化（高频）

• flex布局
• position布局
• css3计算宽度
• float布局

4.float布局（面试官想要的答案）-------------------------------------根据float元素的margin特性布局，兼容性好

 

// html

<div class="box">
    <div class="left"></div>
    <div class="right">
      <div class="inner"></div>//注意
    </div>
</div>

// css

.left {
  float: left;
  width: 200px;
  margin-right: -200px;
}
.right {
  float: left;
  width: 100%;
}
.inner {
  margin-left: 200px;
}

 

1.flex布局----------------------------------用flex:1填充，自动充满容器

// html
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

// css

.box {
　　//形成弹性盒
  display: flex;
}
.left {
　　//左侧大小固定，
  width: 200px;
}
.right {
　　//右侧用flex:1填充，自动充满容器
  flex: 1;
}

position布局-------------用pading将要显示的右侧内容挤到右边，常用在图文列表

//    html

<div class="box">
  <div class="left"></div>
</div>

// css

.box {
  padding-left: 200px;
  width: 100%;
  position: relative;  
}
.left {
  position: absolute;
  width: 200px;
  left: 0;
}

 

css3计算宽度------------------------------------------------通过css3的calc函数可以计算宽度来定义宽度

// html

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

// css

.left {
    float: left;
    width: 200px;
}
.right {
    float: left;
    width: calc(100% - 200px);
}