通过子div覆盖父div的border-bottom

最新推荐文章于 2025-03-07 11:35:29 发布

原创最新推荐文章于 2025-03-07 11:35:29 发布 · 5.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#border #div #盒子模型

web前端专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种利用子元素覆盖父元素底部边框的方法，并提供了具体的HTML和CSS实现示例。此外，还讨论了如何避免子元素边框对父元素的影响，以及一道前端面试题的相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天有个作业涉及到通过子div覆盖父div的border-bottom，如例子

点击前

点击后

<!DOCTYPE html>
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
<style type="text/css">  
    div{  
        width: 300px;  
        height:300px;  
		border:red solid 10px;
    }  
    div a{  
        display: block;  
        height:300px;  
    }  
    .bottom{  
        color:white;  
        height:300px;  
        border-bottom: 10px solid white;  
    }  
</style>  
<script type="text/javascript">  
      
    function show (ojb) {  
        ojb.className="bottom";  
    }  
</script>  
</head>  
<body>  
    <div>  
    <a href="#" onclick="show(this)">隐藏下边</a>  
    </div>  
</body>  
</html>

简单解释：

如果不想子元素的border覆盖父元素的，可以在父元素加上overflow：hidden，让它变成BFC，里面的盒子不影响外面的盒子

额，顺便想到了一道前端面试题：点击打开链接

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
<style type="text/css">  
#demo {
    width: 100px;
    height: 100px;
    border: 2px solid #000;
    position: relative;
}
#demo:after {
    content: '';
    display: block;
    width: 14.1421px;
    height: 14.1421px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    position: absolute;
    right: -10px;
    top: 20px;
    transform: rotate(45deg);
    background-color: #fff;
}
</style>    
</head>  
<body>  
    <div id='demo'>  
    </div>  
</body>  
</html>