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);
}