css130页面布局技巧 |css3图片四边阴影

/*1.使用flexbox布局*/
.container{
display:flex;
justify-content: center; /*主轴居中对齐*/
align-items: center; /*交叉轴居中对齐*/
}
/*2.使用grid布局*/
.container{
display: grid;
grid-template-columns: 1fr 1fr; /*两列等宽*/
grid-template-rows: 1fr 1fr 1fr; /*三行等高*/
gap: 10px; /*网格间距*/
}
/*3.响应式布局*/
@media screen and (max-width: 480px) {
.container{
flex-direction: column; /*移动端采用垂直布局*/
}
}
/*4.使用绝对定位*/
.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*5.使用网格*/
.container{
display: inline-grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /*网格自适应布局*/
gap: 10px; /*网格间距*/
}
/*6.使用弹性盒子*/
.container{
display:flex;
}
.box{
flex: 1; /*所有盒子等分*/
}
/*7.使用多列布局*/
.container{
column-count: 3; /*分为三列*/
column-gap: 30px; /*列之间距离*/
}

以上是几种常见的页面布局技巧。大家可以根据具体需求使用不同的方法，让页面更加美观和优雅。