<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
width: 408px;
overflow: hidden;
}
.container>div {
width: 100px;
height: 200px;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
把四个框横排放在一起，框与框中间接壤的地方整体上看起来很不舒服(强迫症握拳！)
原因是相较于其他边，中间显粗的地方是由两个边紧靠导致的。解决这一问题，只能选择把相邻紧靠的边叠在一起，一上一下，这样的话视觉体验不错。
(4个divmargin-left: -1px;)
.container>div {
width: 100px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: -1px; /* 四个div左移一个px */
}
你是不是图没截全？
非也，在设置父元素宽度时，为了一开始刚好容纳4个带边框的div(代码洁癖)，父元素宽度为408px。同时又为了防止子元素浮动导致父元素高度塌陷，使用了overflow: hidden;这一属性还有个功能：超出容器本身的内容会被隐藏，所以左一div的左边框因为左移1px被隐藏。此时只要给父元素一个像素的左padding，就可以解决这个问题。
.container {
width: 408px;
overflow: hidden;
padding-left: -1px; /* 把被隐藏的左一div的左边框挤进来 */
}
舒服多了！谢谢你，舒服侠！！
刚开始我百思不得其解：为什么、凭什么？移动之前中间显粗，那四个div都同时左移1个px，移动之后，它们的相对位置并没有发生变化，中间显粗的部分依然粗才对啊！苦思冥想之后，原来是float在搞鬼。
为了让4个div并排显示，用到了浮动float: left;我们来一步一步思考。
在第一个div左移1px之后，正常情况下，第二个div和第一个div中间应该是有1px的空间的。第二个div左移一个像素刚好能填补这个空间，第一个div的右边框和第二个div的左边框应该继续接壤。
这么想就被我带到沟里去了。
我忽略了一个很重要的东西，4个div是有设置float属性的，因为这个属性，在左一div左移之后，紧跟其后的左二div会因为float紧贴上来。此时左二div再margin-left: -1px;,它的左边框就会和左一div的右边框，重叠！！！
到此为止，只是解决了视觉上的问题。如果鼠标悬浮的时候让每个div边框变色，强迫症松开的拳头又会紧握。
.container>div:hover {
border-color: red; /* 鼠标悬浮，边框变色 */
}
救命！！右边框被盖住了，好难受！
不着急，只需要在鼠标悬浮的时候把它的层级提上来就好了，想到了z-index。但是别忘了，它只对设置了absolute、relative和fixed的元素有效
.container>div {
width: 100px;
height: 200px;
border: 1px solid black;
float: left;
margin-left: -1px;
position: relative; /* 设置relative */
}
.container>div:hover {
border-color: red;
z-index: 1; /* 层级变化 */
}
皆大欢喜啦！！
