作者:mobiledu2502853463 | 来源:互联网 | 2023-10-10 15:39
1.响应式布局,左侧栏目固定,右侧内容随着屏幕宽度变化而变化(高频)flex布局position布局css3计算宽度float布局4.float布局(面试官想要的答案)-------------------------------------根据float元素的margin特性布局,兼容性好 html<divclass"box&
1. 响应式布局,左侧栏目固定,右侧内容随着屏幕宽度变化而变化(高频)
- flex布局
- position布局
- css3计算宽度
- float布局
4.float布局(面试官想要的答案)-------------------------------------根据float元素的margin特性布局,兼容性好
// html
// css
.left {
float: left;
width: 200px;
margin-right: -200px;
}
.right {
float: left;
width: 100%;
}
.inner {
margin-left: 200px;
}
1.flex布局----------------------------------用flex:1填充,自动充满容器
// html
// css
.box {
//形成弹性盒
display: flex;
}
.left {
//左侧大小固定,
width: 200px;
}
.right {
//右侧用flex:1填充,自动充满容器
flex: 1;
}
position布局-------------用pading将要显示的右侧内容挤到右边,常用在图文列表
// html
// css
.box {
padding-left: 200px;
width: 100%;
position: relative;
}
.left {
position: absolute;
width: 200px;
left: 0;
}
css3计算宽度------------------------------------------------通过css3的calc函数可以计算宽度来定义宽度
// html
// css
.left {
float: left;
width: 200px;
}
.right {
float: left;
width: calc(100% - 200px);
}