lzping_719的专栏

面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。

TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；

1.:first-child,:last-child生效的前提:first-child只在被选中的第一个元素前面没有其他元素才生效；:last-child只在被选中的最后一个元素后面没有其他元素时才生效。

理论上，响应式 Web 页面能够适应不同的终端设备：如果用一句话来描述响应式 Web 设计的话，我觉得这句最经典：“”，即 “如果将屏幕看作容器器皿，那么内容就像水一样”，可以随着器皿的不同成不同的形状：这也正如 @Ethan Marcotte 所言： “未来我们应该这样，随着访问网页的设备增加，我们不会为每个设备单独设计，而只会做一份设计，把每个设备作为这份设计要照顾的一个方面也就是说，每个设备上都会去追求最佳的用户体验，设计会自动适应各个设备。

使用上面这种方式，虽然能让 UI 元素尺寸大小根据视窗大小做出动态计算，从而实现完美的像素级缩放，但其还是略有不完美之处，因为不管视窗的大小，最终都会影响到计算值，也会影响到 UI 界面的最终效果。最后提醒大家一下，在一些设备上它还是有一定兼容性风险的，主要是 CSS 比较函数，以及 CSS 的容器查询，支持的设备到目前为止还是有一定的限制。虽然这种技术方案有一定的缺陷，但它更具扩展性，配合 CSS 媒体查询和容器查询等特性，可能会让未来的布局更具扩展和灵活性，而且也能更好地适配于更多的智能终端。

这里所说的基本形状是指可以让 Web 开发者生成更抽象的几何化 Web 布局，而不仅仅是简单的矩形和正方形。换句话说，就是使用 CSS Shapes 中的绘制的基本形状。简单地说，你可以在一个元素上运用属性指定的值，为元素应用形状。主要包含了circle()ellipse()inset()和polygon()circle()，它等于；椭圆形ellipse()，它等于；矩形inset()，它等于；多边形polygon()，它等于。

直到现在，大多数的 Web 设计和布局都是以设计为导向，因为在构建 Web 布局时，都是基于设计师提供的设计稿（模板）来完成。因此，你不难发现，现存于线上的很多 Web 页面上的元素大小（尺寸）基本上都设置了固定的尺寸，而且这些尺寸是根据最初设计师提供的稿子定义的。事实上呢？Web 的数据是动态的，服务端吐出的数据与最初设计稿内容有可能并不匹配（有多，也有少），此时呈现给用户的 Web 页面并不是最佳的（有可能很多空白空间未利用，有可能内容溢出容器，打破布局）。

通过上节课的学习，我想你已经知道了，构建一个多语言的 Web 网站或应用，离不开对语言的书写模式、阅读模式、CSS 逻辑属性等特性，同时也知道了 CSS Flexbox 和 CSS Grid 布局都是基于文档书写模式设计，天然地能实现 LTR 和 RTL 的翻转设计。构建一个多语言的 Web 布局，它所涉及的不仅是 LTR 和 RTL 的翻转设计，其中还会涉及很多其他的布局、排版、设计等相关知识。

世界上有很多种语言（简称世界语言），比如汉语、英语、印度斯坦语、西班牙语、阿拉伯语、俄语、葡萄牙语、德语和法语等。在互联中也有一些常用语言，比如英语、汉语、西班牙语、葡萄牙语、印尼语（马来语）、法语、日语、俄语和德语等。如果你的团队有一些国际业务，这种现象对于你来说一定不会感到陌生。其实，你在访问互联网的 Web 页面，或者使用 Web App 时，很多 Web 网站或 Web 应用都提供了多语言设置。在 Web 中，不同的语言在电子屏幕上有着不同的呈现方式，比如：上图截取于“联合国教科文组织。

在 CSS 中， 属性是一个非常重要的基础属性，也正因为它重要， W3C 以一个独立的模块在维护它。不过，对于很多 Web 开发者来说，只知道 可以设置类似 、 、 、 、 、 和 等值，却不知道它也可以取 值。更为重要的一点是，在制定 （子网格）相关的规范时，社区中不少开发者建议使用 来替代 ，也有不少关于 和 的争论。那么， 是什么？它又将对 CSS Flexbox 和 Grid 布局带来哪些变化呢？你可以在接下来的内容中找到答案。CSS 的 属性是 W3C CSS 规范中的一个独立

