构建杂志布局可能会用到的CSS特性

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

Web布局可以说是灵活的也是久被受限的。在众多的开发者眼里,Web的布局就应该是方方正正的,因为Web中的每个元素都类似一个盒子,这些盒子就是方方正正,规规矩矩地。同时在很多视觉的眼里也认为,Web的布局无法打破矩形排列的限制。比如说,要在Web中实现一个类似杂志的排版是非常困难的,甚至是不太可能的。值得庆幸的是,时至今日,Web的技术在不断的革新,很多新的特性可以让我们打破这样的限制,让你在Web上实现像杂志一样的排版布局。接下来,我们就来看看,在Web中实现媒体布局会有哪些亮点,有可能会用到哪些特性。

杂志布局

一直以来,我们看到的Web布局或者说我们致力实现的Web布局都类似下图这样方方正正:

而往往止步于像杂志排版的Web布局效果:

在这篇文章中不会和大家过多的纠结什么样的Web布局(正常的Web排版 vs. 像杂志的Web排版)效果更好。我们还是仅从技术层来聊这方面的事情,必竟我们是做技术的。

众所周知,Web的排版技术也经历了很多的变革。针对不同阶段,Web布局相对应的模式也可以套入整个设计演变过程,如果有人猿进化来描述的话,有点类似下图:

如果你对Web布局演进过程感兴趣的话,建议花点时间阅读《Web布局发展历程》一文。

从上图我们可以看出,自从2019年开始,Web的设计就得不是那么的循规蹈矩,看上去更复杂,也更有范了。同时在互联网上也能逐渐看到这些复杂布局的Web页面。甚至是类似杂志排版的Web布局效果也逐渐在互联网上有其身影。比如@Andy Clarke的新书《Art Direction for the Web》就专门介绍了这方面的技术。

CodePen上也不泛这方面的案例

杂志布局可能会运用到的技术

如果你有一定要实现类似于杂志布局的效果,将可能会运用到下面这些技术。

Flexbox和Grid

到目前为止,Flexbox可以说是目前最为流行运用最广泛的一种布局技术。因为他足够的灵活,相对而言,开发者使用他来为Web布局可以省去很多的烦恼,而且灵活性和可扩展也非常的强。但他也有一定的局限性,那就是他依旧是一维布局。

CSS Grid将改变这种局面,因为他是唯一的一种二维布局技术。在现代的布局中,可以将Flexbox和Grid结合在一起使用,可以达到更佳的效果。比如@shadeed9在他的博文中《Highlights From Building a Magazine Layout》举的示例,就将这两种布局技术结合在一起,实现了类似杂志的布局效果。

如果你看到效果不是像下图这样的话,建议你打开浏览器重新访问上面示例:

Highlights From Building a Magazine Layout》一文就是介绍如何实现一个杂志布局的,文章中还介绍了一些实现杂志布局的亮点,后文中我们也会提到相关的技术点。

CSS Exclusions

早在2012年@Christian Cantrell在《

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/highlights-from-building-a-magazine-layout.html

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

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