有关css，为什么div1加上display:inline-block;div1的下边框颜色就可以覆盖div2上边框的颜色
div1加上display:inline-block;div1的下边框颜色就可以覆盖div2上边框的颜色,显示黑色如果不加的话就是下面的div2上边框覆盖div1的下边框...
div1加上display:inline-block;div1的下边框颜色就可以覆盖div2上边框的颜色,显示黑色
如果不加的话就是下面的div2上边框覆盖div1的下边框，显示红色，为什么？
<head>
<title>shiyan</title>
<style type="text/css">
*{margin: 0px}
div{
height: 50px;
width: 50px;
}
#div1{
border-bottom: black 2px solid;display:inline-block;
}
#div2{
border-top: red 2px solid;margin-top:-2px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body> 展开
如果不加的话就是下面的div2上边框覆盖div1的下边框，显示红色，为什么？
<head>
<title>shiyan</title>
<style type="text/css">
*{margin: 0px}
div{
height: 50px;
width: 50px;
}
#div1{
border-bottom: black 2px solid;display:inline-block;
}
#div2{
border-top: red 2px solid;margin-top:-2px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body> 展开
展开全部
首先不加inline-block显示红色是因为潜规则：后面的会覆盖前面的。-2px的margin将div2往上推了2px，所以挡住了div1。然后你加上了display：inline-block，这时候显示黑色是因为层级不同了，inline-block的层级要比block高，所以div1挡住了div2，我找了张图你自己看看吧
追问
很详细，非常感谢，因为昨天问了好久都没人说层级这个概念，再搜索一下子就清晰了
祝你好运兄弟~
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
