• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • height

    height CSS 属性指定了一个元素的高度。默认情况下,这个属性决定的是内容区的高度,但是,如果将box-sizing:border-box, 这个属性决定的将是边框区域的高度。

    示例

    /* <length> values */
    height: 300px;
    height: 25em;
    
    /* <percentage> value */
    height: 75%;
    
    /* Keyword values */
    height: max-content;
    height: min-content;
    height: fit-content(20em);
    height: auto;
    
    /* Global values */
    height: inherit;
    height: initial;
    height: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持height

    语法

    height:auto| <length>| <percentage>| min-content| max-content| fit-content()

    height 属性也指定为:

    • 下面关键字值之一:min-content,max-content,fit-content,auto。
    • 一个长度值或者百分比值

    取值:

    • auto:由浏览器为元素计算并选择一个高度。
    • <length>:将高度定义为一个绝对值。参见<length>
    • <percentage>:将高度定义为相对包含块高度的百分比。参见<percentage>
    • min-content:设置为允许的最小高度。还处于实验阶段
    • max-content:设置为允许的最大高度。还处于实验阶段
    • fit-content()还处于实验阶段。将 fill-content 公式中的可用位置替换为特定的参数以进行使用,如:min(max-content, max(min-content,))。
    • fill:根据文字方向,使用 fill-available 作为行大小或者块大小。还处于实验阶段
    • available:包含块高度减去当前元素的边距,边框和填充。还处于实验阶段
    默认值auto
    适用于除未替换的内联元素、表行和行组之外的所有元素
    继承性
    动画性
    计算值指定值

    实例

    div {
      width: 250px;
      margin-bottom: 5px;
      border: 2px solid blue;
    }
    
    #taller {
      height: 50px;
    }
    
    #shorter {
      height: 25px;
    }
    
    #parent {
      height: 100px;
    }
    
    #child {
      height: 50%;
      width: 75%;
    }
    
    

    上篇:max-width

    下篇:min-height