CSS方案总结
2018-05-16 本文已影响4人
Scarlett_L
一、Sticky Footer效果
无论页面内容高度如何变化，footer始终在页面底部的固定位置
body {
display: flex; //父元素设为flex布局
flex-flow: column; //设为列布局，否则所有元素会在一行显示
min-height: 100vh; //设置body最小高度，让<body>内容不足视窗高度时也能占据整个视窗
}
/*高度会变化的主要部分，footer就会被挤到下一行，从而实现
footer在页面高度变化时始终在页面底部的固定位置*/
.main {
flex: 1;
}
二、垂直居中
1、绝对定位实现
.main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
缺点：
- 绝对定位通常不是一个很好的选择，因为它对整体的布局影响相当的大。
- 如果垂直居中元素的内容比视窗高度更高的话，它的顶部会被裁剪掉。但是这个问题可以解决，只不过需要使用一些Hack手段。
- 在一些浏览器中，可能会导致元素出现略微的模糊，那是因为元素有可能被放置在半个像素位置上。我们可以通过
transform-style:preserve-3d来解决，尽管这是一个Hack手段，不能保证它不会过时。
2、在视窗中垂直居中
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
三、流体背景，固定宽度内容
- 有多个内容部分
<section>,每个内容都占据整个视窗宽度而且都有不同的背景。 - 固定宽度的内容，即使宽度会根据不同的媒体查询修改。在某些情况之下，不同的区域
<section>会有不同的内容宽度著作权归作者所有。
完成这样的效果最常见的方法就是使用两个元素，一个用于流体的背景，另一个用于固定宽度的内容。后者使用margin: auto，让内容保持水平居中。例如，页脚的区域，他的结构如下：
<footer>
<div class="wrapper">
<!-- 这里放页脚的内容 -->
</div>
</footer>
CSS通常这样写：
footer {
background: #333;
}
.wrapper {
max-width: 900px;
margin: 1em auto;
}
