[分享]css中bottom的默认值

在CSS中，bottom属性常常被用于定位一个元素相对于其父元素的位置。当我们不指定bottom属性的具体值时，浏览器会默认将其值设为“auto”。 .box { : relative; bottom...

在CSS中，bottom属性常常被用于定位一个元素相对于其父元素的位置。当我们不指定bottom属性的具体值时，浏览器会默认将其值设为“auto”。

 .box {
        position: relative;
        bottom: auto;
    } 

这个默认值的含义是元素的底部边缘与其父元素的底部边缘重合，也就是说元素在其父元素的底部位置。当我们使用bottom属性设定一个具体的数值时，它将会改变元素与其父元素底边的距离。

需要注意的是，当父元素的高度小于子元素高度加上bottom值时，将会出现布局错误。

 .parent {
        height: 50px;
    }
    .child {
        height: 80px;
        position: relative;
        bottom: 30px;
    } 

在这个例子中，子元素的高度为80px，bottom值为30px，而父元素的高度只有50px。此时子元素将会超出父元素的高度，导致父元素的布局发生错误。

因此，当使用bottom属性时，我们需要注意元素的父元素的高度，并合理设置bottom的具体值，以避免布局错误的发生。