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

前端之家收集整理的这篇文章主要介绍了html – 简单(宽度和高度)和最大/最小(宽度和高度)之间的差异?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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中阻止.

猜你在找的HTML相关文章