前端学习：HTML/CSS九宫格布局（Flex和Float两种实现）

最新推荐文章于 2024-03-16 09:02:47 发布

芋泥酱XD

最新推荐文章于 2024-03-16 09:02:47 发布

阅读量2.4k

点赞数 3

分类专栏：前端学习文章标签： html css

本文链接：https://blog.csdn.net/qq_36070003/article/details/115417304

版权

前端学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这篇文章整理一下常见的布局思路

九宫格布局

腾讯面试问到的，问题是，在不规定父元素宽高的情况下，一行排列三个盒子，超出3个，按从左到右布局，每个子元素间隔10px，可以用flex也可以用float布局。。。一时半会儿还真没想到百分比来控制宽度，我好菜。。。
我没理解错的话，示意图如下：
在这里插入图片描述

方法一：float+百分比设置宽高

效果图：
在这里插入图片描述

//css
<style type="text/css">
	.boxfather{
		background-color: pink;
		overflow: hidden; 
	}
	.box{
		float:left;
		width: 31%;
		padding-bottom: 31%;
		margin-right: 10px;
		margin-bottom: 10px;
		background-color: blue;
	}
</style>

//html
<body>
	<div class="boxfather">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</div>	
</body>

参考来源

高度height的百分比相对于父元素的高度，父元素默认是没有高度的。如果不给父元素一个高度，子元素也不会有高度。在普通文档流中，块级元素的宽度默认是浏览器的宽度，因此百分比有效。也就是为什么子元素有宽度而没有高度。padding-bottom和padding-top的百分比是相对于父元素的宽度，而不是高度。因此设置了padding-top或者padding-bottom百分比的子元素，其高度就不再依赖于父元素高度了。由于padding-bottom和padding-top的百分比是相对于父元素的宽度，当屏幕大小出现变化时，元素基于padding-top或者padding-bottom的高度也会随着宽度的变化而等比例的缩放。

方法二：flex布局+calc计算宽度

效果图：
在这里插入图片描述

<style type="text/css">
	.boxfather{
		background-color: pink;
		display: flex;
		flex-wrap: wrap;
	}
	.box{
		margin-left: 10px;
		margin-bottom: 10px;
		width:calc(calc(100% / 3) - 10px);
		padding-top: calc(calc(100% / 3) - 10px);
		background-color: lightblue;
	}
</style>

<body>
	<div class="boxfather">
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
		<div class="box"></div>
	</div>	
</body>

最终效果和float一样，重点在于width的计算，可以使用百分比或者是calc来计算宽，还有一个知识点是padding的使用，因为一般宽的100%就是浏览器窗口的宽度，但height是没有高度的，因此可以使用padding来设置盒子高度（padding-top、padding-bottom都可以）。

总结

在父元素未知宽高的情况下，子元素宽可以根据浏览器窗口宽度来计算（百分比），高使用padding而不是height，因为浏览器窗口没有高度，height无法使用百分比来计算。
子元素间距用margin即可。
flex-wrap：wrap表示可换行。

有任何错误欢迎指出～””(￣ー￣) (￣ー￣)//””

芋泥酱XD

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
前端学习：HTML/CSS九宫格布局（Flex和Float两种实现）

这篇文章整理一下常见的布局思路九宫格布局腾讯面试问到的，问题是，在不规定父元素宽高的情况下，一行排列三个盒子，超出3个，按从左到右布局，每个子元素间隔10px，可以用flex也可以用float布局。。。一时半会儿还真没想到百分比来控制宽度，我好菜。。。我没理解错的话，示意图如下：方法一：float+百分比设置宽高效果图：//css<style type="text/css"> .boxfather{ background-color: pink; overflow.
复制链接

扫一扫