前端开发中的一些黑魔法Pt2

作者：大漠 日期：2016-07-15 点击：6832
Dirty Tricks
黑魔法

如果看完了还不过瘾？想和作者深聊相关话题，可以点击这里向作者提问！

上一篇介绍了前端开发中的九个黑魔法,比如链接的嵌套、破裂图片美化、表格列高亮显示、内联文本背景颜色设置、响应式EDM等，那么这篇文章继续根据@Vitaly Friedman在今年3月份分享了一个主题《Dirty Tricks From The Dark Corners Of Front-End》往下梳理，希望对您平时开发有所帮助。

神奇的Flexbox

CSS中Flexbox的出现，对于前端开发的同学来说绝对是一种福音，虽然它的版本众多，浏览器对其支持力度还不完全，甚至规范还在不断的修改，但其部分功能已经运用到实际开发当中。而且这些功能解决我们很多以前认为很痛苦的事情。你可能会说，是不是真的，如果你觉得言过其实，那希望你花点时间继续往下阅读。

Input Add-ons

初次看到Input Add-ons还是在Bootstrap中。别的先不多说，上张图先：

Input Add-ons

上图的演示，大家应该看到了效果，或许有些同学已经开始在思考，中间的input输入框是如何根据容器的空间来自动调整的。说实在的，早前实现这种效果是件痛苦的事情，不管是使用float还是绝对定位absolute，都无法让input根据其容器空间自动调整。Twitter的工程师想出的一个解决方案是采用display:table-cell来完成。虽然效果实现了，但灵活性还是没有Flexbox的强大。接下来看Flexbox是如何实现的：

HTML:

<!-- appending -->
<div class="InputAddOn">
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">…</button>
</div>

<!-- prepending -->
<div class="InputAddOn">
  <span class="InputAddOn-item">…</span>
  <input class="InputAddOn-field">
</div>

<!-- both -->
<div class="InputAddOn">
  <span class="InputAddOn-item">…</span>
  <input class="InputAddOn-field">
  <button class="InputAddOn-item">…</button>
</div>

CSS:

.InputAddOn {
  display: flex;
}

.InputAddOn-field {
  flex: 1;
  /* field styles */
}

.InputAddOn-item {
  /* item styles */
}

水平垂直居中

水平垂直居中

水平垂直居中常常是前端面试当中会碰到的一个题目，对于一位前端人员来说，这也是必须掌握的技能，而且到目前为止，实现这样的效果方案有多种多样。早在2011年，整理过近八种方案可以实现水平垂直居中的效果。当然，在不同的时代，不同的环境，不同的方案各有千秋。对于目前来说，Flexbox绝对是一个最佳方案：

.box {   
    display: flex;  
    align-items: center;  
    justify-content: center; 
}

扩展阅读

媒体对象(Media Object)

媒体对象

在行业内，一般将上图的组件效果都称之为媒体对象(Media Object)。其实就是@Nicole写的一个CSS代码片段,这个代码片段是常用来阐述OOCSS的最佳示例。如果你不知道Media Object是什么东东，建议你阅读一下这篇文章，了解一二。

将上面的效果拆分一下，就是这样：

媒体对象

最早实现这样的效果是借用BFC的概念,虽然能实现我们需要的效果,但存在一定的缺陷。比如：

  • media-objet和media-body顶部对齐(可以轻松实现)
  • media-object和media-body中间对齐(蛋疼了)
  • media-object和media-body底部对齐(蛋疼了)

如下图所示：

媒体对象

不过后来有同学提出Flag Object的概念，采用display:table-cell能顺利解决上述的蛋疼问题：

而这里要说的是，还是Flexbox来实现Media Object的效果：

HTML:

<div class="media">
    <img class="media-figure" src="" alt="" />
    <div class="media-body">...</div>
</div>

CSS:

.media {
    display: flex;
    align-items: flex-start;
}
.media-figure {
    margin-right: 1em;
}
.media-body {
    flex: 1;
}

Sticky Footer

Sticky Footer

上图的效果就是常说的Sticky Footer效果。就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的Footer部分在页面的底部，总而言之Web页面的Footer部分永远在页面的底部，换句说，Footer部分永远沉底。如下图所示：

Sticky Footer

@Matthew James Taylor提供了一种解决方案 。当然除Matther James Taylor介绍的方案之外，还有其它几种类似的方案。虽然这些方案能达到所需效果，但有一个最大的缺陷，就是要明确指定Footer部分的高度，这样一来受到的局限性就非常的大。而Flexbox可以改变这一局限性。

HTML

<body>
    <header>...</header>
    <main class="content">...</main>
    <footer>...</footer>
</body>

CSS

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.content {
    flex: 1;
}

这里运用到了CSS新提供的单位——视窗单位(vw、vh、vmin、vmax)

响应式等高区块

响应式等高区块

早期实现上图的效果，一般采用的方法是float或者display:inline-block，但这两种方法要做到上图的效果，都需要显式的设置每个区块的高度。如果只是根据内容来的话，就常会有这样的现象：

响应式等高区块

这也是常常有同学问我，为什么我的block掉到别的地方了。具体原因，是由于Block的高度不一致造成的。如果要解决上图的问题，我们需要给每个Block设置高度。而实际情况，我们又不想这么做，这个时候Flexbox的魅力就更显现出来了。

HTML

<ul class="list">
    <li class="list-item">...</li>
    <!-- other items -->
</ul>
剩余70%内容付费后可查看
* 请输入阅读码（忘记阅读码？）

如需转载，烦请注明出处：https://www.w3cplus.com/css/dirty-tricks-dark-corners-front-end-pt2.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部