在当下，可用于 Web 布局的 CSS 特性有很多，而且这个集合越来越强大。自从 Flexbox 的兼容性越来越完善，它替代了浮动布局，成为主流的布局技术。只不过，近几年来，CSS Grid 快速得到主流浏览器的支持，在圈中不乏有了新的声音，。这节课我们就一起来聊聊这个话题，在构建 Web 布局时，什么时候使用 Flexbox 布局，什么时候又应该使用 Grid 布局。我希望通过学习这节课，你在构建 Web 布局时，能更好地做出选择。

CSS 网格模块为 Web 布局提供了前所未有的可能性。我们可以用更少的元素（更简洁的 HTML 结构）构建更复杂的设计。相对而言，它要比 Flexbox 布局模块强很多。CSS 网格布局除了能轻易构建常见的 Web 布局之外，还可以实现很多有创意的响应式布局效果，让你对 Web 布局有一种焕然一新的感觉。在这节课中，我们就来看看 CSS 网格如何构建这些具有创意性的 Web 布局效果。

auto。

我们花了一节课（《》）专门介绍了网格布局中的子网格和嵌套网格的基础知识。并且阐述了为什么需要子网格布局。这节课，我将带领大家了解子网格的一些潜在案例，即子网格可用于哪些 Web 中布局中。

subgrid。

CSS 网格布局除了提供定义网格和放置网格项目的相关属性之外，也提供了一些控制对齐方式的属性。这些控制对齐方式的属性，和 Flexbox 布局中的对齐属性justify-*align-**-items*-content*-self等是相似的：在网格布局中可以用它们来控制网格项目在内联轴（Inline Axis）和块轴（Block Axis）的对齐方式；也可以用来控制网格轨道在内联轴（Inline Axis）和块轴（Block Axis）的对齐方式。

通过前面几节课程的学习，我想你已经会使用等属性定义一个符合 Web 布局的网格，但仅仅这样是不够的，我们还需要将网格项目放置到需要的（正确的）位置。那么在这节课程中，我们主要一起来探讨 CSS 网格布局中的网格项目是如何被放置的。

MIN。

通过前面课程的学习，我们可以使用 和 设置显式网格轨道数量和尺寸，也可以使用 和 来设置隐式网格轨道尺寸。虽然它们服务的对象有所差异，但是使用方法几乎是相似的，只有个别函数不能用于 和 属性上，比如 函数。由于能给这些属性设置不同类型的值，因此在定义网格轨道的尺寸的时候就会涉及一些计算，比如 、 等。除此之外，还有其他的一些值类型，比如 、 、 、 和视窗单位 等，但这里只和大家聊聊 和 单位，尤其是 单位的计算。因为其他单位值的计算相对而言要更简单，比如：我们先从百分比 开始

CSS 中定义一个网格非常简单，只需要在一个元素上显式设置display的值为grid或即可。</div>/* 或 inline-grid */只不过这是一个最基础的网格，一个 “单列多行”的网格，而且行数由网格容器的子元素（包括其伪元素和文本节点）来决定：Demo 地址： https://codepen.io/airen/full/yLjRzOd默认的网格往往不能满足我们所需，也就是说，要构建一个符合要求的网格，还需要依赖其他的一些属性，比如（即和以及它们的简写属性），或（即和。

网格是由一系列水平与垂直的线构成的一种布局模式。你可以在网格的基础上，将设计元素进行排列，帮助你设计一系列具有固定位置以及尺寸的元素的页面，使我们的 Web 页面更加统一。早前在 CSS 中并没有内置的网格系统，但对于 Web 设计师和开发者而言，对网格系统并不会感到陌生。因为设计师和开发者都熟悉（或有使用过）网格系统，比如 960gs 网格系统：从上图中不难发现，一个网格有着它自己独特的特性和具备的属性，比如一个网格通常具有许多的列（Column）与行（Row），以及行与列、列与列之间的间距，也称。

