首页 > 代码库 > 【css】回想下经典的布局

【css】回想下经典的布局

2024-10-04 18:41:02   216人阅读

技术分享

　　看到这张图相信大多数人都很熟悉，这曾经是一种经典的布局方式，一道经典的面试题，但是随着岁月的流转，时光的交替（颇有一种“天下风云出我辈，一入江湖岁月催”的感慨，哈哈），它一步步逐渐退出了历史舞台，不过在经典，总是有它经典的含义在里面，今天笔者就尝试站在自己认知范围内，重新诠释了下经典，实现的手段则是用了各种可能的方式实现这一经典布局：

1、基于BFC的实现

.layout1 {
	height: 100px;
	overflow: hidden
}

.layout1 .l {
	height: 100%;
	width: 100px;
	float: left;
}

.layout1 .m {
	height: 100%;
	margin: 0 200px 0 100px;
}

.layout1 .r {
	height: 100%;
	width: 200px;
	float: right;
}

<div class=‘layout1‘>
	<div class=‘l‘></div>
	<div class=‘r‘></div>
	<div class=‘m‘>layout1</div>
</div>

　　图中的第一个行就是基于此方式实现的，原理很简单，利用浮动元素脱离文档流的特性，左边的左浮动，右边的有浮动，简单粗暴。

2、圣杯布局

.layout2 {
	height: 100px;
	overflow: hidden;
	padding: 0 200px 0 100px;
}

.layout2 .m {
	float: left;
	width: 100%;
	height: 100%;
}

.layout2 .l {
	float: left;
	width: 100px;
	margin-left: -100%;
	position: relative;
	left: -100px;
}

.layout2 .r {
	width: 200px;
	margin-left: -200px;
	float: left;
	position: relative;
	right: -200px;
}

<div class=‘layout2‘>
	<div class=‘m‘>layout2</div>
	<div class=‘l‘></div>
	<div class=‘r‘></div>
</div>

　　为了保证dom元素的尽快展示，而将最重要的元素放在最前解析，优化用户体验，使用负margin和相对定位调整左右元素位置，使用大容器的padding作为调整空间的hack，十分经典的手法；

3、双飞翼布局

.layout3 {
	height: 100px;
	overflow: hidden;
}

.layout3 .m-wrap {
	width: 100%;
	float: left;
	height: 100%;
}

.layout3 .m {
	margin: 0 200px 0 100px;
}

.layout3 .l {
	float: left;
	width: 100px;
	margin-left: -100%;
}

.layout3 .r {
	float: left;
	width: 200px;
	margin-left: -200px;
}

<div class=‘layout3‘>
	<div class=‘m-wrap‘>
		<div class=‘m‘>layout3</div>
	</div>
	<div class=‘l‘></div>
	<div class=‘r‘></div>
</div>

　　与之前的方式基本一致，唯一的不同是添加了一个标签，而没有依赖根容器做hack

4、flex实现

.layout4 {
	display: flex;
	height: 100px;
}

.layout4 .l {
	flex: 0 0 auto;
	width: 100px;
}

.layout4 .m {
	flex: 1 1 auto;
}

.layout4 .r {
	flex: 0 0 auto;
	width: 200px;
}

<div class=‘layout4‘>
	<div class=‘l‘></div>
	<div class=‘m‘>layout4</div>
	<div class=‘r‘></div>
</div>

　　实现十分简单，利用伸缩盒模型的特性，只需要开启中间元素的flex-grow（为了保证缩小时的正常显示笔者还开启了flex-shrink）就能个很轻易的实现这种布局，不过为了美观，笔者并没有贴上兼容性的代码。

　　想来所有方式似乎都已穷举？其实不然，还有去年刚出台的新规则css-grid可以一试，于是

5、css grid

.layout5 {
	height: 100px;
	display: grid;
	grid-template-columns: 100px 1fr 200px;
}

<div class=‘layout5‘>
	<div class=‘l‘></div>
	<div class=‘m‘>layout5</div>
	<div class=‘r‘></div>
</div>

　　可以看到，基于css grid的实现是最为便捷的，基于不需要操作grid item，只需要设置容器就可以轻易实现，不过由于是新事物，所以兼容性比较差。

　　也难怪这是一种经典的布局，几乎所有新的布局方式都是很友好的在支持它，从蛮荒时代的要使用各种hack手段来实现，到现代的轻而易举的实现，也足见其在css发展中的重要地位，现在想来也确实，css3之前的css更多的像是一种工具式的语言，它没有任何优雅的特性，了无生趣，而到了css3时代，无论从性能上的优化，工程上的提高，都是可圈可点的。

　　当然，类似经典的实现在css中还有很多，例如各种垂直居中的方法，与js更新换代的方式不同，旧的技术不断被新技术替换，而在css领域，这种返古现象却经常发生，当然也和浏览器厂商、各个平台，复杂的兼容性场景有关，但是其中蕴含的思想就像jQuery那种设计理念，却不会随着岁月的流逝而过时，反而在特定的时间上，更是弥足珍贵的。　　

【css】回想下经典的布局


联系
我们