html5九宫格布局 html九宫格布局代码图片

转载

gjnet 2023-08-08 00:03:32

文章标签 html5九宫格布局 html css 宽高缩放 文章分类 HTML5 移动开发

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

九宫格布局

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

我没理解错的话，示意图如下：

html5九宫格布局 html九宫格布局代码图片_宽高

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

效果图：

html5九宫格布局 html九宫格布局代码图片_css_02

//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计算宽度

效果图：

html5九宫格布局 html九宫格布局代码图片_html_03

<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都可以）。