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

2019/02/19 21:06
阅读数 24

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);
}
复制代码

 

展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部