这些用于布局的新属性能用吗?

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

这个话题是@Rachel Andrew于2019年9月在英国爱丁堡举办的Finch front的一场演讲,其原标题是Does it work? Using the new CSS Layout,我在这里将其译为这些用于布局的新属性能用吗?。这个话题中的内容非常的有意思,其中有些内容在小站上也有过相应的介绍。今天看了该PPT,觉得有些内容还是非常的有意思,值得和大家分享。

分享的主题

该主题的PPT比较长,总共有111页面,涉及到有关于布局多个新的知识点,如果你不想花时间阅读后面的内容,可以点击下图直接阅读PPT:

在过去,我们所接触到的Web布局都是一些最基本的布局,时至今日,Web布局系统变得更为复杂,但了变得更为灵活,而且这些汇总到一起可以称得上是一套布局的系统,该系统变得复杂而又灵活。简单地说,她将以GridFlexbox系统为主线,并由一系列CSS的概念和避属性来进行扩展,让Web布局更为灵活和强大。而这些概念也有利于我们更好的理解Web上怎么来更好的实现所需要的布局。

@Rachel Andrew这次的主题分享从整体的角度来看CSS的布局。通过这个主题的学习,我们可以了解到现代的Web布局和传统的布局有何不同,又有哪些CSS新特性来支持现在或将来的Web布局。在接下来的内容中,我们将会了解到CSS的GridFlexbox多列布局BFC书写模式和关于滚动的一些特性。如果你对这方面感兴趣的话,欢迎继续往下阅读。

CSS是独特的也是令人惊奇的

社区总是有一种声音,特别是今天有众多优秀的JavaScript框架出现的时候,这种声音在社区中更为强烈:

CSS很简单,没有任何技术含量

听到这种声音,我总是喜欢用下图来反驳:

看到上图,估计很多人又要说我矫情了。事实上呢?只有自己心理才明白。

回到CSS的世界中来,CSS在很多开发人员中是太微不足道了,也从不担心CSS有什么难度,但是很多开发人员又不理解CSS,甚至觉得要理解CSS太难了,有的时候甚至会让自己抓狂。

这也正是CSS独特和令人感到惊奇之处。

这里推荐几篇文章给大家:

上面这几篇文章有助于你更好的阅读W3C的规范,更利于你提高自己CSS方面的能力。

提高CSS水平最好的方式是掌握如何阅读W3C规范

普通流

普通流实际上就是大家平时所说的文档流(实际上在规范中没有文档流这个词,只不过是大家习惯性用文档流这个词而以)。普通流是CSS中最为基本的概念,也是重要的概念之一。而在Web的布局世界中,普通流又被称为无布局的布局

默认情况下,HTML中的元素都会按照其在HTML源码文档中的先后位置从左至右自上而下依次堆叠:

不过上面这种说法仅仅是以前的一种说法,对于现代的Web来说,HTML中的元素不仅仅是从左至右自上而下依次堆叠,也有从右至左自上而下依次堆叠,比如“人民网阿文版”,它就是一种从右向左自上而下堆叠

而源的顺序(普通流)又是非常重要的,比如用户在使用tab键来操作你的页面时,会显得尤其突出:

另外一点,一个具有好的源的顺序的文档,更有利于用户阅读你的文档,如果你想检验你的文档流是否写得好,可以通过不添加任何(仅运用客户端默认的样式规则)样式来查阅你的Web:

不管是在HTML中使用dir属性,还是在CSS中使用书写模式(writing-mode)属性都可以让你较为轻易的处理普通流的顺序。除此之外,在CSS Grid和Flexbox布局中,还可以有其他的姿势来改变源的顺序,比如在Flexbox中给Flex项目显式设置order属性,比如在Grid中使用grid-columngrid-rowgrid-area等属性显式指定Grid项目位置等。在后面我们会多少聊到这方面的知识点。

Grid或Flexbox

是选择Grid还是Flexbox,这是一个可怕的问题。

我们用如何实现列布局来举例。比如我们要实现类似下图这样列布局的效果:

早年的Web布局方式中,可能首先会考虑到的是CSS浮动(float。只不过使用浮动布局,需要每个列的宽度。如果每列的宽度用的都是百分比来设置列的宽度时,当浏览器窗口缩小到一定的程度(没有足够宽度容纳列的内容时)很可能会出现列的换行。

除此之外,使用浮动布局还有一些其他的问题,最起码你总要考虑在有浮动的地方使用清除浮动。如果从CSS的最初设计原则来说,浮动也不是用来处理Web布局的,而是用来实现文本围绕图片(元素)的排版效果。只不过在特定的历史环境之下,使用他来实现我们想要的Web布局效果。

随着CSS的新特性的出现,Web的布局不在局限于其中的一两种方案。同样拿列的布局来举例,实现列的布局有很多种方式。咱们先来看多列布局。

多列布局

在CSS中有专门为多布局的属性,那就是CSS Multi-column Layout Module Level 1模块中提供的column-*columnsbreak-*等属性。我们可以使用这些属性轻易的实Web多列布局。比如使用:

  • column-count控制列数
  • column-width控制列宽
  • column-gap控制列间距
  • column-span实现跨列
  • break-inside控制列是否被打断

我们来看一个使用这些属性实现的多列布局:

.columns {
    column-count: 3;
    column-width: 25vw;
}

section {
    break-inside: avoid;
}

.columns h1,
    section h2 {
    column-span: all;
}

实际是多列布局的属性在不同的浏览器得到的效果不一样:

在多列布局当中,默认情况下,列的宽度是灵活的,会根据容器自动计算,比如上面的示例中,如果把column-width样式禁用掉,改变容器宽度时,列宽度也会自动调整,效果如下:

有关于多列布局更多的介绍可以阅读下面相关文章:

不容忽视的display

display属性我想大家都熟悉,如果用一句话来描述的话:

CSS的display属性可以用来改变元素的视觉格式化模型,即改变框的类型

要彻底理解display属性将需要了解CSS的基本概念,比如视觉盒模型、盒模型等。建议大家花点时间阅读下面这几篇文章:

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

如需转载,烦请注明出处:https://www.w3cplus.com/css/does-it-work-using-the-new-css-layout.html

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

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