min-height、max-height和height有什么不同（盒模型）

box-sizing

概述

• box-sizing 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。

句法

• box-sizing: content-box;
• box-sizing: border-box;

值

• content-box
  默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。
• border-box
  width 和 height 属性包括内容，内边距和边框，但不包括外边距。

Height

概述

• box-sizing:content-box（默认值）;
• height是指content的高度

值

• <百分比>
• 相对于元素的块容器高度（相对于父元素的高度）。
• 用在root 元素 (e.g. ) 上是相对于初始块容器（即浏览器窗口"viewport"的尺寸）。

max-height

概述

• max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
• max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.
• max-height 重载（覆盖掉） height, 但是 min-height 又会重载（覆盖掉） max-height.

值

• <百分比>
• 相对于父元素的高度（padding+content高度）计算得来的,如果该元素的父元素没有明确的指定高度,则该百分比相当于none.（相当于没有设置）

min-height

概述

• 用来设置指定元素的最小高度。当 height 属性设置的高度小于该属性的值时，则 height 属性会失效。
• min-height 会将 max-height和 height的值都覆盖掉。

值

• <百分比>
• 使用百分比指定的值是根据该元素的父元素的高度计算得来的。不允许负值。