题目:假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应
ps：一般大家开始会想到float布局，定位布局，但这样对于该题是不及格的，至少要3个以上才算是过的，5个才是优秀的。
解一:(float布局)
<style>
*{
padding: 0;margin: 0;
}
.layout article div{
min-height: 200px;
}
.left{
width: 300px;float: left;background: green;
}
.right{
float: right;background:pink;width: 300px;
}
.center{background: yellow;}
</style>
</head>
<body>
<section class="layout float">
<article class="left-right-center">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</article>
</section>
</body>
解二:(绝对定位布局)
*{
padding: 0;margin: 0;
}
.left-center-right>div{
position: absolute;
height: 300px;
}
.left{
left:0;width: 300px;background: yellow;
}
.center{
left:300px;right:300px;background: pink;
}
.right{
right:0;
width: 300px;
background: red;
}
</style>
</head>
<body>
<section class="layout absolute">
<article class="left-center-right">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</article>
</section>
</body>
解三:(flex布局)
<style>
*{
padding: 0;margin: 0;
height: 300px;
}
.left-center-right{
display: flex;
}
.left{
width:300px;background: yellow;
}
.center{
flex:1;background: pink;
}
.right{
width:300px;background: red;
}
</style>
</head>
<body>
<section class="layout flexbox">
<article class="left-center-right">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</article>
</section>
</body>
解四:(表格布局)
<style>
*{
padding: 0;margin: 0;
}
.left-center-right{
width: 100%;
display: table;
height: 200px;
}
.left-center-right>div{
display: table-cell;
}
.left{
width:300px;background: yellow;
}
.center{
background: pink;
}
.right{
width:300px;background: red;
}
</style>
</head>
<body>
<section class="layout table">
<article class="left-center-right">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</article>
</section>
</body>
解五:(网格布局)
<style>
*{
padding: 0;margin: 0;
}
.left-center-right{
width: 100%;
display: grid;
grid-template-rows: 200px;
grid-template-columns: 300px auto 300px;
}
.left{
background: yellow;
}
.center{
background: pink;
}
.right{
background: red;
}
</style>
</head>
<body>
<section class="layout grid">
<article class="left-center-right">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</article>
</section>
</body>
页面布局小结
- 语义化掌握到位
- 页面布局理解深刻
- CSS基础知识扎实
- 思维灵活且积极上进
- 代码书写规范
页面布局变通
三栏布局
- 左右宽度固定，中间自适应
- 上下高度固定， 中间自适应
两栏布局
- 左宽度固定，右自适应
- 右宽固定，左自适应
- 上高固定，下自适应
- 下高度固定，上自适应
愿你成为终身学习者