Question

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style>
.ribbon-left {left: 10px;top: 20px; width: 400px; height: 300px;position: absolute;}

    .css-table {display: table;margin: 0;padding: 0;background-color: red;}
    .css-row { display: table-row; }
    .css-cell {display: table-cell;vertical-align: middle; }

    .ribbon-left-middle {width: 80%;bottom: 0;padding-left: 5px;position: relative; }
    .ribbon-left-middle-inner {top: 5px;position: absolute;}

</style>
</head>
<body>
<div class="ribbon-left">
    <div class="css-table">
        <div class="css-row">
            <div class="css-cell ribbon-left-middle">
                <div class="ribbon-left-middle-inner">
                    <div class="productElements">Product elements</div>
                    <div class="productDescription">Product description</div>
                    <div class="productUsage">Product usage</div>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style>
.ribbon-left {left: 10px;top: 20px; width: 400px; height: 300px;position: absolute;}

    .css-table {display: table;margin: 0;padding: 0;background-color: red;}
    .css-row { display: table-row; }
    .css-cell {display: table-cell;vertical-align: middle; }

    .ribbon-left-middle {width: 80%;bottom: 0;padding-left: 5px;position: relative; }
    .ribbon-left-middle-inner {top: 5px;position: absolute;}

</style>
</head>
<body>
<div class="ribbon-left">
    <div class="css-table">
        <div class="css-row">
            <div class="css-cell ribbon-left-middle">
                <div class="ribbon-left-middle-inner">
                    <div class="productElements">Product elements</div>
                    <div class="productDescription">Product description</div>
                    <div class="productUsage">Product usage</div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的榜样。我已经为css表父div定义了红色背景颜色。为什么文字在儿童div中没有红色背景？是不是背景传播给了孩子？

同样的样本只有我有一个以上的＆＃34; css-cell＆＃34; div，红色背景就在那里。我应该在这里改变什么？

Answer 1

不继承背景颜色。查看文档：{{3}}

它默认为透明，因此它看起来像是继承的。

但问题是：.ribbon-left-middle-inner {top: 5px;position: absolute;}

通过将元素定位为绝对元素，其父元素为空且没有大小。使用您的浏览器元素检查器。

更改为：.ribbon-left-middle-inner {top: 5px;}

背景颜色不继承

1 个答案: