前端面试：两边固定，中间自适应布局

最新推荐文章于 2024-06-24 22:00:06 发布

NeverGiveUp33

最新推荐文章于 2024-06-24 22:00:06 发布

阅读量597

点赞数

分类专栏： CSS解读文章标签： css 前端

本文链接：https://blog.csdn.net/elite_zhou/article/details/115277537

版权

本文探讨了前端布局中常见的几种方法，包括普通实现、绝对定位、自身浮动法、双飞翼布局和圣杯布局。特别强调了双飞翼布局和圣杯布局的实现步骤及优缺点，这两种布局方式在处理两边固定，中间自适应的场景中十分实用，但需要注意布局元素的顺序和定位策略，以确保在不同屏幕尺寸下的适配性。

摘要由CSDN通过智能技术生成

普通实现

<style>
	.box{
    
		display:flex
	}
	.left,.right{
    
		width:200px
		height:600px
		background:red
	}
	.center{
    
		width:100%
		height:600px
		background:greed
	}
</style>

<body>
	<div class="box">
		<div class="left"></div>
		<div class="center"></div>
		<div class="right"></div>
	</div>
</body>

绝对定位

将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，即可以使中间元素自适应屏幕宽度
该布局的好处，三个div顺序可以任意改变，不足是：因为绝对定位，如果页面上还有其他内容，top的值要小心处理，最好能够对css样式进行一个初始化，如果不对样式进行初始化，则两边和中间的值会对不齐。另外，随着窗口缩小，小于200px的时候，会发生压缩

<style>
	html,body{
    
		margin:0px;
		width:100%;
	}
	h3{
    
		height:100px;
		margin:20px 0 0;
	}
	#left,#right{
    
		width:200px;
		height:200px;
		background-color:red;
		position:absolute;
		top:120px;
	}
	#left{
    
		left