font-family的值有两类： 1. 字体名：字体类型的名字 2. 字体族：如衬线字体和无衬线字体 所谓衬线字体，就是笔画开始、结束的地方有额外的装饰而且笔画的粗细会有所不同的字体。无衬线字体就是没有这些额外的装饰且粗细相同 等宽字体主要是对于英文而言的，中文字体基本都是等宽字体 IOS字体中的SC，是指Simplified Chinese font-weight为数字值时从100到900，必须是100的整数倍，有时候发现设置某个数值不生效，主要原因是没有对应的字体

font-family的值有两类： 1. 字体名：字体类型的名字 2. 字体族：如衬线字体和无衬线字体 所谓衬线字体，就是笔画开始、结束的地方有额外的装饰而且笔画的粗细会有所不同的字体。无衬线字体就是没有这些额外的装饰且粗细相同 等宽字体主要是对于英文而言的，中文字体基本都是等宽字体 IOS字体中的SC，是指Simplified Chinese font-weight为数字值时从100到900，必须是100的整数倍，有时候发现设置某个数值不生效，主要原因是没有对应的字体

font-family的值分为两类： 1. 字体名：字体类型的名字 2. 字体族：如衬线字体和无衬线字体 所谓衬线字体，就是笔画开始、结束的地方有额外的装饰而且笔画的粗细会有所不同的字体。无衬线字体就是没有这些额外的装饰且粗细相同 等宽字体主要是对于英文而言的，中文字体基本都是等宽字体 IOS字体中的SC，是指Simplified Chinese font-weight为数字值时从100到900，必须是100的整数倍，有时候发现设置某个数值不生效，主要原因是没有对应的字体

8.2 font-family font-family 支持两类属性值，一类是“字体名”，一类是“字体族”。 字体名：simsun、Microsoft Yahei… 字体族：serif（衬线字体）、sans-serif（无衬线字体）、monospace（等宽字体）… 8.2.1 了解衬线字体和无衬线字体 衬线字体：笔画开始、结束的地方有额外装饰而且笔画的粗细会有所不同的字体； 无衬线字体：没有这些额外的装饰，而且笔画的粗细差不多； 8.3 字体家族其他成员 8.3.1 font-weight font-weight 表示“字重”，文字的粗细程度。 用数值

7.7 z-index“不犯二”准则 对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需要超过 2。 定位元素一旦设置了z-index值，从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了很大的z-index值也无法覆盖其他元素的问题。 避免z-index“一山比一山高”的样式混乱问题。 第8章 强大的文本处理能力 8.1 font-size 1、line-height 的部分类别属性值是相对于 font-size 计算的，vertical-align 百分比值属性值又是相对于

8.2 font-family font-family 支持两类属性值，一类是“字体名”，一类是“字体族”。 字体名：simsun、Microsoft Yahei… 字体族：serif（衬线字体）、sans-serif（无衬线字体）、monospace（等宽字体）… 8.2.1 了解衬线字体和无衬线字体 衬线字体：笔画开始、结束的地方有额外装饰而且笔画的粗细会有所不同的字体； 无衬线字体：没有这些额外的装饰，而且笔画的粗细差不多； 8.3 字体家族其他成员 8.3.1 font-weight font-weight 表示“字重”，文字的粗细程度。 用数值

衬线字体和无衬线字体 衬线字体（Serif）和无衬线字体（Sans Serif）是文字设计的两大基础分类。衬线字体的特征在于笔画起止处带有装饰性细节（如钩线或三角形），且笔画粗细对比明显，例如英文的Times New Roman和中文的宋体。这种设计源于古罗马石刻工艺，工匠为消除雕刻毛边自然形成衬线，其核心功能是通过视觉引导增强文字连续性，因此传统印刷品（如书籍、报纸）多采用衬线字体排版，以提升长段落的可读性。无衬线字体则笔画均匀、造型

font-family font-family: 'PingFang SC', 'Microsoft Yahei';依次向右寻找本地支持的字体 font-family: serif; /* 衬线字体 */ font-family: sans-serif; /* 无衬线字体 */ font-weight font-weight: normal; font-weight: bold; font-weight: 100; font-weight 要想真正发挥潜力，问题不在于 CSS 的支持，而在于是否存在对应的字体文件。 font-style font-style: normal; font-style: italic; (当前字体的斜体) font-style: oblique;

