CSS边框问题

Question

手机网站这种产品的边框问题怎么实现的，我现在的细节上有很大的问题。我就是直接加border-right和border-bottom.

Answer 1

设置每个盒子的宽度和高度,必须是100px, 150px;
给每个盒子加上一个class,比如叫box-item

.box-item{
    border-bottom:1px solid #333;
}
.box-item:nth-child(3n+1),.box-item:nth-child(3n+2){
    border-right:1px solid #333
}

我也是新手,勿喷,请指正.

Answer 2

margin-left 有设置值吗

Answer 3

这种整齐的线，有两种办法，一种是给父级套个背景图，然后宽高那些定好。第二种就是给子集添加伪类去实现。

Answer 4

那个空隙是margin-left造成的吧，你想要几条线交于一点么？还是有点空隙？

Answer 5

1.使用border来实现，li使用box-sizing:border-box;float:left;
2.dispaly:flex,同时使用border定义边框
3.使用背景图片，容器大小不固定，不一定合适
4.父级背景色 子元素使用margin控制与父级之间的空闲，空隙透出父级的背景色

推荐使用第二种

还有你可以chrome审查元素看下你看到的这个网站是怎么做的

Answer 6

设置两个class，第一个和第二个样式一样，父容器定宽，子元素浮动