/*布局样式*/
.container{
display: flex; /*将容器变为弹性盒子*/
flex-wrap: wrap; /*超出宽度换行*/
justify-content: space-between; /*子元素在主轴上分布均匀*/
}
.item{
width: 30%; /*子元素宽度*/
margin-bottom: 20px; /*子元素之间的垂直距离*/
}
.item img{
width: 100%; /*图片宽度*/
height: 200px; /*图片高度*/
object-fit: cover; /*图片自适应填充*/
}
.item h3{
font-size: 18px; /*字体大小*/
margin: 10px 0; /*上下间距*/
}
.item p{
font-size: 14px; /*字体大小*/
margin-bottom: 10px; /*下间距*/
}
/* HTML代码 */css scale(0)，css设置div横排，css滤镜去掉黑色背景，vue修改子组件css，css背景图颜色变浅，css设置表格不显示边框，css li 序号
商品名称1
商品描述1
￥99.00
css scale(0)，css设置div横排，css滤镜去掉黑色背景，vue修改子组件css，css背景图颜色变浅，css设置表格不显示边框，css li 序号
商品名称2
商品描述2
￥199.00
css scale(0)，css设置div横排，css滤镜去掉黑色背景，vue修改子组件css，css背景图颜色变浅，css设置表格不显示边框，css li 序号
商品名称3
商品描述3
￥299.00
以上是一种简单而常用的商品页面布局，通过display属性将容器变为弹性盒子，使得子元素能够根据宽度自适应调整位置。同时，使用flex-wrap属性使子元素在宽度不足时自动换行，但保持在同一排。
通过设置子元素的宽度、margin值和对图片使用object-fit，使得子元素能够呈现出整齐、美观的效果。同时，对标题和文字使用不同大小的字体，增强了内容的重点性。
以上样式仅是基础的商品页面布局，根据实际需求，还可以添加其他的样式效果，如悬浮特效、动态效果等，以达到更好的用户体验。