Flexbox 是现代 Web 布局的主流技术之一，它提供了一种有效的方式来和元素，即使在视窗或元素大小不明确或动态变化时亦是如此。Flexbox 的优势可以用一句话来表达：“”，即“Flexbox 为您提供了元素大小和顺序的灵活性”。如此一来，可以让 Web 的布局变得简单地多。在这节课程中，我将介绍如何使用 Flexbox 来构建 Web 中的一些经典布局（实践中常使用的 Web 布局）。这些布局在还没有 Flexbox 技术之前就在 Web 中很常见，比如（或）、和。

是 Flexbox 布局模块中 属性的另一个子属性，在前面的课程中我们深度剖析了浏览器是如何计算 Flex 项目尺寸的，或者说 Flexbox 是如何工作的。对于众多 Web 开发者而言，在 CSS 中都习惯于使用像 、 、 和 以及它们对应的 CSS 逻辑属性（比如 、 等）给元素设置尺寸大小。在使用 Flexbox 布局模块时，同样如此，使用这些属性给 Flex 项目设置尺寸。只不过，这些属性不一定就能决定 Flex 项目的尺寸大小，它除了受 Flex 容器的空间和 Flex 项目的扩展因子（）

使用 Flexbox 布局时，Flex 容器难免有和所有 Flex 项目宽度总和不匹配的时候，比如说，Flex 容器有剩余空间（Flex 项目无法填满整个 Flex 容器），也有 Flex 容器空间不足的时候（Flex 项目溢出 Flex 容器）。这两种情景有不同的处理方式，比如上一节课和大家聊的就是 Flex 容器有剩余空间时，如何通过扩展因子比例flex-grow的特性来扩展 Flex 项目。而这一节课，我们主要来探讨，当 Flex 容器空间不足时，我们又是如何使用收缩因子。

通过前面的课程学习（），你可能已经知道了，在 Flex 项目上使用flex属性时，浏览器会根据具体的值来计算 Flex 项目，比如扩展 Flex 项目，或收缩 Flex 项目，或不变。我想大家一定很好奇它们是如何计算的。接下来几节课，我们分别来看看flex-grow和flex-basis三个属性是如何对 Flex 项目产生影响的。为了能帮助大家更好地理解flex-grow和flex-basis示例中有一个 Flex 容器.container，它的宽度是1000px（设置了。

Flexbox 的设计目的是在包含元素（Flex 容器）中沿着行或列分配元素（Flex 项目）和空间。而它的最大特性就是 Flex 项目可伸缩，也就是让 Flex 项目的宽度（或高度）可以自动填充 Flex 容器剩余空间或 Flex 项目适配 Flex 容器不足的空间。而这一切都依赖于 Flexbox 模块中的flex属性来完成。一个 Flex 容器会按照各个 Flex 项目的扩展比率分配 Flex 容器剩余空间，也会按照收缩比率来收缩 Flex 项目，以免 Flex 项目溢出 Flex 容器。

Flexbox 布局中提供了多个用于对齐 Flex 项目以及 Flex 项目之间分配空间的属性。简单地说，这些属性能够在 Flex 容器的主轴和侧轴上对齐 Flex 项目，以及在 Flex 项目之间分配空间。和。align-selfjustify-开头的属性主要用于 Flex 容器的主轴方向；align-开头的属性主要用于 Flex 容器侧轴方向；-items结尾的属性主要用于对齐 Flex 项目，-self结尾的属性主要用于 Flex 项目的自对齐，-content结尾的属性主要用于容器空间分配。

Flexbox 布局 是一种布局机制，用于在一个维度上为项目组设置布局！Flexbox 模块中的主要功能就是 Web 布局。Flexbox 布局可以明确地指明容器空间的分布方式、内容对齐和元素的视觉顺序。使用 Flexbox 布局，可以轻易地实现横向或纵向布局，还可以沿着一个轴布局，或折断成多行。可以说，使用 Flexbox 布局可以轻易地构建你想要的任何布局。另外，使用 Flexbox 布局还可以让 Web 内容的渲染不再受 HTML 文档源码顺序的限制。

