bottom可接受的值包括:
auto: 默认值,此时元素垂直居中于容器。 length: 单独设置元素距离容器底部的长度,如10px。 %
示例:
.container { position: relative; height: 300px; width: 500px; background-color: #e6e6e6; } .box { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 150px; height: 50px; background-color: #ff9f43; color: #ffffff; text-align: center; line-height: 50px; }
在这个示例中,大家首先创建了一个相对定位的容器,设置其高度和宽度,并为其设置了背景色。然后在容器中创建了一个绝对定位的元素,设置bottom为20px,也就是距离容器底部20px的位置。
最后通过transform属性和left: 50%将元素水平居中。此时,元素将出现在容器底部居中的位置。
总之,bottom属性可以让大家更好地控制元素在容器中的位置,使页面设计更加灵活、美观。