盒子模型的习题这个盒子模型的代码是什么
如何解决这个问题
html盒子模型问题如何解决这个问题
<body>
<div class="top"></div>
<div class="main">
<div class="banner"></div>
<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
<div class="bottom"></div>
</body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.top {
height: 100px;
background-color: red;
}
.main {
width: 100%;
height: calc(100vh - 300px);
padding: 10px 300px;
}
.banner {
width: 100%;
height: 100px;
background-color: blue;
}
.flex {
height: calc(100% - 110px);
display: flex;
justify-content: space-between;
margin-top: 10px;
background-color: blueviolet;
}
.item {
background-color: #666;
width: 23.5%;
}
.bottom {
width: 100%;
height: 200px;
background-color: green;
}
</style>