美文网首页
min-height、max-height和height有什么不

min-height、max-height和height有什么不

作者: 林立镇 | 来源:发表于2017-05-10 23:09 被阅读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的值都覆盖掉。

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

    相关文章

      网友评论

          本文标题:min-height、max-height和height有什么不

          本文链接:https://www.haomeiwen.com/subject/cudntxtx.html