九宫格：顾名思义 九个格子 接下来我们用图来直观形象的看看九宫格是个什么牛鬼蛇神
1.flex布局
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</body>
</html>
<style>
.container{
border:1px solid blue;
background: pink;
border-radius: 8px;
width: 100%;
overflow: hidden;
}
ul{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap
}
.container li{
list-style: none;
background: palevioletred;
line-height: 200px;
font-size: 20px;
color: black;
border-radius: 8px;
text-align: center;
width: 30%;
height: 30%;
margin-bottom: 5%;
margin-right: 5%;
}
.container li:nth-of-type(3n) {
margin-right: 0;
}
2.float浮动 直接把上面display去掉 在li下加一个浮动
.container{
border:1px solid blue;
background: pink;
border-radius: 8px;
width: 100%;
overflow: hidden;
}
ul{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.container li{
list-style: none;
background: palevioletred;
line-height: 200px;
font-size: 20px;
color: black;
border-radius: 8px;
text-align: center;
width: 30%;
height: 30%;
margin-bottom: 5%;
margin-right: 5%;
float:left
}
.container li:nth-of-type(3n) {
margin-right: 0;
}
3.grid布局
<div class="grid">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
.grid{
display: grid;
width: 100%;
grid-template-rows:repeat(3,1fr); //表示每一行占3份 1fr代表均分1份 3表示3个
grid-template-columns:repeat(3,1fr);
grid-gap:5%;//上下左右间隙
grid-auto-flow: row;//多出的单元格流向 如果是row 则多出的按行排列
}
.grid>div{
list-style: none;
background: pink;
line-height: 200px;
font-size: 20px;
color: black;
border-radius: 8px;
text-align: center;
}
4.table布局
<div class="container">
<ul>
<li>
<div>2</div>
<div>2</div>
<div>2</div>
</li>
<li>
<div>2</div>
<div>2</div>
<div>2</div>
</li>
<li>
<div>2</div>
<div>2</div>
<div>2</div>
</li>
</ul>
</div>
.container{
border:1px solid blue;
background: papayawhip;
border-radius: 8px;
width: 100%;
overflow: hidden;
}
ul{
width: 100%;
height: 100%;
display: table;
box-sizing: 10px;
}
li{display: table-row;}
li div{
display: table-cell;
text-align: center;
border-radius: 8px;
line-height: 200px;
}