1.BFC 的定义：BFC 全称为 block formatting context，中文为“块级格式化上下文”。相对应的还有 IFC，也就是 inline formatting context，中文为“内联格式化上下”。 如果一个元素具有 BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。 BFC 元素是不可能发生 margin 重叠的，因为 margin重叠是会影响外面的元素的 BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位。 会触发 BFC：

float的本质和特性 本质：为了实现文字环绕效果 缺点：缺少弹性，容错性很糟糕 特性：包裹性，块状化并格式化上下文，破坏文档流，没有任何margin合并 float的作用机制 float 属性会让父元素的高度塌陷 float 属性让父元素高度塌陷的原因就是为了实现文字环绕效果 “文字环绕效果”是由两个特性（即“父级高度塌陷”和“行框盒子区域限制”）共同作用的结果 float 更深入的作用机制 IE6和IE7浮动元素会下一行显示 浮动锚点是float元素所在的“流”中

1、适配器模式 提高类的复用性，更好的灵活性，解耦，适配器模式在实际应用中常用于使现有类与某些预期的接口兼容，从而提高代码的复用性和灵活性。 2、桥接模式 将抽象部分与它的实现部分分离，比如： 抽象部分： 程序的 GUI 层。 实现部分： 操作系统的 API。 抽象对象控制程序的外观， 并将真实工作委派给连入的实现对象。 3、组合模式 如果应用的核心模型能用树状结构表示， 在应用中使用组合模式才有价值。 类似军队：每支部队包括几

7.7 z-index“不犯二”准则 对于非浮层元素，避免设置 z-index 的值，z-index 值没有任何道理需要超过 2。 1.定位元素一旦设置了 z-index 值，就从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了变化，很容易出现设置了巨大的 z-index 值也无法覆盖其他元素的问题。 2.容易出现z-index层级管理混乱的问题 8.1font-size 1.line-height 的部分类别属性值是相对于 font-size 计算的，vertical-align 百分比值属性值又是相对于 line-height 计算的。 8.1.2 理解 font-size

z-index的使用建议不过2，主要原因是可以通过合理的布局来避免z-index，因为当z-index不设限制的时候，不同的开发者会设定越来越高的z-index值，从而导致层级混乱，尤其是当一个z-index调整时会影响另一个，这一点在我们的代码中也有体现，出现过类似的case vertical-align的百分比是相对于line-height计算的，这两者有联系 ex是字符的高度 1em等于当前元素所在的font-size的计算值 rem是相对于根元素的，我们的适配用的就是rem font-size的关键字，有一定的对应规则

7.7 z-index“不犯二”准则。对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需要超过 2。为什么需要这个准则。（1）定位元素一旦设置了 z-index 值，就从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了巨大的 z-index 值也无法覆盖其他元素的问题。（2）避免 z-index“一山比一山高”的样式混乱问题。8.1 line-height 的另外一个朋友 font-size。 line-height 的数值属性值和百分比值属性值都是相对于 font

7.2 理解 CSS 世界的层叠上下文和层叠水平 7.2.1 层叠上下文：z 轴，表示的是用户与显示器之间这条看不见的垂直线。 7.2.2 层叠水平：元素发生层叠时有着特定的垂直显示顺序。 7.4 层叠准则 1、谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个 2、后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。 7.5 深入了解层

7.7 z-index“不犯二”准则 对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需要超过 2。 定位元素一旦设置了z-index值，从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了很大的z-index值也无法覆盖其他元素的问题。 第8章 强大的文本处理能力 8.1 font-size 1、line-height 的部分类别属性值是相对于 font-size 计算的，vertical-align 百分比值属性值又是相对于 line-height 计算的。 在 CSS 中，1em 的计算值等同

7.7 z-index“不犯二”准则 对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需要超过 2。 定位元素一旦设置了z-index值，从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了很大的z-index值也无法覆盖其他元素的问题。 避免z-index“一山比一山高”的样式混乱问题。 第8章 强大的文本处理能力 8.1 font-size 1、line-height 的部分类别属性值是相对于 font-size 计算的，vertical-align 百分比值属性值又是相对于

