掘金小册现代 Web 布局

aixure · 发表于 2024-4-27 22:28:12

小册内容包括：

Web 布局发展和术语： Web 布局技术，从最早的自然流布局（无布局），又经历了表格布局、浮动布局、定义位布局、多列布局、Flexbox布局（弹性布局）、网格布局（二维布局）、内在 Web 布局、不规则布局、响应式布局等。可用于现代 Web 布局技术越来越多，构建出来的 Web 布局灵活性，适配性更强。

在这个模块中，我将带你了解布局的发展，从宏观的视角带你建立起现代 Web 布局核心知识体系；同时，我们也将对这些技术的术语进行梳理，这也是我们动手去构建 Web 布局之前的核心基本功。

Flexbox 布局：Flexbox 布局具有较强的灵活性和适配性，也被称为是弹性 Web 布局。不过，其学习成本也较高，尤其是 Flexbox 布局中的一些计算，往往会令人头疼困惑。

在这个模块中，我将向大家深度剖析 Flexbox 布局中， Flex 项目的计算细节和相关理论。有了这些理论，你可以更快速构建出符合需求的 Web 布局，也能更精准定位出问题所在，从而快速解决问题。

Grid 布局：Grid 布局是 CSS 原生的网格布局，是目前为止唯一的二维布局，该布局技术可以让你同时在内联轴（行轴）和块轴（列轴）两个方向控制 Web 中元素的位置。

CSS Grid 布局模块特性较多，学习成本更高。这个模块，我们从最基本特性着手，一步一步带大家深入复杂特性的学习中。学会 Grid，不仅可以构建 Web 经典布局，还可以构建更具创意的 Web 布局。

Flexbox vs. Grid ：Flexbox 和 Grid 布局技术都具备极强的布局能力，使用这两者中任何一种，都可以构建出所需的 Web 布局。虽然这两种技术的出现和发展有先后顺序，但绝没有谁替代谁一说。我们应该在更适合的场景使用最适合的布局技术。

这个模块中，我们使用一些经典的案例，告诉大家在构建 Web 布局时，如何更好地选择合适的技术，从而达到更佳的布局效果。

内在 Web 设计：现在大多数的 Web 设计和布局都是以设计为导向，在构建 Web 布局时，基于设计师提供的设计稿（模板）来完成。而内在 Web 设计（Intrinsic Web Design）是让设计受内容驱动（Design Content-Driven）。

在个模块中，将学习如何使用 CSS 中内在尺寸来构建 Web 布局，比如 min-content 、max-content 、 fit-content 和 auto 等长度属性值，帮你更好地构建以内容驱动的 Web 布局。

不规则布局：一直以来，Web 的布局都是规规矩矩的，由于矩形区域的限制，我们很难构建出一些具有个性，独特性和创造性的 Web 布局。在不久的未来，你将可以使用 CSS 的 Shapes 模块中的特性来打破这个限制，构建出不规则的布局，比如让文字围绕一个不规则的图形排版，文字围绕一个圆形排版，让整个 Web 布局看起来像杂志报刊的排版。

Web 向左向右：如果你要构建一个多语言的 Web 站点，你应该如何选择相应的布局技术，才能以最少的成本来构建出最好的效果？在这个模块，你将掌握 CSS 的逻辑属性、书写模式等特性，用这些新的特性来构建一个具有多语言的 Web 站点。

响应式 UI ：在开发移动端的 Web 页面时，你可能使用了业内主流的适配方案，比如 REM 和 VW 等。或许你已经感受到了这些主流适配方案带来的局限性。其实，自从 CSS 的自定义属性、CSS 的比较函数出现之后，你将可以使用这些特性构建更具响应式的 UI 适配方案。

下一代响应式 Web 设计：我们知道， CSS 的媒体查询只是页面级的一种响应，始终无法做到组件级的响应。而 CSS 容器查询的特性，以及一些新的媒体查询特性，可以让你构建出一个组件响应的 Web 设计，即可以让你开发的 Web 组件达到响应用户、容器和设备外形等需求。

上面所列的是用于 Web 布局的 CSS 特性，给 Web 布局带来质的飞跃。Web 开发者可以采用这些新特性构建出一个具有创造性的 Web 布局。

这本小册，用了约 1000 张示意图和 800+个真实的 Demo，带大家深入了解和掌握构建现代 Web 布局的技术细节和技巧。学习完该小册，Web 开发者除了可以快速构建出具有创造性的 Web 布局之外，还可以掌握可用于现代 Web 布局的技术理论与细节。

你将获得
整体了解 Web 布局的发展和演变；
Flexbox 和 Grid 布局中的具体应用和注意事项；
构建可适配多终端、兼具创造和艺术性的 Web 布局方案；
大量图文和实战，轻松掌握最新 CSS 特性。

〖资源目录〗: