风趣的CSS魔法和规划（代码）【css教程】,布局,css3

本篇文章给人人带来的内容是关于风趣的CSS魔法和规划（代码），有肯定的参考价值，有须要的朋侪能够参考一下，愿望对你有所协助。

媒介：规划和款式，是每一个前端的必修课。在一样平常的工作中，也会碰到一些特定场景的规划需求，合营上款式，就可以完成一些奇异的结果。我网罗了一些一样平常开辟中碰到的规划，以及阅读各大网站时恰巧发明的奇异殊效写法，在此做个分享。

由于篇幅缘由，会分为 2 篇。本日，会先引见一些风趣而又有用的规划的写法。以后的一篇，将展现款式的奇异魔法。

懒加载占位图自适应

在商城中展现商品图片时，假如图片较多，一种比较好的体验是：会先有一个占位图，目标是为了让页面无发抖，也就是所谓的图片懒加载结果。然则，当碰到适配时就比较头痛，特别是手机的反正屏切换。假如是经由过程 JavaScript 盘算的话，就能够会涌现发抖征象。

本着能用 CSS，就不必 JS 去完成的准绳，就有了下面这类计划：

<div class="img-ratio">
    <img src="http://via.placeholder.com/640x384">
</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 张图，都能完美地居中显现。

它的道理是：

依据容器的宽度，根据宽高比例，自动盘算出容器的现实大小，而且让容器内的如 img 等子元素自适应宽高。
图片父容器宽度 100%，父容器的高度百分比为：100 * 3 / 4 = 75%。
图片 absolute 而且完整铺满父容器。

挪动端的横向转动条

挪动端的界面，寸土寸金。偶然为了掌握屏幕的转动长度，会将一些模块横向分列。然则，横向分列会发生一些规划题目。

比方，挪动端的转动条款式，依靠与手机阅读器，各不雷同。一种解决计划是：把转动轴隐蔽掉，但不能 overflow-x:hidden;，不然就滚不动了。然后算好每一个横向的块的宽度，让最右边的块显露一部分，如许用户就晓得右边的屏幕以外另有内容，能够横向滑动。

又假如横向转动的宽度是未知的，由于能够会跟着营业的须要，转变横向模块的个数，那末横向排布就没法用 float 了。由于用了浮动，就得晓得悉数横向转动的宽度，悉数的宽度要比浮动块累加起来的宽度更宽，才保证浮动不换行。

所以，就有了下面如许的写法：

<div class="wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </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;。最外层的 p 应用高度差，把横向转动条藏起来。

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

一些官网，有顶部导航栏，导航栏的内容区每每须要居中展现，两旁则留白，导航栏的下方能够另有根线或许暗影，作为辨别顶部与主体内容。

.center-float {
    float: left;
    position: relative;
    left: 50%;
}

.center-float > ul {
    position: relative;
    left: -50%;
}

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

footer 置底

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

html 构造以下：

<html>
    <body>
        <div id="content">....</div>
        <div id="footer">....</div>
    </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;
    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 完成程度垂直居中

伪元素也能用来完成居中么？当时看到的一以为就以为挺奇异的，看下面这个例子：

<div class="wrapper">
    <img src="test.png">
</div>

.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 往下拉到了中心。

本篇文章到这里就已悉数完毕了，更多其他精彩内容能够关注ki4网的CSS视频教程栏目！

以上就是风趣的CSS魔法和规划（代码）的细致内容，更多请关注ki4网别的相干文章！