网格 和flex 的实际运用

网格作业

<style>
.grid {
width: 800px;
height: 800px;
background-color: brown;

display: grid;
grid-template-columns: 110px 110px 110px 110px;
/ 每列的宽度 /
grid-template-rows: 110px 110px 110px 110px;
/ 每行高度 /

/ 百分比使用 /
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;

/ repeat()函数简化 /
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%) !important;
/ repeat 重复 1fr 是比例 /
}

.red {
width: 200px;
height: 400px;
background-color: saddlebrown;
border: 1px solid blue;
/ 怪异盒子模型 让边框占据实际位置 /
box-sizing: border-box;
/ 使用 /

}
</style>
</head>

<div class="grid">
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
</div>
flex 作业
<div class="stckey">
<!-- <header> -->
<div class="thesa">
<a href="">首页</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>

</div>
<!-- </header> -->
<div class="box">
<ul class="contgrid">
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>

<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
</ul>
</div>
</div>
<style>
.stckey .thesa {
width: 1190;
margin: 0 auto;
display: flex;
background-color: blueviolet;
position: sticky;
position: -webkit-sticky;
top: 0;
/ place-content: space-between; 两端对其 /
}

.thesa>a {
height: 35px;
width: 90px;
background-color: rgb(23, 246, 116);
color: aliceblue;
text-align: center;
line-height: 35px;
text-decoration: none;
margin: 0 auto;
}

.thesa>a:hover {
background-color: blue;
}

/ 1fr 是比例的意思 /
</style>