css解决盒子水平排列边框叠加变粗的问题
问题:
解决:
对第一个和第二个盒子都添加margin-left:-mpx;(m表示边框的大小),这样两个边框就重叠在了一起,就不会看起来有加粗的效果了。
疑问:
第一个盒子向左移动mpx,第二个盒子也向左移动mpx,两个盒子的相对位置并没有改变。
说明:
浏览器在渲染的时候,先对盒子1进行执行,完全执行完盒子1以后再执行盒子2,当盒子2执行到浮动时,盒子2向左浮动的参照实际是已经向左移动了mpx的盒子1,所以此时盒子2是与移动后的盒子1对齐的,再向左移动mpx,左就会与盒子1的右边框重叠。
第二个问题:
当需要鼠标经过四个边框改变颜色的时候会发生问题。
右边的盒子可以四个边框都变色,但左边的盒子因为右边框被压住无法实现变色,这是可以设置鼠标经过的盒子添加相对定位(position:relative);如果有其余的盒子本来就有相对定位的可以设置鼠标经过的盒子的z-index为1.
相关推荐
myloveqiqi 2020-08-09
猫沙盆 2020-07-08
猫沙盆 2020-07-07
云端漂移 2020-07-05
SuiKaSan的自学室 2020-06-13
福叔 2020-06-02
CaiKanXP 2020-06-02
opspider 2020-05-29
jiedinghui 2020-05-14
wcssdu 2020-05-11
zengni 2020-04-16
somboy 2020-02-23
jiedinghui 2020-02-20
MaureenChen 2020-02-17
cfang00 2013-05-15
impress 2020-01-11