简单（宽度和高度）和最大/最小（宽度和高度）之间的区别？答案

【问题标题】：Difference between simple(width and height) and max/min(width and height)?简单（宽度和高度）和最大/最小（宽度和高度）之间的区别？
【发布时间】：2011-07-20 22:06:59
【问题描述】：

1-simple(width and height)和max/min(width and height)有什么区别？解释如果元素的内容、宽度和高度（宽度和高度）或最大/最小（宽度和高度）已经在内部样式中指定，增长超过指定值会发生什么？

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。

【问题讨论】：

三题合一；您可以分别作为每个人来快速简短地回答。 :)
第一个问题的措辞似乎很像家庭作业......？ o_O
Width和Max-Width在这个SO question中有详细讨论

标签： html css

【解决方案1】：

答案：

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>

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

2：如果你想在页面上或一个大红色块。使用宽度/高度，如果您希望页面上的红色小块需要增长但只增长到一定大小，请使用 max。

3：有两种类型的元素inline和block，设置高度和宽度（最大或简单）对内联元素（其中一个p，in你的例子，不是）。您可以通过将 display: block 添加到 p css 或使用 div 来将其设置为在您的 css 中阻止（默认情况下为阻止）。

【讨论】：