<!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="test"> -->
<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> -->
</div>
</body>
</html>
.box-wrap {
text-align: center;
/* 居中 */
background-color: #d4d4f5;
}
.box-wrap>.box {
width: 31%;
padding-bottom: 31%;
/* 方格 */
display: inline-block;
/* 并排 */
margin: 1%;
border-radius: 10%;
background-color: orange;
}
.box-wrap {
background-color: #666;
width:300px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.box {
width: 32%;
padding-bottom: 32% ;
border:1px solid red;
background-color: aqua;
}
height/width
宽:默认整个屏幕 / 内容+padding+border(不算margin)
高:默认无高度 / 内容+padding+border
outline:不占宽度,不听border-radius的(一定是方的)
body有个默认的margin是8px
border-radius:是相对于自己的宽和长(内容+padding+border) 50%的方块就是圆
div
display:block(一个占一行)
要多个块水平排布:display:inline-block(div的默认样式是display:block)
水平居中:父元素text-align:center不仅对文字有效,对多个div也有效
背景色:内容+padding
长用33%的百分比,
高用padding-bottom/top:33%都是相对于宽的
.box-wrap>.box
>必须是直接后继