一些实用的 CSS 布局的写法

发布时间：2019-04-02责任编辑：满帅浏览：1378

布局和样式，是每个前端的必修课。在日常的工作中，也会碰到一些特定场景的布局需求，配合上样式，就能实现一些神奇的效果。这篇文章搜罗了一些日常开发中遇到的布局，以及浏览各大网站时碰巧发现的神奇特效写法。

懒加载占位图自适应

在商城中展示商品图片时，如果图片较多，一种比较好的体验是：会先有一个占位图，目的是为了让页面无抖动，也就是所谓的图片懒加载效果。但是，当遇到适配时就比较头痛，特别是手机的横竖屏切换。如果是通过 JavaScript 计算的话，就可能会出现抖动现象。

本着能用 CSS，就不用 JS 去实现的原则，就有了下面这种方案：

</div>

.img-ratio {

width: 100%;

position: relative;

padding-top: 75%;

}

.img-ratio > img {

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

}

可以适配不同屏幕，只要 UI 提供一张 4:3 的占位图即可。下图展示了不同宽高，但比例相同的 2 张图，都能完美地居中显示。

它的原理是：

l根据容器的宽度，按照宽高比例，自动计算出容器的实际大小，并且让容器内的如 img 等子元素自适应宽高。

l图片父容器宽度 100%，父容器的高度百分比为：100 * 3 / 4 = 75%。

l图片 absolute 并且完全铺满父容器。

移动端的横向滚动条

移动端的界面，寸土寸金。有时为了控制屏幕的滚动长度，会将一些模块横向排列。但是，横向排列会产生一些布局问题。

比如，移动端的滚动条样式，依赖与手机浏览器，各不相同。一种解决方案是：把滚动轴隐藏掉，但不能 overflow-x:hidden;，不然就滚不动了。然后算好每一个横向的块的宽度，让最右侧的块露出一部分，这样用户就知道右侧的屏幕之外还有内容，可以横向滑动。

又如果横向滚动的宽度是未知的，因为可能会随着业务的需要，改变横向模块的个数，那么横向排布就没法用 float 了。因为用了浮动，就得知道整个横向滚动的宽度，整个的宽度要比浮动块累加起来的宽度更宽，才能保证浮动不换行。

所以，就有了下面这样的写法：

<ul>

</ul>

</div>

.wrapper {

width: 340px;

height: 80px;

overflow: hidden;

}

.wrapper ul {

height: 96px;

width: 100%;

white-space: nowrap;

overflow-x: scroll;

padding: 0;

margin: 0;

}

.wrapper li {

display: inline-block;

width: 80px;

height: 80px;

background-color: #ddd;

line-height: 80px;

text-align: center;

font-size: 20px;

margin-right: 10px;

}

它的思路是：ul 设置 white-space:nowrap;，li 设置 display:inline-block;。最外层的 div 利用高度差，把横向滚动条藏起来。

顶部导航不定宽的居中展示

一些官网，有顶部导航栏，导航栏的内容区往往需要居中展示，两旁则留白，导航栏的下方可能还有根线或者阴影，作为区分顶部与主体内容。

.center-float {

float: left;

position: relative;

left: 50%;

}

.center-float > ul {

position: relative;

left: -50%;

}

这是居中浮动的一种做法，再配合相对定位。

footer 置底

当页面主内容区高度不够时，footer 依然显示在最下面。这里当然不是指 position: fixed，footer是紧跟在内容区下方的。有 2 种方法。

html 结构如下：

<html>

<body>

</body>

</html>

1、margin & padding

html, body {

height: 100%;

}

$footer-height: 30px;

#content {

min-height: 100%;

margin-bottom: -$footer-height;

padding-bottom: $footer-height;

}

#footer {

line-height: $footer-height;

text-align: center;

}

2、flex 布局

$footer-height: 30px;

html {

height: 100%;

}

body {

min-height: 100%;

display: flex;