[ 基础系列 ] - CSS 小测 06

初心Yearth
421 阅读3分钟

系列文章

说在前面

本篇是张鑫旭老师的 CSS 基础测试7 的阅后笔记。（Seasonley 同学的表格布局兼容性较强，ziying 同学的 margig:auto 很有深度）

题目

先来看看题目。

HTML 如下：

<main class="container">
    <content class="content"></content>
    <footer class="footer"></footer>
</main>

请实现以下效果：如果 .content 高度较小，则 .footer 定位在窗口底部；如果 .content 内容比较多，高度超过一屏，则 .footer 跟随在 .content 之后，可以一起被滚动。

需求：

  • .footer 高度不固定

思路

这道题没有什么难度，通过 flex，grid 都能实现，这里依次大致介绍一下。

flex

如果不考虑兼容性的话（IE9 以上），flex 用于实现自适应布局非常有优势。

想要实现题目中的效果，只需要以下代码即可：

body {
    margin: 0;
}

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content {
    text-transform: uppercase;
    background: deeppink;
}

.footer {
    text-transform: uppercase;
    background: deepskyblue;
}

效果如下：

img-01

可以看到，关键点只有两点

  • 通过 flex-direction: column 更改文档流流向
  • 通过 justify-content: space-between 让元素两端对齐

grid

grid 布局在这种情况下其实实现也非常简单，甚至不用更改文档流流向：

.container {
    min-height: 100vh;
    display: grid;
    align-content: space-between;
}

效果如下：

img-02

关于 margin: auto

ziying 同学的答案得到了满分，我们来看看他的回答：

html,
body {
    padding: 0;
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    background: pink;
    margin-top: auto;
}

乍看上去似乎没什么，但仔细一瞧，这里并没有使用 justify-content: space-between 来使元素两端对齐，而是使用了一个 margin-top: auto，这个 margin-top: auto 到底是怎么使 footer 对齐底部的呢？

这要牵扯到块元素文档流了，我们都知道，要想使一个块具有 width 的块元素水平对齐，只需要 margin: 0 auto 即可，这里延伸一下，如果是 margin-left: auto 呢？

效果如下：

img-03

可以看到，这里元素实现了靠右对齐（之后遇到让元素靠右对齐，也可以多使用这样的方案，浮动会破坏文档布局，是不优雅的方案）

这时如果去掉元素的宽度，可以知道，元素会自动水平填满父元素。 那么可以总结一下，如果一个元素可以自动填满父元素的情况下：

  • margin: 0 auto：水平居中
  • margin-left: auto：右对齐

其实 margin-right: auto 应该是左对齐，不过默认情况下就已经是这样了。

到这里可以推测，如果元素能垂直填满父元素，margin: auto 应该能够让元素直接水平垂直居中。

由于块元素默认会水平填满父元素，而高度也与内容有关，所以这里借助绝对定位。

.content {
  position: absolute;
  height: 300px;
  width: 300px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: deeppink;
}

效果如下：

img-04

所以就能解释，为什么在 flex 环境下，margin-top: auto 能使 footer 置于底部了。

结束语

这期其实算是比较简单的一期了，核心就在 margin: auto 身上。

然后这里是 在线 demo

avatar
文章
阅读
粉丝