HTML代碼

<div class="container">
        <section id="portfolio" class="portfolio">
            <div class="section-subtitle">
                Mening ishlarim
                <span class="blur-line"></span>
            </div>
            <div class="section-title">
                Mening oxirgi <br>
                Ishlarimni ko'ring
            </div>
            <div class="portfolio-items">
                <div class="portfolio-item">
                    <img class="portfolio-item__image" src="images/p1.jpg" alt="Portfolio Image 1">
                    <div class="portfolio-item__overlay"></div>
                    <div class="portfolio-item__info">
                        <h4>
                            <a href="#">Portfolio item 1</a>
                            <p>Ishim haqida</p>
                        </h4>
                    </div>
                </div>
            </div>
        </section>
</div>

CSS代碼

/* Portfolio section */
.portfolio {
    padding: 100px 0;
}

.portfolio-item {
    position: relative;
    display: inline-block;
}

.portfolio-item__overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(19,69,230,0.9);
}

.portfolio-item__info {
    position: absolute;
    bottom:44px;
    left: 80px;
}

我正在跟隨一個(gè)視頻教程學(xué)習(xí)CSS，并作為一個(gè)項(xiàng)目建立一個(gè)演示網(wǎng)站。當(dāng)我將css代碼中的portfolio-item類(lèi)的display屬性更改為inline-block時(shí)，portfolio-item__overlay的大小會(huì)更改為與html代碼中它前面的圖像的大小相同。我想知道為什么它取它的兄弟元素的大小。高度和寬度是100%，它應(yīng)該繼承其父的大小，因?yàn)樗奈恢檬墙^對(duì)的。 我是HTML和CSS的新手。請(qǐng)解釋一下。

當(dāng)您將元素的display屬性設(shè)置為inline-block時(shí)，它的行為類(lèi)似于inline元素，但允許您設(shè)置其寬度和高度。

在您的代碼中。portfolio-item元素變得和它的內(nèi)容一樣寬，這就是圖像。因此，覆蓋元素會(huì)進(jìn)行調(diào)整以匹配該大小。