CSS Conf -《新时代CSS布局》学习总结

• 做者：陈大鱼头
• github： KRISACHAN
• 记录缘由：2019年3月30日在深圳举行了第五届的CSS Conf，鱼头做为一枚CSS新手以及爱好者也报名参加了。若是想知道鱼头参加完以后的感觉，能够看知乎问题“参加2019年03月30日深圳第五届CSSConf是如何体验？”的回答。会上分享学习了许多干货知识，由于怕本身遗忘，遂写文章，以便后续记忆。

分享嘉宾简介

《新时代CSS布局》的分享者是新加坡的国际知名CSS专家陈慧晶。陈慧晶老师的我的博客地址是：www.chenhuijing.com/。

陈慧晶老师的分享主题介绍以下：

CSS布局常常是令前端开发者头痛的一块工做。可是近几年来，浏览器不断发展，开始支持弹性盒子、网格布局、盒模型对齐等布局功能。这些CSS标准纯粹是为了应付网络布局而编写的。咱们将深刻了解这些新属性的特征，新时代的布局技巧、例子及最佳实践。但愿听众会有所启发，利用这些新的CSS属性创造更符合浏览器本质的设计。

本次分享的在线Slide: www.chenhuijing.com/slides/53-c…

为何纵向比横向难排？

在分享的开始，慧晶老师便抛出了上述的问题。

其实答案也很简单，就是由于在最初的时候，HTML跟CSS只是为了欧美国家而服务，而欧美国家文字排版又是横向的，因此最开始的设计也是也横向的文档流为主，到后面互联网不断发展，链接至全世界的时候，才有了纵向排版的需求，因此结论就是设计者一开始并无考虑纵向排版，因此后续有需求的时候才会出现纵向比横向难排的问题，关于纵横布局的比较能够查阅鱼头的Hello CSS系列的CSS的逻辑属性与盒子模型。

而后慧晶老师便分享了互联网的发展史。关于这部份内容，有兴趣的也能够查阅鱼头的Hello CSS系列的序章-起源。

在这里，慧晶老师分享了一个颇有趣的连接，就是能够查看最初的网页长什么样，连接在此：worldwideweb.cern.ch/browser/。

Web布局系统

在这一小节中，慧晶老师主要分享了Flexbox、Grid跟Box Alignment这CSS新时代布局的三大栋梁。

CSS布局部队

CSS布局部队是由如下以及其余的553个属性组成。由于CSS是个团队项目。只有各属性相互协调配合，才能把CSS的威力彻底发挥出来。

浏览器的渲染过程

慧晶老师又介绍了浏览器的渲染过程，如下是原文摘抄。

若是要揭开CSS布局的神秘面纱，那就必须先熟悉浏览器的渲染过程。渲染引擎会把服务器发送过来的Source文档解析成浏览器可以明白的对象。而在渲染网页以前，浏览器会生成一个渲染树。这个渲染树是个中介性的结构（intermediary structure），是文档格式结构（formatting structure）的表示法。

CSS在解析的过程，会计算出每一个元素和文本节点的每一个CSS属性值。浏览器就会靠其中的取值来判断要生成哪一类的盒子。

CSS显示模块（CSS Display Module Level 3）

慧晶老师又介绍了**CSS显示模块（CSS Display Module Level 3）**，如下是原文摘抄。

CSS显示模块在这二十多年来，通过很多演变。从一开始的基本、到如今最新规范中一共有十七种属性值。此规范提出了两种显示类型，内部及外部。内部显示类型定义了元素内子元素的布局方式，外部显示类型则定义了元素怎样参与流式布局的处理。

CSS在解析的过程，会计算出每一个元素和文本节点的每一个CSS属性值。浏览器就会靠其中的取值来判断要生成哪一类的盒子。

CSS显示模块规范提出了两种显示类型，内部及外部。内部显示类型定义了元素内子元素的布局方式，外部显示类型则定义了元素怎样参与流式布局的处理。

Flex

在这部分慧晶老师主要介绍了Flex的语法以及使用技巧（关于语法部分，在此再也不累述，有兴趣的能够翻阅MDN）。慧晶老师在介绍完Flex以后便开始了第一个栗子：自动margin是你的好友

在上面这个简单的例子，容器内只有一个子元素。咱们能够运用margin来操纵它。若是不设定任何方向，盒子就会在容器的正中间。一行搞定水平垂直居中的问题。