Web 发展的每个不同时期都有新的技术为 Web 布局提供支持，但不管是哪个时期，Web 布局相关的概念和术语都是相同的。如果你想彻底或者更好地掌握 Web 布局，那么首先需要对 Web 布局相关的技术术语有所了解。在这一节中，我们一起来探讨 Web 布局相关的术语。

自从 Web 诞生以来，Web 开发者一直在使用大量的技巧来完成所有与布局有关的事情。无论是使用浮动（float）还是引用外部第三方 CSS 框架（CSS Frameworks）和库（比如Bootstrap）将内容放置在 Web 页面上想要的任何位置（即布局），几乎都有一些 Hack 的身影存在！浮动的初衷是用于排版的，只不过在那个年代，Web 开发者利用其特性来构建 Web 的布局，而且运用于 Web 布局很多年。其中大多数第三方的 CSS 框架和库都是采用浮动来完成 Web 的布局！

以下是 CSS 中实现水平居中、垂直居中以及同时水平垂直居中的。

基线是文字排版的基础参考线，大多数字母（如xa）的底部对齐基线非字母字符（如gy）的下伸部分会低于基线。

它比传统的布局方式（如浮动、定位）更灵活、更强大，适合构建复杂的响应式网页。CSS Grid 是一种强大的二维布局系统，能够以行和列的方式精确控制。当项目超出定义的网格范围时，浏览器会自动创建隐式网格。（行间距 20px，列间距 30px）。（最小 100px，最大 1fr）。：一个或多个单元格组成的矩形区域。是二维布局的革命性工具，擅长构建。（重复 3 列，每列宽度相等）。：定义行和列之间的间距（替代。（行和列间距均为 10px）。（从第 1 列到第 3 列）。：划分网格的垂直线和水平线。

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。她是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，可以自动适配各种设备的不同宽度，而不必依赖于传统的块状布局和浮动定位，并在其中使用灵活的盒子模型来进行元素的排列和定位。在浏览器支持完美的环境中，选择使用弹性盒子的原因是你希望把一系列项目沿着同一方向布局。

在现代网页设计中，弹性布局（Flexbox）已成为实现响应式设计的首选。它允许元素在容器内灵活地伸缩以适应不同的屏幕尺寸和内容需求。flex-basis作为弹性布局中的重要属性之一，对元素的基础尺寸起着决定性作用。flex-basis 属性是实现CSS弹性布局的关键工具之一。它不仅可以帮助我们处理内容自适应的场景，还可以通过其与 min-width 、 max-width 属性的互动，实现更复杂的布局需求。

【代码】常用函数总结。

决定了在空间不足时的相对收缩权重。默认值为1，可以设置为0来禁止收缩。灵活使用能实现更复杂且自适应的布局。flex-growflex-grow决定了在空间有多余时的相对伸展权重。默认值为0，可以设置为正数来分配剩余空间。合理使用flex-grow可以让页面元素在不同屏幕宽度下保持良好的自适应性。

在前端开发中，CSS选择器的运用是构建网页样式的基石。从简单的类选择器和ID选择器，到更复杂的属性选择器，CSS提供了多种选择元素的方式。在本篇博客中，我们将深入探讨CSS中的:nth-child和:nth-of-type伪类，这两种选择器让我们能够基于元素在父元素中的位置，进行更精细的样式控制。

定义**同一变量名称（名字）两次或多次后，less只会选择最后定义**的！@bg-img:"路径1";@bg-img:"路径2";@bg-img:"路径3";header{// 结果为：background: url("路径3");

确保在指定的时间间隔内，无论连续触发了多少次事件，只有最后一次事件会在该间隔结束后执行。（触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。核心逻辑重置计时器：每次事件触发时，都会重置计时器。执行时机：只有在用户停止触发事件指定时间间隔后，才会执行最后一次事件。想象一台自动售货机，里面都是不同价格的商品，当你投入相应的硬币，会自动选择对应商品。