css中子对象与父对象底对齐

在网页设计中，CSS是非常重要的一部分。虽然CSS语法简单，但是很多初学者可能还不知道如何实现父元素与子元素的底部对齐。本文将介绍CSS中子对象与父对象底对齐的方法。

首先，我们需要清楚的了解CSS盒模型。盒模型是指组成一个HTML元素的内容（content）、内边距（padding）、边框（border）、外边距（margin）这几个部分。下图是一个盒模型的示意图：

 +-------------+
  |   margin    |
  |             |
  |   +-------+ |
  |   |       | |
  |   |       | |
  |   |       | |
  |   |       | |
  |   +-------+ |
  |   padding   |
  |             |
  |   content   |
  +-------------+ 

在CSS中，我们可以使用属性vertical-align来控制子元素的垂直对齐方式。默认情况下，该属性值为baseline，即子元素的底部与父元素的基线对齐。如果我们想要实现子元素与父元素的底部对齐，可以使用position和transform属性组合的方式：

.parent {
  position: relative;
}

.child {
  position: absolute;
  bottom: 0;
  transform: translateY(100%);
} 

上面的代码中，我们首先将父元素的position属性设置为relative，使得子元素的定位基准点变成了父元素。接下来，我们将子元素的position属性设置为absolute，并且将bottom属性设置为0，这样就使其与父元素的底部对齐了。最后，我们使用transform属性的translateY函数将子元素向上移动了100%的距离，也就是自身的高度，使其底部对齐。

需要注意的是，如果父元素的高度没有被明确设置，那么这种方法可能会失败。因此，我们在使用这种方法时，一定要确保父元素拥有一个明确的高度值。

总的来说，CSS中实现子元素与父元素底部对齐的方法并不难，只需要了解盒模型和vertical-align属性即可。