css解决盒子水平排列边框叠加变粗的问题

somboy 2020-04-19

问题:

css解决盒子水平排列边框叠加变粗的问题

解决:

对第一个和第二个盒子都添加margin-left:-mpx;(m表示边框的大小),这样两个边框就重叠在了一起,就不会看起来有加粗的效果了。

css解决盒子水平排列边框叠加变粗的问题

疑问:

第一个盒子向左移动mpx,第二个盒子也向左移动mpx,两个盒子的相对位置并没有改变。

说明:

浏览器在渲染的时候,先对盒子1进行执行,完全执行完盒子1以后再执行盒子2,当盒子2执行到浮动时,盒子2向左浮动的参照实际是已经向左移动了mpx的盒子1,所以此时盒子2是与移动后的盒子1对齐的,再向左移动mpx,左就会与盒子1的右边框重叠。

 第二个问题:

当需要鼠标经过四个边框改变颜色的时候会发生问题。

css解决盒子水平排列边框叠加变粗的问题css解决盒子水平排列边框叠加变粗的问题

 右边的盒子可以四个边框都变色,但左边的盒子因为右边框被压住无法实现变色,这是可以设置鼠标经过的盒子添加相对定位(position:relative);如果有其余的盒子本来就有相对定位的可以设置鼠标经过的盒子的z-index为1.

相关推荐