另一个块元素中的块元素的框模型

Question

对于固定尺寸的另一个块元素中的块元素的盒子模型，例如：

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

内部块级元素的维度（例如：<figure>）必须符合外部维度（例如：<div>） - 即：小于？如果没有，我们怎么强迫他们这样做呢？

Answer 1

您可以通过将子元素dimesions设置为100％来实现。

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

为防止儿童img代码失真，您应将img代码的高度设置为自动，将最大宽度设置为100％。

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%;
}