nervouself

《CSS揭秘》读书笔记10

满幅的背景，定宽的内容

需求是这样的，背景沾满屏幕宽度，内容定宽居中。我们一般就准备两层元素：外层用来实现满幅的背景，内层用来实现定宽的内容。后者是通过margin:auto实现水平居中的。

书中希望能够通过一个元素就实现这样的效果（能一个元素实现是好事，但是有时候吧这个作者啊即使花费非常巨大非常麻烦的代价也要追求一个单标签，实现完了还不兼容，有时候我觉得还是要综合下成本，不是在说这一节哦！），用到了calc()这个函数，用padding来实现内容居中，代码如下：

1
2
3
4
5
footer {
    padding: 1em;
    padding: 1em calc(50% - 450px);
    background: #333;
}

第一条padding是为了当浏览器不支持calc()的时候向后兼容，使内容两旁留有空白，书中称其为“一个相对合理的内边距”，但我觉得 1em 还是有点过于小；第二条padding将内容设置为最大 900px 且居中。

垂直居中

老生常谈的一个话题。

书中提到了以下几种方案：

  • 表格布局
  • 行内块法
  • 绝对定位
  • 基于视口单位的解决方案
  • 基于 Flexbox 的解决方案

主要说下倒数第二条，基于视口单位的解决方案。先上代码：

1
2
3
4
5
6
main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

就是把传统的绝对定位换成margin，然后利用到vh这个单位做上下移动，然后和translate配合，达到既不破坏文档流，又不依赖元素固定宽高，兼容性也不错（IE9+），确实比较厉害！

紧贴底部的页脚

书中给了基于视口单位的解决方案和基于 Flexbox 的解决方案，依旧介绍视口的这种方案。

假如页脚的高度已知（假设为7em），那么就可以将页脚以上部分设置min-height这个属性，保证在内容较少时也可以把页脚撑在下面，代码如下：

1
2
3
4
/* css */
#wrapper {
    min-height: calc(100vh - 7em);
}
1
2
3
4
5
6
7
8
<!-- html -->
<body>
    <div id="wrapper">
        <header></header>
        <main></main>   
    </div>
    <footer></footer>
</body>

妙哦！又是没有破坏文档流~~(●’◡’●)