⽤html+css作个简单的九宫格
不废话，直接上代码
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>好看的css代码
<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的⾼度也会随着宽度的变化⽽等⽐例的缩放。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。