用html+css作个简单的九宫格

最新推荐文章于 2026-05-26 16:39:44 发布

原创最新推荐文章于 2026-05-26 16:39:44 发布 · 1.2w 阅读

37 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css

html

本文通过实例演示如何使用百分比和padding-bottom实现响应式布局，解释为何高度百分比不适用于某些场景，以及如何利用padding-bottom解决高度随父元素宽度变化的问题。

不废话，直接上代码
HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>task1</title>
	<link rel="stylesheet" type="text/css" href="task1.css">
</head>
<body>
	<div class="box-wrap">
		<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>

</html>

CSS代码：

.box-wrap {
	text-align: center;
	background-color: #d4d4f5;
	overflow: hidden; 
}

.box-wrap>div {
	width: 31%;
	padding-bottom: 31%;
	margin: 1%;
	border-radius: 10%;
	float: left;
	background-color: orange;
}

结果演示：
这里写图片描述

注意：为了让页面能跟随页面的缩放而跟着一起缩放，我用了百分比来设置宽高，但此处的高（height）用百分比是不行的，而要用padding-bottom，为什么呢？

		↓↓↓↓↓原因↓↓↓↓↓

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

标签

#九宫格 #html #css