#bottom

#介绍

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

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

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

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

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

#使用示例

css-apisrc/bottom/App.tsx

Code

预览

#语法

/* <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

  默认值。

#形式定义

#形式语法

bottom =
  auto                |
  <length-percentage>

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

#兼容性