前端一面中看似简单却让人容易忽略的题之(界面布局)
作者:互联网
题目:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为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基础知识扎实
- 思维灵活且积极上进
- 代码书写规范
页面布局变通
三栏布局
- 左右宽度固定,中间自适应
- 上下高度固定, 中间自适应
两栏布局
- 左宽度固定,右自适应
- 右宽固定,左自适应
- 上高固定,下自适应
- 下高度固定,上自适应
愿你成为终身学习者
标签:right,界面,center,前端,300px,width,background,看似,left 来源: https://www.cnblogs.com/homehtml/p/11911558.html