而后慧晶老师提问到：“为何块格式自动margin不垂直居中元素？”

缘由是若是元素的高度设为auto，那浏览器在计算它的高度时，只会考虑元素内容及子元素，纵向没有已肯定的空间来调整位置。即便元素设了固定的高度，别忘记它跟子元素是互不相关的。这颇有多是浏览器最初执行的抉择遗留下来的行为。浏览器没办法计算上下方的margin取值，因此就把auto取值解析成0。

容器–项目的「父子」关系

这是慧晶老师以前提到的转折点。由于flex或grid容器跟子元素的关系，在布局时是被浏览器认可的。所以，浏览器才有办法计算出四面的自动margin取值。

CSS盒式对齐模块

在这一节，慧晶老师对CSS盒式对齐模块(CSS Box Alignment Level 3)进行了介绍。

在这里，慧晶老师解释道：

固然，光靠自动margin是不够的。要更精确的调整子元素的位置，咱们能够运用盒式对齐模块（box alignment）提供的属性值。

Flexbox的首个公开工做草案是在2009发布的，而Grid的则是2011发布。当时两个规范设定了两组不一样的对齐属性。通过讨论，工做组决定把盒子对齐写成独立的规范，让过去、如今和将来的formatting contexts都统一使用相同的属性。

Box alignment的属性一共有六个。在使用flex时，用得上其中四个，使用grid的话，六个属性所有都能用。

鱼头注：这里具体的属性也不累述了，有兴趣的能够自行查阅[W3C][www.w3.org/TR/css-alig…]或者W3C PLUS

Grid或者Flexbox?

“因此应该是用Gird仍是Flex？”

关于这个问题的答案，慧晶老师回答道：

这不是个二选一的情况，应该是二合一才对。

Flexbox比较适合单维方向的布局。由于运用Flexbox来实现的行列，即便对齐了，也只是个假象。Flexbox的行跟列是互不相关的。可是在单维布局，它拥有最强的弹性功能。

Grid则适合作二维网格布局，由于Grid中的行列才是真实的，才是是有关系的。你能够像在棋盘上排棋子似的，把Grid项目排成理想的布局。

要实现相似上面布局的设计，用新时代布局方式是作获得的。要如何实现这种内容不对齐，环绕每一个Grid单元厚厚的border？若是单靠Grid，用Box alignment属性，能够吗？

很惋惜，作不到。以前有提过，Grid项目对齐的默认值是stretch。一旦用上任何之外的取值时，项目就会立刻缩到内容的尺寸。但是若是咱们在Grid项目上设一个display:flex，把它变成Flex容器。那表示Grid项目里面的内容，成为了Flex项目。如今利用Box alignment的各属性调整内容的位置就不会影响到Grid项目的尺寸，border也能够保持在Grid线上了。

百分比的局限（一致性的伸缩率）

慧晶老师原话：“如今已经至关广泛的响应式网页设计，主要是依靠百分比来设定元素的尺寸。运用百分比的局限就是每一个元素伸缩率是一致的。有时，这会致使开发者为了应付各类viewport尺寸范围，被逼要写数不清的media query。

在深刻研究这些新的布局模式时，我发现到最有趣的东西是灵活性尺寸。根据所设定的属性值，元素伸缩的变化率是有差异的。有些属性值会「坚持本身的立场」，在viewport变化的情况下，尽可能保持范围内的宽度。这样讲有点难了解，仍是看看一些用例吧。”

接下来慧晶老师主要是对如下三组属性进行了对比：

1. fr对比auto

2. max-content对比固定width

3. fit-content对比minmax()

（鱼头注：关于上述属性对比，有兴趣的童鞋能够点击连接查看）

兼容处理

慧晶老师说：“Grid正式发布到如今，已经有大概两年的时间，浏览器的支持程度现在也高达88%，能够算是被普遍支持了。可是其它12%的用户该怎么办呢？”

上述问题其实CSS能够经过feature query作功能检测。它的语法相似media query，只是用的关键字是@supports

（鱼头注：关于@supports的使用，有兴趣的能够查看鱼头的文章[第一章-CSS的语法与工做流）

若是你、喜欢探讨技术，或者对本文有任何的意见或建议，你能够扫描下方二维码，关注微信公众号“ 鱼头的Web海洋”，随时与鱼头互动。欢迎！衷心但愿能够碰见你。