本篇文章给大家带来的内容是关于有趣的CSS魔法和布局（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
前言：布局和样式，是每个前端的必修课。在日常的工作中，也会碰到一些特定场景的布局需求，配合上样式，就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局，以及浏览各大网站时碰巧发现的神奇特效写法，在此做个分享。
由于篇幅原因，会分为 2 篇。今天，会先介绍一些有趣而又实用的布局的写法。之后的一篇，将展现样式的神奇魔法。
懒加载占位图自适应
在商城中展示商品图片时，如果图片较多，一种比较好的体验是：会先有一个占位图，目的是为了让页面无抖动，也就是所谓的图片懒加载效果。但是，当遇到适配时就比较头痛，特别是手机的横竖屏切换。如果是通过 JavaScript 计算的话，就可能会出现抖动现象。
本着能用 CSS，就不用 JS 去实现的原则，就有了下面这种方案：
立即学习“前端免费学习笔记（深入）”；
@@##@@
.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 张图，都能完美地居中显示。
它的原理是：
根据容器的宽度，按照宽高比例，自动计算出容器的实际大小，并且让容器内的如 img 等子元素自适应宽高。图片父容器宽度 100%，父容器的高度百分比为：100 * 3 / 4 = 75%。图片 absolute 并且完全铺满父容器。
移动端的横向滚动条
移动端的界面，寸土寸金。有时为了控制屏幕的滚动长度，会将一些模块横向排列。但是，横向排列会产生一些布局问题。
比如，移动端的滚动条样式，依赖与手机浏览器，各不相同。一种解决方案是：把滚动轴隐藏掉，但不能 overflow-x:hidden;，不然就滚不动了。然后算好每一个横向的块的宽度，让最右侧的块露出一部分，这样用户就知道右侧的屏幕之外还有内容，可以横向滑动。
又如果横向滚动的宽度是未知的，因为可能会随着业务的需要，改变横向模块的个数，那么横向排布就没法用 float 了。因为用了浮动，就得知道整个横向滚动的宽度，整个的宽度要比浮动块累加起来的宽度更宽，才能保证浮动不换行。
所以，就有了下面这样的写法：
- 1
- 2
- 3
- 4
- 5
- 6
.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;。最外层的 p 利用高度差，把横向滚动条藏起来。
顶部导航不定宽的居中展示
一些官网，有顶部导航栏，导航栏的内容区往往需要居中展示，两旁则留白，导航栏的下方可能还有根线或者阴影，作为区分顶部与主体内容。
.center-float { float: left; position: relative; left: 50%;}.center-float > ul { position: relative; left: -50%;}
这是居中浮动的一种做法，再配合相对定位。
footer 置底
当页面主内容区高度不够时，footer 依然显示在最下面。这里当然不是指 position: fixed，footer是紧跟在内容区下方的。有 2 种方法。
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; flex-direction: column;}#content { flex: 1;}#footer { line-height: $footer-height; text-align: center;}
超宽的背景图片居中
一些传统的门户网站，它们的主内容区宽度大致为 980px 或 1000px 这样的经典宽度。有时候，会把较宽的图片作为整体背景图，居中放置，并且不要横向滚动轴，可以这么做：
.wrapper { min-width: 1000px; height: 800px; background: url(test.jpg) no-repeat center top;}.mainContent { position: relative; width: 1000px; margin: 0 auto;}
::after 实现水平垂直居中
伪元素也能用来实现居中么？当时看到的一感觉就觉得挺神奇的，看下面这个例子：
@@##@@
.wrapper { width: 300px; height: 300px; border: 1px solid #ccc; text-align: center;}.wrapper::after { content: ''; display: inline-block; vertical-align: middle; height: 100%;}.wrapper > img { vertical-align: middle;}
水平方向很好理解。垂直方向，可以理解为 ::after 把 img 往下拉到了中间。
本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的CSS视频教程栏目！
以上就是有趣的CSS魔法和布局（代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1614307.html
微信扫一扫 
支付宝扫一扫 
