css - 为什么大多数侧边栏的例子都是 left 250 和 margin-left -250？

Question

查看 bootstrap 中的大多数示例，我看到侧边栏的 css 为 left:250px 和 margin-left:-250px。

为什么不使用 left: 0px 来得到相同的结果？

例子:

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Answer 1

我注意到 one project that used the practice在不同的窗口大小。

这样做的一个特点是要隐藏侧边栏，只需调用 left: 0，它就会将侧边栏移动其整个宽度，而不管侧边栏的当前宽度如何。这比使用 display: none 更好，因为它可以动画化以滑出屏幕，并且与调用 width: 0 不同，因为侧边栏仍然可以在情况下它不会离开屏幕。

例如:

$("button").click(function() {
  $(".sidebar, .content").toggleClass("hiddenSidebar");
});

body { margin: 0 }
.content {
  left: 100px;
  position: relative;
  transition: all 0.4s ease 0s;
}
.sidebar {
        width:  100px;
         left:  100px;
  margin-left: -100px;
  height: 500px;
  background: black;
  position: fixed;
  transition: all 0.4s ease 0s;
}
@media (max-width: 767px) {
  .content { left: 50px; }
  .sidebar {
          width:  50px;
           left:  50px;
    margin-left: -50px;
  }
}
.hiddenSidebar { left: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar"></div>
<div class="content">
  <button>Toggle Sidebar!</button>
</div>