前端——子元素覆盖父元素的边框的四种方式

平常我们在浏览网站的时候经常会看到这样的菜单栏：

看到这个，有些人不禁会想，这是如何做的呢？？？

有人说：“border！！！！”

对，的确是border，但是要怎么用呢？？？

上面一共有三个div，莫非要给三个div都设置border属性？那也忒麻烦了~

这里本帅博主给大家介绍几种更高富帅的方法~

1.子元素定位 遮盖父元素的border-bottom 

写一个div，颜色为白色，通过绝对定位来遮盖父元素的下边框，很简单。

2.背景图

给父元素div设置带横线的背景图，然后设置子div的margin属性来覆盖它。

3.padding撑开 

上面两种方法都很简单，这里具体举例第三种，即如何用padding撑开父元素从而使它被覆盖。

先上代码。

	



  
Searchin
  
饭卡丘
	

上面代码定义了一个div，它包含两个子div。父div有一个border-bottom: 1px solid #17479E;  第一个子元素也有一个border-bottom: 2px solid #fff。父元素和子元素的高度相等，按照道理来说，子元素应该可以覆盖父元素的边框。

那么到底是不是这么一回事呢？

我们来试试看。

哎，好像可以实现哎......

我这个人呢，没事就喜欢缩放网页玩，我们来缩放一下这个看看效果。

咦，怎么又出现边框了？

我们放大看看。

咦，放大也有边框？？？？会不会是Google chrome出错啦？

换成2345浏览器试试。

咦，居然也有边框！！！！

这是怎么回0事，一开始明明没有的，难道是谷歌浏览器出问题啦？

其实真相是：子元素边框没有覆盖父元素的边框！

那要怎么办呢？

不用担心，我们给父元素添加一个padding属性——padding: 0px 0 2px 0;，将它撑开一点点看看效果。

哎，没有问题，我们再缩放一下

放大一下

嘿，完全没有问题。

四、通过子元素background-color覆盖

显然，给父元素用一个padding完全可以解决这个问题。

但是万一我就是不想用padding，怎么办？？？

办法多了！

最简单的，在子元素border-bottom: 2px solid #fff的基础上，只要子元素的background-color设置为white。

就可以完美运行。

 

好啦，总结一下，文中一共用了四种方法。

1. 子元素定位 遮盖父元素的border-bottom 
2. 父元素背景图
3. 用padding将父元素撑开 
4. 通过子元素background-color覆盖

前两种都很简单，网上也都能搜着，但是比较麻烦，因为还要添加子元素或者背景图之类的。建议用后两种方法，比较简单明了。

 

好啦，以上就是子元素覆盖父元素边框的四种方法啦~~如果大家有什么疑问或者发现文中有描述错误的地方，欢迎大家留言评论，我们一起学习呀~~

biu~~~