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

时间:2011-07-11 05:42:16

标签: html css

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

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 个答案:

答案 0 :(得分:9)

数目:

1:请参阅下文,了解simple和max之间的区别:

#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中放入 overflow:hidden 元素,那么多余的内容就会被隐藏。

如果你这样做了:

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

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

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

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

3:有两种类型的元素内联,设置高度和宽度(最大或简单)对内联元素(ap,in)不执行任何操作你的例子,不是)。您可以通过将 display:block 添加到p css中来设置它在css中阻止,或者使用div代替(默认情况下为block)。