当我们使用边框的时候，如果盒子相邻在一起，就会造成边框重叠加粗的问题，原本的1px的边框，重叠就会变成2px，造成加粗的效果。
边框重叠实例
下面是多个盒子边框重叠的实例。
可以看到右边框与左边框重叠，下边框与上边框重叠，造成加粗。
边框重叠实例代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> div { width: 200px; height: 300px; border: 1px solid #ccc; } </style> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> |
margin负值
我们知道边框重叠是因为同一位置有两个边框，所以只要边框不在同一位置就能解决边框重叠的问题，这就是margin负值来解决了。
我们给所有的盒子一个margin-right: -1px;这样所有盒子都向左移动了1px，导致边框的位置发生变动，边框不在重叠，这样就解决了。同理，上下的边框重叠只需要一个margin-top: -1px;就可以了。
margin负值实例
可以看到边框都不在重叠了。
margin负值实例代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<style> div { float: left; width: 200px; height: 300px; border: 1px solid #ccc; /* margin负值去掉右边重叠加粗边框 */ margin-left: -1px; /* margin负值去掉上边重叠加粗边框 */ margin-top: -1px; } div:hover { /* 选中的盒子层级提高，故不会被移动的盒子盖掉1像素的边框 */ z-index: 1; border: 1px solid red; } </style> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> |
评论