z-index层级：对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过，避免z-index“一山比一山高”的样式混乱问题。 层级计数器：会遍历所有<body>处于显示状态的子元素，并得到最大z-index值，和默认的z-index做比较。如果超出，则显示的组件的z-index自动加1，这样就不会出现有组件被其他组件覆盖的问题。 line-height&font-size：line-height的部分类别属性值是相对于font-size计算的，vertical-align百分比值属性值又是相对于line-height计算的，于

7.7 z-index“不犯二”准则 对于非浮层元素，避免设置 z-index 值，z-index 值没有任何道理需要超过 2。 定位元素一旦设置了z-index值，从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了很大的z-index值也无法覆盖其他元素的问题。 避免z-index“一山比一山高”的样式混乱问题。 第8章 强大的文本处理能力 8.1 font-size 1、line-height 的部分类别属性值是相对于 font-size 计算的，vertical-align 百分比值属性值又是相对于

z-index“不犯二”准则 "不犯二"准则要求非浮层元素避免设置z-index值，若必须设置则不超过2。其核心价值在于预防层叠混乱：①定位元素设置z-index会形成层叠上下文，容易导致层级失控；②多人协作时易引发数值竞赛（如9→99→999999），造成维护灾难。实际开发中多数z-index实属冗余，建议通过DOM顺序调整、"relative最小化原则"及原生层叠顺序实现效果。浮层组件（弹窗/下拉等）例外，需采用"层级计数器"机制：通过JS动态获取当

凤凰岭真难爬啊

重构 - 第十一章 本章主要讲的是如何重构function 首先一个规则是 尽量对function进行读写分离， 通常写服务我们不需要给出data的返回值， 只要给明确执行成功与否即可， 而读服务中， 如果某个写逻辑失败， 如果导致该读服务失败， 也是个很奇怪的设计。 函数编写要具备一定扩展性， 尽量不要写完全无法被复用的独特服务， 而要考虑各种设计模式， 做好函数级别复用的拆分。 函数传参时， 如果一个function的入参是另一个function的返回值的一部分，

层叠水平 不要把层叠水平和CSS的z-index属性混为一谈： z-index可以影响层叠水平，但是仅限于定位元素和flex盒子的子元素 而层叠水平所有的元素都存在 层叠顺序 层叠顺序规则(CSS2.1): 层叠上下文(background/border) < 负z-index < block块状水平盒子 < float 浮动盒子 < inline盒子 < z-index: 0或者z-index: auto < 正 z-index 装饰 < 布局 < 内容 层叠准则 谁大谁上：在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个 后来居上：层叠水平一致，层

7.2 理解 CSS 世界的层叠上下文和层叠水平 7.2.1 层叠上下文：z 轴，表示的是用户与显示器之间这条看不见的垂直线。 7.2.2 层叠水平：元素发生层叠时有着特定的垂直显示顺序。 7.4 层叠准则 1、谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个 2、后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。 7.5 深入了解层

6.9 position:relative 才是大哥 6.9.1 relative 对 absolute 的限制 6.9.2 relative 与定位 无侵入：relative 进行定位偏移的时候，一般情况下不会影响周围元素的布局，相对于自身进行偏移定位。 即使自己移动，也会在原来的位置留下空间。 当相对定位元素同时应用对立方向定位值的时候； 只有一个方向的定位属性会起作用； 孰强孰弱则是与文档流的顺序有关的，默认的文档流是自上而下、从左往右。 6.9.3 relative 的最小化影响原则 尽量不使用relative，如果想定位

CSS世界层叠顺序类型标注： background/border < z-index负值 < block块状水平盒子 < float浮动盒子 < inline水平盒子 < z-index 0 < z-index正值 当元素发生层叠的时候，其覆盖关系遵循两条准则： 1. 谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个 2. 后来居上：当元素的层叠水平一致，层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素 能创建层叠上下

CSS世界层叠顺序类型标注： background/border < z-index负值 < block块状水平盒子 < float浮动盒子 < inline水平盒子 < z-index 0 < z-index正值 当元素发生层叠的时候，其覆盖关系遵循两条准则： 1. 谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个 2. 后来居上：当元素的层叠水平一致，层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素 能创建层叠上下

