bottom

介绍

bottom 属性定义了定位元件的下外边距边界与其包含块下边界之间的偏移。定位元件参考 position 属性

bottom 的效果取决于元件的 position 属性:

  • position 设置为 absolutefixed 时,bottom 属性指定了定位元件下外边距边界与其包含块下边界之间的偏移。

  • position 设置为 relative 时,bottom 属性指定了元件的下边界离开其正常位置的偏移。

topbottom 同时指定时,position 设置为 absolute/fixed,并且 height 没有被指定或者指定为 auto100% 的时候,topbottom 都会生效,在其他情况下,如果 height 被限制,则 top 属性会优先设置,bottom 属性则会被忽略。

使用示例

语法

/* <length> values */
bottom: 3px;
bottom: 2rpx;
bottom: 2.4em;
bottom: 3rem;

bottom: 10%;

/* Keyword value */
bottom: auto;

/* calc */
bottom: calc(1px + 1px);

取值

  • <length>

    一个负的、零或正的 <length> 值,它表示:

    • 对于绝对定位的元件,它是该元件与包含块底部边缘的距离。
    • 对于相对定位的元件,它是该元件相对于其正常位置向上移动的距离。
  • <percentage>

    包含块高度的百分比。

  • auto

    默认值

形式定义

初始值auto
适用元素所有元件
是否支持继承
是否支持动画yes
百分比refer to the height of the containing block

形式语法

bottom =
  auto                |
  <length-percentage>

<length-percentage> =
  <length>      |
  <percentage>

兼容性

LCD tables only load in the browser

除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。