2、flex布局：父元素使用display:flex；子固定元素设置min-width即可
3、grid布局：父元素 display:gridgrid-template-columns: 60px 300px auto
4、左元素浮动（BFC）
1）右侧元素添加margin-left，值为左侧元素宽度
2）右侧元素触发BFC（overflow:hidden/auto/scroll、绝对/固定定位、float、flex、grid等等）
3）右侧元素设置padding-left，并添加子元素作为新的右侧元素
5.左侧元素定位（BFC），右侧元素margin-left
6.左元素（BFC）：display:table-cellwidth:60px右侧元素随内容变化宽度
页面两栏布局分为下面几种情况：
1⃣️左侧float:left,右侧margin-left
注意：块级元素具有流动特性，即默认会填充外部容器，所以只需要margin，不需要设置width就可以让content填满剩余的部分
2⃣️左侧float:left右侧overflow:hidden
.left{
float: left
width: 200px
height: 200px
}
.right{
overflow: hidden
height: 200px
}
.left{
width: 200px
}
.right{
position: absolute
left: 200px
right: 0
top: 0
}
4⃣️利用d性布局
左侧的宽度会随着内容的大小而缩放
1⃣️左侧float:left右侧overflow:hidden
2⃣️利用d性布局
利用flex
========这是很简单吗！<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#header{
height: 60px
width: 100%
background: green
}
#pagebody{
height: 500px
width: 100%
background: red
}
</style>
</head>
<body>
<div id="header">
顶部模块id为header
</div>
<div id="pagebody">
主模块id为pagebody
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）