摘要：分享嘉宾简介新时代布局的分享者是新加坡的国际知名专家陈慧晶。陈慧晶老师的分享主题介绍如下布局经常是令前端开发者头痛的一块工作。布局系统在这一小节中，慧晶老师主要分享了跟这新时代布局的三大栋梁。的首个公开工作草案是在发布的，而的则是发布。
分享嘉宾简介作者：陈大鱼头
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布局系统CSS布局部队在这一小节中，慧晶老师主要分享了Flexbox、Grid跟Box Alignment这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。
容器–项目的「父子」关系CSS盒式对齐模块这是慧晶老师之前提到的转折点。因为flex或grid容器跟子元素的关系，在布局时是被浏览器承认的。因此，浏览器才有办法计算出四面的自动margin取值。
在这一节，慧晶老师对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变化的状况下，尽量保持范围内的宽度。这样讲有点难了解，还是看看一些用例吧。”
接下来慧晶老师主要是对以下三组属性进行了对比：
fr对比auto
max-content对比固定width
fit-content对比minmax()
（鱼头注：关于上述属性对比，有兴趣的童鞋可以点击链接查看）
兼容处理慧晶老师说：“Grid正式发布到现在，已经有大概两年的时间，浏览器的支持程度如今也高达88%，可以算是被广泛支持了。但是其它12%的用户该怎么办呢？”
上述问题其实CSS可以通过feature query做功能检测。它的语法类似media query，只是用的关键字是@supports
（鱼头注：关于@supports的使用，有兴趣的可以查看鱼头的文章[第一章-CSS的语法与工作流）
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/7086.html
摘要：指令模板显示第到第条记录总共条记录每页显示条记录指令列表数据接口请求参数请求对象数据事件名外部调用分页查询的事件监听事件服务配置参数加载数据改变页大小下一页上一页加载指定页 指令html模板 page.html 显示第 {{(conf.currentPage-1) * conf.pageSize + 1}}...
摘要：指令模板显示第到第条记录总共条记录每页显示条记录指令列表数据接口请求参数请求对象数据事件名外部调用分页查询的事件监听事件服务配置参数加载数据改变页大小下一页上一页加载指定页 指令html模板 page.html 显示第 {{(conf.currentPage-1) * conf.pageSize + 1}}...
摘要：再次搜索，得到原因分析通过运行测试程序来获得等数据类型的大小，由于交叉编译器所编译出的程序无法在编译主机上运行而产生错误。 首先安装以下库： // 貌似一起安装 apt-cyg 不能识别，得一个一个得安装，有些库貌似没找到 // apt-cyg install openssl pcre zlib automake bison curl-devel flex libiconv ...
摘要：构建配置其它代码启动启动后，用数据连接工具测试，链接地址树莓派端口用户名密码到此为止，属于你自己的工作环境已经做好了。 普通PC环境也可以用以下配置，只是MYSQL那里换回mysql官方版本就可以。 Docker 安装 $ curl -sSL get.docker.com | sudo sh 工作目录 /lnmp/conf 存放虚拟主机配置/lnmp/data/mysql 存放mys...
摘要：构建配置其它代码启动启动后，用数据连接工具测试，链接地址树莓派端口用户名密码到此为止，属于你自己的工作环境已经做好了。 普通PC环境也可以用以下配置，只是MYSQL那里换回mysql官方版本就可以。 Docker 安装 $ curl -sSL get.docker.com | sudo sh 工作目录 /lnmp/conf 存放虚拟主机配置/lnmp/data/mysql 存放mys...
阅读 681·2023-04-25 19:43
阅读 3854·2021-11-30 14:52
阅读 3727·2021-11-30 14:52
阅读 3794·2021-11-29 11:00
阅读 3745·2021-11-29 11:00
阅读 3811·2021-11-29 11:00
阅读 3528·2021-11-29 11:00
阅读 6007·2021-11-29 11:00
