Question

vertical-align: bottom和bottom: 0（或任何其他方向）选择器之间有什么区别？将元素放在屏幕边缘的更好方法是什么？

Answer 1

vertical-align是指内联级别元素的内容或表单元格内容的y轴对齐。

bottom是用于已定位元素的垂直对齐的CSS属性，对未定位元素没有影响。

当position的值设置为relative时，元素将使用自身作为参考。
当position的值设置为其他任何值（当然，static除外）时，元素将使用其最接近的祖先（对于absolute和sticky）或其最近的视口（用于fixed）作为参考。

因此，即使它们两者都可用于实现对元素的显示更改的子集，但由于它们具有不同的用途，因此无法在两者之间进行一般性的比较。

换句话说，在任何人都可以回答问题之前，您必须定义“更好” 在您的情况下意味着什么。有什么要求？

此外，请注意bottom仅影响复合层，而不影响样式，布局和绘画层。
当您要修改元素的呈现位置而不触发DOM中后续元素的重绘时，这一点变得很重要。
调整bottom值可达到此目的，因此使其成为动画的理想选择（因为它不会触发每个动画帧后重新绘制布局）。
但是，可以说，transform是性能更高的候选人，并且在可能的情况下，您应该在transform动画上使用bottom动画。

Answer 2

    *{
       margin:0;
       padding:0;
    }

    .name{
       background:red;
       height:200px;
       width:200px;
       position:relative;


          
    }
    h2{
       display:inline-block;
       vertical-align:bottom;
background:white;
    }
    .second {
       height: 100px;
       
    }
    .third{
       position:absolute;
       bottom:0;
    }

    <div class="name">
       <h2>bottom</h2>
       <h2 class="second">inline</h2>
       <h2 class="third">bottom</h2>
     </div>

底部0：绝对位置：将元素放置在其父对象的底部！在任何显示器上工作
vertical-align：bottom：将内联元素与行的底部对齐！使用内联元素（显示：内联，内联块..）进行垂直对齐！

底部：0与垂直对齐：底部

2 个答案: