min-height、max-height和height有什么不
2017-05-10 本文已影响0人
林立镇
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. <html>) 上是相对于初始块容器（即浏览器窗口"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的值都覆盖掉。
值
- <百分比>
- 使用百分比指定的值是根据该元素的父元素的高度计算得来的。不允许负值。
