当我们使用边框的时候,如果盒子相邻在一起,就会造成边框重叠加粗的问题,原本的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> |
评论