html – 简单(宽度和高度)和最大/最小(宽度和高度)之间的差异？

发布时间：2020-12-14 22:32:10 所属栏目：资源来源：网络整理

导读：1-简单(宽度和高度)和最大/最小(宽度和高度)之间有什么区别？如果在内部样式中已经指定(宽度和高度)或最大/最小(宽度和高度)的元素的内容,宽度和高度增长超过指定的内容,将会发生什么？ 2 – 其次,我们如何知道何时使用？(简单或最大/最小) 3 – 在以下示例

1-简单(宽度和高度)和最大/最小(宽度和高度)之间有什么区别？如果在内部样式中已经指定(宽度和高度)或最大/最小(宽度和高度)的元素的内容,宽度和高度增长超过指定的内容,将会发生什么？

2 – 其次,我们如何知道何时使用？(简单或最大/最小)

3 – 在以下示例中：

<html>
  <head>
       <style type="text/css">
       p
       {
        max-height:50px;
        background-color:yellow;
       }
       </style>
  </head>

  <body>
       <p>The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
          The maximum height of this paragraph is set to 50px.
       </p>
  </body>
  </html>

这里,max-height似乎对元素的内容没有影响,因为它的高度随着内容的增长而缩小？我很好地使用IE8.

解决方法

回答：

1：请参阅下面的简单和最大之间的区别：

#element {
    width: 100px;
    height: 100px;
    background-color: red;
}

<div id="element">
    I'm a 100px wide,100px high block!
</div>

上面的div将是页面上100px高和100px宽的红色块,其中包含文本“我是100px宽,100px高度块”.如果文本对于这个块很长,它会泄漏出来,或者如果你把溢出：隐藏在你的css元素中,那么多余的内容就会被隐藏.

如果你这样做了：

#element {
    max-width: 100px;
    max-height: 100px;
    background-color: red;
}

<div id="element">
    I'm a flexible block!
</div>

该元素将与您的内容一样大,但如果您的内容达到100px高或超过该元素将停止并且它将执行与上述示例相同的操作(如果您有溢出则切断内容：隐藏在您的CSS中或内容将从元素泄漏到页面中).

2：如果你想在页面上有一个大的红色块或.使用宽度/高度,如果你想在页面上需要增长但只增长到一定大小的小红色块使用最大值.

3：内联和块有两种类型的元素,设置高度和宽度(最大或简单)对内联元素(在您的示例中不是p)没有任何作用.您可以通过将display：block添加到p css或使用div(默认为块)将其设置为在css中阻止.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!