Angular实现双向折叠列表组件的示例代码(3)

显然buttons是占据了文档流的位置的，如果这时候我们用relative定位buttpms，并且设置left的值为-74px（注意到left为负数就会把元素往左推）：

.buttons{
  display: flex;
  position: relative;
  margin-top: 23px;
  left: -74px;
}

效果图为：

发现如果用left的话，buttons原来的文档流位置依然存在，只是buttons相对于原来的位置移动了一定的位移。

如果我们用margin-left来设置呢：

.buttons{
  display: flex;
  position: relative;
  margin-top: 23px;
  margin-left: -74px;
}

效果图为：

它和left不同之处在于，left会留住原来的文档流位置，但是用margin-left原来的文档流位置会消失，而由后面的元素补充过来，而我们想要的效果，正好是用margin-left来实现的。

所以用CSS定位的时候，要明白left和margin-left的区别，从而选择正确的方式来定位。

总结一下，从这个案例中我们学习到了：

1. 双向折叠可以用“3种页面状态去控制2个按钮”来实现
2. enum在Angular Component的template中用到时，需要在compnent class中添加它的引用
3. 控制元素样式有很多方法，要选择合适的方法
4. CSS定位中left和margin-left虽然都能把元素推向左边，但是left保留原来文档流位置，margin-left不保留原来文档流位置。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。