特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
上一篇介绍了前端开发中的九个黑魔法,比如链接的嵌套、破裂图片美化、表格列高亮显示、内联文本背景颜色设置、响应式EDM等,那么这篇文章继续根据@Vitaly Friedman在今年3月份分享了一个主题《Dirty Tricks From The Dark Corners Of Front-End》往下梳理,希望对您平时开发有所帮助。
神奇的Flexbox
CSS中Flexbox的出现,对于前端开发的同学来说绝对是一种福音,虽然它的版本众多,浏览器对其支持力度还不完全,甚至规范还在不断的修改,但其部分功能已经运用到实际开发当中。而且这些功能解决我们很多以前认为很痛苦的事情。你可能会说,是不是真的,如果你觉得言过其实,那希望你花点时间继续往下阅读。
Input Add-ons
初次看到Input Add-ons还是在Bootstrap中。别的先不多说,上张图先:
上图的演示,大家应该看到了效果,或许有些同学已经开始在思考,中间的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=
如需转载,烦请注明出处:https://www.w3cplus.com/css/dirty-tricks-dark-corners-front-end-pt2.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!