深入理解css 笔记（4）

处理元素高度的方式跟处理宽度不一样。之前对 border-box 的修改依然适用于高度。而且很有用，但是通常最好避免给元素指定明确的高度。当明确设置一个元素的高度时，内容可能会溢出容器。当内容再限定区域放不下，渲染到父元素外面时。用 overflow 属性可以控制溢出内容的行为，该属性支持以下 4 个值。visible（默认值）所有内容可见，即使溢出容器边缘。hidden 溢出容器内边距的内容被裁剪，无法看见，scroll 容器出现滚动条，用户可以通过滚动查看剩余内容。auto 只有内容溢出时容器才会出现滚动条。

  所以倾向于用 auto，而不是 scroll,因为大多数情况下，不希望滚动条一直出现。用百分比指定高度存在问题。百分比参考的时元素容器快的大小，但是容器的高度通常是由子元素的高度决定的。这样会造成死循环，浏览器处理不来，因此，他会忽略这个声明。要想让百分比高度生效，必须给父元素明确定义一个高度。想使用百分比高度让一个容器填满屏幕，最好的方式是用视口的相对单位 vh。

  等高列的问题从 css 出现就一直困扰着人们。最早大家是用表格来实现。后面为了解决这个问题，诞生了很多创意的解决方案。使用伪元素，负外边距等方案。比如我们上面的页面，想要它们高度一致。最好的方法是让它们自己决定高度，然后扩展较矮的列，让它的高度等于较高的列。可以用 css 表格和 flexbox 两种方式实现。不过还是 flexbox 吧

<style>
  .container {
    display: flex;
  }

  .main {
    background-color: #fff;
    border-radius: 0.5em;
    width: 70%;
  }

  .sidebar {
    padding: 1.5em;
    background-color: #fff;
    border-radius: 0.5em;
    width: calc(30% - 1.5em);
    margin-left: 1.5em;
  }
</style>

  给容器设置 display:flex，它就变成了一个弹性容器，子元素默认等高。你可以给子元素设置宽度和外边距，加起来可能超过 100%，flexbox 也能妥善处理。设置高度一定会导致更复杂的情况，请尽量不要明确设置元素的高度。

  min-height 和 max-height。可以用这两个属性指定最小或最大值，而不是明确定义高度，这样元素就可以在这些界限内自动决定高度。如果你想要将一张大图放在一大段文字后面，但是担心它溢出容器，就可以用 min-eight 指定一个最小高度，而不指定它的明确高度。max-height 允许元素自然的增高到一个特定界限。如果到达这个界限，元素就不再增高，内容会溢出。

  vertical-align 声明只会影响行内元素或者 table-cell 元素。对于行内元素，它控制着该元素跟同一行内其他元素之间的对齐挂你。比如，可以用它控制一个行内的图片跟相邻的文字对齐。

  不同于内边距和边框宽度，外边距可以设置为负值。负外边距有一些特殊用途，比如让元素重叠或者拉伸到比容器还宽。负外边距的具体行为取决于设置在元素的哪边，

  负外边距的具体行为取决于设置在元素的哪边，如果设置左边和顶部的负外边距，元素就会相应的向左或向上移动，导致元素与它前面的元素重叠，如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来。给元素底部加上负边距并不等同于给它下面的元素顶部加上负外边距。

  上面的页面中，头部和容器 明明没有添加任何外边距，为什么他们之间会有间距呢？当顶部和/或底部的外边距相邻时，就会重叠，产生单个外边距。这种现象被称作折叠。外边距折叠的主要原因与包含文字的块之间的间隔相关。段落 p 默认有 1em 的上外边距和 1em 的下外边距。但是当前后叠放两个段落时，它们的外边距不会相加产生一个 2em 的间距，而会折叠，只产生 1em 的间隔。折叠外边距的大小等于相邻外边距中的最大值。标题的下方有 19.92px 的外边距，段落顶部有 16px 的外边距。较大者 19.92px 也就是最终渲染的两个元素之间。

  下面这些方法可以防止外边距折叠。使用 flexbox 布局。浮动元素，内连块。绝对定义，固定定位。或者给两个外边距加上边框或者内边距，防止它们折叠。

<style>
  .button-link {
    display: block;
    padding: 0.5em;
    color: #fff;
    background-color: #0090c9;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
  }
  .button-link + .button-link {
    margin-top: 1.5em;
  }
</style>

<aside class="sidebar">
  <a href="/twitter" class="button-link"> follow us on Twitter </a>
  <a href="/facebook" class="button-link"> like us on Facebook </a>
</aside>

  接下来给链接加上间距。现在它们上下堆叠在一起。分别或同时指定它们的上下外边距，两个按钮之间会发生外边距重叠。 margin-top: 1em;margin-bottom: 1em;只是我们只需要按钮之间有间距。可以使用相邻的兄弟组合器选中同一个父元素下紧跟在其他 button-link 后面的 button-link 元素。现在只在两个之间存在外边距。

<style>
  .sponsor-link {
    display: block;
    color: #0072b0;
    font-weight: bold;
    text-decoration: none;
  }
</style>

<aside class="sidebar">
  <a href="/twitter" class="button-link"> follow us on Twitter </a>
  <a href="/facebook" class="button-link"> like us on Facebook </a>
  <a href="/sponsors" class="sponsor-link">become a sponsor</a>
</aside>

  上述方法让一切如预期，但是如果在侧边栏添加更多内容，则会再次出现间距问题。虽然给链接加上顶部外边距也可以实现效果，但是考虑到 html 会频繁改动，也许下个月，总有一天这个侧边栏有些内容需要移动或者替换。每一次改变 html,都需要考虑这些外边距的问题。你得确保每个元素之间有间距，但是容易顶部/底部没有多余的间距。

  更通用的解决方案：猫头鹰选择器。该选择器开头是一个通用选择器，它可以选中所有元素，后面是一个相邻兄弟组合器（+)，最后是另一个通用轩再起。*+*因为它形似一只眼神空洞的猫头鹰而得名。

<style>
  .sidebar * + * {
    margin-top: 1.5em; // 猫头鹰选择器
  }
</style>