css模型图片大全 |ccss

/* 盒子模型 */
.box {
width: 200px;
height: 100px;
margin: 20px;
border: 1px solid #000;
padding: 10px;
}
/* 浮动模型 */
.left {
float: left;
width: 200px;
height: 100px;
margin: 20px;
}
.right {
float: right;
width: 200px;
height: 100px;
margin: 20px;
}
/* 定位模型 */
.position {
position: relative;
top: 50px;
left: 50px;
}
/* 弹性盒子模型 */
.container {
display: flex;
flex-wrap: wrap;
}
.child {
flex-basis: 200px;
height: 100px;
margin: 10px;
}
/* 网格模型 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
}
.child {
height: 100px;
margin: 10px;
}

以上的图片仅仅是常见的一些CSS模型，掌握了这些模型，大家在网页设计和开发中就可以更好的操作CSS，给网页添加更多的样式和美观度。