随着Web技术不断的革新，以往很多依赖于图片展示的布局能较轻易地通过代码来实现，而且现在的布局也不仅仅局限于平面的布局。实际上也有一些伪3D，甚至是3D的布局效果。前两天看到@Preethi分享的一个效果就是我们平时难于用代码实现的一个效果。就这样的效果放到今天来说，我们通过CSS可以实现，而且这样的一个效果是一个典型的效果，所以今天和大家一起来探讨这样的一个布局效果。刚才提到借助于Web的一些特性，我们可以实现伪3D的效果（看上去像上一个3D的布局）。这样的布局主要目的是为了增强一个立体的空间感。

熟悉CSS的同学都知道，使用CSS可以绘制一些图形，在业内有很多这方面的案例，比如使用CSS绘制不同的纹理、CSS绘制Icons、使用一个div绘制不同的图形等等。而在Web的实际开发中也经常会碰到一些图形的运用，比如我们今天要聊的圆（比如圆形容器，圆形缩略图，圆形按钮）。使用CSS绘制圆还是会碰到一些棘手的问题。如果你对这方面感兴趣的话，那么接着阅读下面的内容，你一定会有所收获。

在上一节中，我们学习了如何在React中实现条件渲染。今天我们一起来学习如何在React中实现列表渲染（在Vue中我们可以使用v-for指令）。因为在实际开发中我们时常要处理一些列表的渲染，比如在《列表渲染和Vue的v-for指令》一文中示例所示。在React中，处理列表渲染和处理条件渲染类似，需要借助JavaScript的一些原生能力来辅助我们实现列表渲染。如果你对这方面知识感兴趣的话，欢迎继续往下阅读。

在Web中时常需要根据不同的状态来渲染对应状态下的部分内容。在React中也同样有这样的运用场景，只不过在React中可以创建不同的组件来封装各种所需要的行为，然后根据不同状态来渲染对应的内容。如果你熟悉Vue的话，知道他有一个v-if指令可以轻易帮助你根据不同的状态（条件）来渲染所需的组件（或UI），但在React没有这样的指令。虽然在React中没有v-if这样的指令，但它可以使用你熟悉的JavaScript条件语句（比如if...else或switch）。接下来，我们就一起来看看如何在React中实现条件渲染。

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

把浮动放到今天来聊，可能很多小伙伴会觉得没有任何意义。会说“CSS都发展到这种程度了，Web的布局还会有谁用浮动呢”？那么真的是如此吗？浮动真的要退出CSS的舞台成为历史吗？我的答案是不可能的。不管CSS怎么发展，浮动都还有其存在的意义和作用，而且在一些场景中是离开不浮动的，最起码近几年之内是不可能的。至于为什么，请继续往下阅读。

Web自1989到今年刚好走过30年历程。30年来Web也发生了翻天覆地的变化，从事Web开发工作也衍生出多种工作岗位，而我们做为Web前端开发者的其中一员，更应该感谢Web给我们带来的机遇和未来。自从今天开始，我们来一起探讨Web开发中其中一小部分相关的技能（或者说知识），即Web布局。希望接下来的这个专栏对大家在今后的工作和学习上都会有所帮助。

在学习Web布局之前有一个非常重要的概念需要理解，这个概念就是盒模型。CSS盒模型是多个不同的CSS规则集合，定义了如何渲染Web页面。这一系列的不同的属性决定了HTML元素在页面上的位置。到目前为止，所有Web页面都只是一个接一个渲染的元素。可以说盒模型是我们定制默认布局方案的工具包。作为Web开发人员，大部分工作是将应用CSS盒模型中的规则将设计模型转换为Web页面（简单点说，就是UI还原）。接下来要介绍的CSS盒模型又被视为UI还原的重中之重，因为它定义了盒子的单独行为。特别是在以后的章节中，我们学习的各种布局都将会围绕着HTML的结构和CSS的盒模型一起来展开。

CSS视觉格式化模型（英文称之Visual Formatting Model），是CSS 2.2规范中的第九部分。该模型主要是用来处理和在视觉媒体上显示文档时使用的计算规则。仅从这一句来来描述，估计很多同学都会感到困惑，视觉格式化模型到底是什么鬼？大家先不用急着知道视觉格式化模型是什么，只需要知道它是CSS中很重要的一部分，如果理解了该部分所涉及到的知识点，将有助于你更好的理解和学习CSS，特别是布局。