解决并排盒子之间的边框宽度加倍问题

 在使用css建立多盒子排列为网格型时，左边一列的盒子总是会因为边框边框加倍而掉入下一行

 或者出现表框加倍。

 

 

 

.lifeservice ul li {
    position: relative;
    float: left;
    height: 70px;
    border-bottom: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;
    /* box-sizing: border-box; */
    text-align: center;
}

 为了解决这种现象，以我目前的知识总结了三种解决方法。

一、设置box-sizing: border-box

box-sizing指定盒模型分成两种情况：

1.box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）

2.box-sizing: border-box 盒子大小为 width 如果盒子模型我们改为了 box-sizing: border-box ,那padding 和 border就不会撑大盒子了(前提 padding 和 border不会超过 width 宽度）

解决方法：

先对盒子设置25%宽度，再加上box-sizing: border-box，然后对靠左边的元素使用border-right：0；(这里可以使用结构伪类选择器)

.lifeservice ul li {
    position: relative;
    float: left;
    width: 25%;
    height: 70px;
    border-bottom: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;
    box-sizing: border-box;
    text-align: center;
}

.lifeservice ul li:nth-child(4n) {
    border-right: 0;
} 

 二、margin 负值法

解决并排盒子之间的边框宽度加倍问题。

原理：让每个盒子压住前面的盒子，边框叠加。

鼠标移动边框颜色变化效果。

ul li {
float:left;
list-style:none;
width:150px;
height:200px;
border:1px solid red;
margin-left:-1px;
}

 但是这种方法在使用：hover时会出现问题

 

当鼠标经过左侧盒子时出现右框不变蓝。此时可以使用相对定位来解决

ul li:hover {
position:relative;
border:1px solid blue;
}

 三、扩大外盒子，隐藏侧边

先使外部盒子宽增大使小盒子不会掉入下一行，

 

 但是侧边有部分多余，此时我们可以用overflow:hidden;对多余部分切除处理。

 这种方法比较简单，但是最后会使右侧盒子略微减小宽度，在实际的开发中这种方法比较常见，一般情况下大部分的人都选择这种方法。

 

 这个问题还有很多更好的解决方法，但是以我目前的知识只能给大家总结出这些解决方案。