盒模型的另一個塊元件

Question

對於塊元件的另一塊元件固定尺寸的內盒模型內，例如：

<div style="height: 200px; width:200px;"> 
    <figure></figure> 
    </div> 

做內塊級元素的尺寸（例如：<figure>）必須適合外部尺寸（例如：<div>） - 即：小於？如果不是，我們如何強迫他們這樣做？

Answer 1

您可以通過子元素dimesions設置爲100％做到這一點。

div>figure { 
width: 100%; 
height: 100%; 
} 

爲了防止孩子從越來越扭曲，你應該設置img標籤的高度，以汽車及最大寬度爲100％img標籤。

div>figure>img { 
max-width: 100%; 
height: auto; 
display: block; 
} 

Answer 2

這不一定是這種情況，您可以確定您想要的任何樣式屬性。

如果你想不過來遏制它，你可能會想使用overflow屬性：

<div style="height: 200px; width:200px; overflow: hidden;"> 
    <figure></figure> 
</div> 

Example

Answer 3

由於許多原因，塊盒可能會超出其包含塊的尺寸，並且這樣的盒子被認爲溢出了其包含的塊。您可以通過給出最大寬度來防止發生這種情況：

figure { 
    max-width: 100%; 
}