7.2 层叠上下文和层叠水平 层叠上下文是一个概念，跟“块状格式化上下文”(BFC)类似。然而，概念这个东西是比较虚、比较 抽象的，要想轻松理解，我们需要将其具象化。 我们可以把层叠上下文理解为一种“层叠结界”，自成一个小世界。 层叠水平，决定了同一个层叠上下文中元素在 z 轴上的显示顺序。页面中的每个元素都是独立的个体，它们一定是会有一个类似的排名顺序的存在。而这个排名顺序、论资排辈就是这里所说的“层叠水平”。 7.3 理

什么是层叠上下文？ 都是独立的，其内部元素的堆叠顺序只与该层叠上下文相关，不会影响到外部层叠上下文中元素的堆叠顺序。也就是说，一个层叠上下文中的元素无论z - index值多大，都不会影响到其他层叠上下文中元素的显示层级，除非通过改变层叠上下文本身的z - index值来调整不同层叠上下文之间的堆叠顺序。 在实际的网页开发中，理解层叠上下文有助于解决元素重叠显示时的层级问题，合理地创建和管理层叠上下文可以让页面元素的显示效

CSS世界层叠顺序类型标注： background/border < z-index负值 < block块状水平盒子 < float浮动盒子 < inline水平盒子 < z-index 0 < z-index正值 当元素发生层叠的时候，其覆盖关系遵循两条准则： 1. 谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个 2. 后来居上：当元素的层叠水平一致，层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素 能创建层叠上下

relative与定位无侵入：relative进行定位偏移的时候，一般情况下不会影响周围元素的布局，相对于自身进行偏移定位。即使自己移动，也会在原来的位置留下空间。当相对定位元素同时应用对立方向定位值的时候；只有一个方向的定位属性会起作用：孰强孰弱则是与文档流的顺序有关的，默认的文档流是自上而下、从左往右。 relative的最小化影响原则尽量不使用relative,如果想定位某些元素，看看能否使用“无依赖的绝对定位”。如果场景受限，一定要

position: relative CSS 中的 position: relative 属性是一个非常重要且常用的定位方式。当元素被设置为 position: relative 时，该元素首先会按照普通文档流的位置进行定位，这意味着它在页面中占据的空间与没有设置该属性时相同，就好像它仍然处于正常的文档布局顺序中。然后，你可以通过 top、right、bottom、left 这四个属性对其位置进行微调。例如，设置 top: 10px 会使元素相对于其原本在文档流中的位置向下偏移 10 像素；设置 left: 20px 会使其向右偏移 20 像素。

position:relative 不脱离文档流 6.9.1 relative 对 absolute 的限制 6.9.2 relative 与定位 无侵入：relative 进行定位偏移的时候，一般情况下不会影响周围元素的布局，相对于自身进行偏移定位。 即使自己移动，也会在原来的位置留下空间。 当相对定位元素同时应用对立方向定位值的时候； 只有一个方向的定位属性会起作用； 孰强孰弱则是与文档流的顺序有关的，默认的文档流是自上而下、从左往右。 6.9.3 relative 的最小化影响原则 尽量不使用relative，如果想定位

6.9 position:relative 不脱离文档流 6.9.1 relative 对 absolute 的限制 6.9.2 relative 与定位 无侵入：relative 进行定位偏移的时候，一般情况下不会影响周围元素的布局，相对于自身进行偏移定位。 即使自己移动，也会在原来的位置留下空间。 当相对定位元素同时应用对立方向定位值的时候； 只有一个方向的定位属性会起作用； 孰强孰弱则是与文档流的顺序有关的，默认的文档流是自上而下、从左往右。 6.9.3 relative 的最小化影响原则 尽量不使用relative，如果想

clip 属性要想起作用，元素必须是绝对定位或者固定定位（position 属性值必须是absolute 或者 fixed）。 6.7.1 重新认识的 clip 属性 1．fixed 固定定位的剪裁 overflow属性无法实现，因为fixed固定定位元素的包含块是根元素，除非是根元素滚动条，普通元素的overflow是根本无法对其进行剪裁的; 但是clip可以。 2．最佳可访问性隐藏 clip具有更强的普遍适应性，任何元素、任何场景都可以无障碍使用 6.7.2 深入了解 clip 的渲染 1.clip隐藏仅仅是决定了哪部分是可见的，