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

最新推荐文章于 2023-08-28 17:16:41 发布

一只野生饭卡丘

最新推荐文章于 2023-08-28 17:16:41 发布

阅读量1w

点赞数 2

分类专栏： HTML CSS 文章标签：前端子元素覆盖父元素 border background-color

本文链接：https://blog.csdn.net/Searchin_R/article/details/83054647

版权

HTML 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

CSS

19 篇文章 0 订阅

订阅专栏

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

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

有人说：“border！！！！”

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

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

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

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

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

2.背景图

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

3.padding撑开

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

先上代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>
	

.div_nav{
		width:486px;
		height:50px;
		color: #2BA6CB;
		background-color:#FFF;
		border-bottom: 1px solid #17479E;
		
}

#div_nav1{
		width:150px;
		height:50px;
		float:left;
		color: #2BA6CB;
		text-align:center;
		line-height:50px;
		border-left: 1px solid #17479E;
		border-right: 1px solid #17479E;
		border-top: 1px solid #17479E;
		border-bottom: 2px solid #fff;
		padding-right:10px;
		padding-left:10px;
}
#div_nav2{
		width:150px;
		height:50px;
		float:left;
		color: #2BA6CB;
		text-align:center;
		line-height:50px;
		//border-left: 1px solid #17479E;
		//border-bottom: 1px solid #17479E;
		padding-right:10px;
		padding-left:10px;
}

</style>	
</head>
<body>
<div class="div__nav">
  <div id="div___nav1">Searchin</div>
  <div id="div__nav2">饭卡丘</div>	
</div>


</body>
</html>

上面代码定义了一个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。

就可以完美运行。

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

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

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

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

biu~~~

一只野生饭卡丘

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端——子元素覆盖父元素的边框的四种方式

平常我们在浏览网站的时候经常会看到这样的菜单栏：看到这个，有些人不禁会想，这是如何做的呢？？？有人说：“border！！！！”对，的确是border，但是要怎么用呢？？？上面一共有三个div，莫非要给三个div都设置border属性？那也忒麻烦了~这里本帅博主给大家介绍几种更高富帅的方法~1.子元素定位遮盖父元素的border-bottom 写一个div，颜色为白...
复制链接

扫一扫