font缩写会破坏部署属性的继承性，另外font缩写必须带上font-family font关键字的价值，如非Windows系统下不要使用微软雅黑字体，就可以使用非标准的-apple-system font face的本质是变量，是一个定义字体或字体集的变量，这里包括字体重命名、默认字体样式设置等等，包括font-family src font-style font-weight unicode-range font-varient font-stretch和font-feature-settings src表示引入的字体可以是系统字体，也可以是外链字体 unicode-range的作用是可以让特定的字符或者特定范围的字

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

white-space 属性值： • normal：合并空白字符和换行符。 • pre：空白字符不合并，并且内容只在有换行符的地方换行。 • nowrap：该值和 normal 一样会合并空白字符，但不允许文本环绕。 • pre-wrap：空白字符不合并，并且内容只在有换行符的地方换行，同时允许文本环绕。 • pre-line：合并空白字符，但只在有换行符的地方换行，允许文本环绕。 text-align text-align:justify 实现文本的两端对齐 text-decoration underline 可以给内联文本增加下划线，但是，如果对细

8.6.5 white-space 与换行和空格的控制 1．white-space 的处理模型 white-space 可以决定图文内容是否在一行显示（回车空格是否生效），是否显示大段连续空白（空格是否生效）等。 属性值：normal（合并空白字符和换行符）、pre（空白字符不合并，并且内容只在有换行符的地方换行）、nowrap（和 normal 一样会合并空白字符，但不允许文本环绕）、pre-wrap（空白字符不合并，并且内容只在有换行符的地方换行，同时允许文本环绕）、pre-line（合并空白字符，但只

8.6.5 white-space 与换行和空格的控制 1．white-space 的处理模型。white-space 属性声明了如何处理元素内的空白字符，这类空白字符包括 Space（空格）键、Enter（回车）键、Tab（制表符）键产生的空白。因此，white-space 可以决定图文内容是否在一行显示（回车空格是否生效），是否显示大段连续空白（空格是否生效）等。属性值包括下面这些。 • normal：合并空白字符和换行符。 • pre：空白字符不合并，并且内容只在有换行符的地方换行。 • nowrap：该值和 n

white-space：控制是否合并空白字符，是否合并换行符号，文本是否自动换行。 当 white-space 设置为 nowrap 的时候，元素的宽度此时表现为“最大可用宽度。 单行文字溢出点点点效果：text-overflow:ellipsis 文字内容超出打点效果离不开 white-space:nowrap 声明。 text-align：设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。 text-align:justify 实现两端对齐，实现中文 text-align: justify; text-justify: inter-ideograph;CSS 属性

white-space声明了如何处理元素内的空白字符，包括Space、Enter、Tab按键产生的空白 white-space的功能分3个维度，分别是：是否合并空白字符、是否合并换行符、以及是否自动换行 由于刚开始是为英文设计的，所以text-align:justify对中文可能存在不好使的情况，如IE浏览器上。要想实现两端对齐的效果，需要满足两点：一是有分隔点，如空格；二是要超过一行，此时非最后一行内容会两端对齐 underline属性可能因为字体不同，对文字有影响，比如离文字特别近

white-space 与换行和空格的控制 white-space 属性用于控制元素内空白字符（包括空格、换行符和制表符）的显示方式。它主要影响三个维度：是否合并空格、是否保留换行符以及文本是否自动换行。常见的属性值有 normal（合并空白和换行，允许自动换行）、nowrap（合并空白和换行，但禁止自动换行）、pre（保留所有空白和换行，禁止自动换行）、pre-wrap（保留所有空白和换行，允许自动换行）以及 pre-line（合并空格但保留换行，允许自动换行）。在实际

white-space：是否合并空白字符，是否合并换行符号，文本是否自动换行。当 white-space 设置为 nowrap 的时候，元素的宽度此时表现为“最大可用宽度。单行文字溢出点点点效果。text-overflow:ellipsis 文字内容超出打点效果离不开 white-space:nowrap 声明。 text-align：text-align:justify 实现两端对齐，实现中文 text-align: justify; text-justify: inter-ideograph; text-decoration ：解决文本重叠问题，text-decoration: none;，使用下边框border-bottom模拟下划线，配合 padding，我们就可以很有效

white-space 与换行和空格的控制 white-space 属性用于控制元素内空白字符（包括空格、换行符和制表符）的显示方式。它主要影响三个维度：是否合并空格、是否保留换行符以及文本是否自动换行。常见的属性值有 normal（合并空白和换行，允许自动换行）、nowrap（合并空白和换行，但禁止自动换行）、pre（保留所有空白和换行，禁止自动换行）、pre-wrap（保留所有空白和换行，允许自动换行）以及 pre-line（合并空格但保留换行，允许自动换行）。在实际

8.5.2 @font face 与字体图标技术，SVG 图标同样是矢量的，同样颜色可控，但资源占用更少，加载体验更好，呈现效果更佳，更加符合语义。字体图标技术依然是非常值得推荐的技术选型，因为和传统的图片图标相比，字体图标的尺寸大小和颜色控制非常方便，开发维护方面占用流量小很多，收益是非常明显的。对字体图标，我们可以手工使用一些软件制作，但这种做法效率非常低下，也不好维护，所以基本上现在都是使用工具来完成，如使用 iconfont.cn这

font 属性 作为缩写的 font 属性：[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] ||表示或，?和正则表达式中的?的含义一致，表示 0 个或 1 个。仔细观察上面的语法，会发现font-size 和font-family 后面没有问号，也就是说是必需的，是不可以省略的。 使用关键字值的 font 属性： font:caption | icon | menu | message-box | small-caption | status-bar 如果将 font 属性设置为上面的一个值，就等同于设置 font 为操作系统该部件对应的font，也就是说直接使用

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;

字体，本质上是字符集和图形的一种映射关系。 字体图标技术就是把通常的字符映射成为另外的图标形状，虽然我们眼睛看到的是个图标，但是实际上它本质上就是一个普通的字符。 text-indent对文本进行缩进控制 text-indent 的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素 text-indent 仅对第一行内联盒子内容有效。 非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent 值无效，如果计算值是 inline-block/inline-table 则会生效。

8.5.2 @font face 与字体图标技术 字体，本质上是字符集和图形的一种映射关系 8.6 文本的控制 8.6.1 text-indent 与内联元素缩进 text-indent 就是对文本进行缩进控制。 text-indent 的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素； 仅对第一行内联盒子内容有效； 非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent 值无效； <input>标签按钮 text-indent 值无效； <button>标签按钮 text-indent 值有效（存在兼容性差异）； <input&gt

字体图标的原理是字体 + 字符 字体通过font-family进行设置，通过src属性制定字体源；在使用的时候通过设置content映射到对应的字符上，这样就实现了字体图标，将表情展示出来 因为原始字符和最终的图形表现相差很大，所以当我们的字体加载缓慢的时候，就可以看到明显的变化过程，原始字符x-height和图形x-height往往是不一样的，会影响垂直对齐等问题 text-indent用来设置缩进，但实际情况下已经使用较少，更多的是用来隐藏字体，实现SEO效果 letter-spac

@font face 与字体图标技术 字体图标技术是将图标以字体形式呈现，通过字符与图形的映射实现显示，可利用工具生成相关 CSS 代码，具有尺寸、颜色控制方便及开发维护流量小等优势，在当前桌面端 Web 项目中，因对 IE8 等浏览器的兼容需求而仍具推荐价值。建议放在:before 伪元素中 。 text-indent 与内联元素缩进 text-indent 用于文本缩进控制，设计初衷是实现文本缩进效果，但因现代 Web 形式多样，且对内容要求较高（段落掺杂英文、数字或图片时缩进可

@font face 与字体图标技术 字体图标技术是将图标以字体形式呈现，通过字符与图形的映射实现显示，可利用工具生成相关 CSS 代码，具有尺寸、颜色控制方便及开发维护流量小等优势，在当前桌面端 Web 项目中，因对 IE8 等浏览器的兼容需求而仍具推荐价值。但从长远看，由于其仅在兼容老 IE 浏览器方面有优势，对比 SVG 图标技术，随着未来 IE8 等浏览器的淘汰，使用会逐渐边缘化。SVG 图标作为矢量图标，颜色可控，在资源占用、加载体验、呈现效果和

8.5.2 @font face 与字体图标技术 字体，本质上是字符集和图形的一种映射关系 8.6 文本的控制 8.6.1 text-indent 与内联元素缩进 text-indent 就是对文本进行缩进控制。 text-indent 的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素； 仅对第一行内联盒子内容有效； 非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent 值无效； <input>标签按钮 text-indent 值无效； <button>标签按钮 text-indent 值有效（存在兼容性差异）； <input&gt

@font face 与字体图标技术 @font-face { font-family: ICON; src: url(xxxx); } .icon { font-family: ICON; } text-indent 与内联元素缩进 text-indent 就是对文本进行缩进控制 letter-spacing 与字符间距 特性：继承性、默认值时normal不是0、支持负值、支持小数值 、暂不支持百分比值， 和 text-indent 属性一样，无论值多大或多小，第一行一定会保留至少一个字符。 word-spacing 与单词间距 作用就是增加空格的间隙宽度 了解 word-break 和 word-wrap 的区别 word-break: normal; word-break: break-all; word-bre

字体图标本质是字体和字符，字符一般使用伪元素实现，要注意的是因为原始的字符和最终的图形差异过大，如果字体文件比较大加载的慢一些的时候，可以明显看到字符变图形的过程。 文本：text-indent：对文本进行缩进控制，可以用来隐藏文字，text-indent 的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素。 letter-spacing：控制字符之间的间距，包括英文字母、汉字以及空格等，不支持百分比。 word-spacing ：单词间距。 word-break 和 word-w

1.@font face 与字体图标技术 字体图标技术的使用会越来越边缘化，因为和 SVG 图标技术相比，其唯一的优势就是兼容一些老的 IE 浏览器。等再过几年，IE8 等浏览器彻底被淘汰了，我们就没有任何使用字体图标技术的理由了。 所谓字体，本质上是字符集和图形的一种映射关系。 2.text-indent 与内联元素缩进 text-indent 就是对文本进行缩进控制。 设置一个很大的 text-indent 负值，在某些设备下有潜在的性能风险，体现在滚屏的时候会发生卡顿。text-indent 负值

font属性 font属性无效时，需检查font-size和font-family是否同时存在，font缩写会破坏部分属性的继承性。 font 缩写必须要带上 font-family,但font-family 属性值可能会很长，有两种方式解决 （1）可以随便找一个系统根本不存在的字体名占位，然后再设置 font-family:inherit 来重置这个占位字体 （2）利用@font face 规则将我们的字体列表重定义为一个字体 @font face 本质上就是一个定义字体或字体集的变量，这个变量不仅仅是简单地自定义字体，还包括字体重命名、默

font 属性 作为缩写的 font 属性：[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] ||表示或，?和正则表达式中的?的含义一致，表示 0 个或 1 个。仔细观察上面的语法，会发现font-size 和font-family 后面没有问号，也就是说是必需的，是不可以省略的。 使用关键字值的 font 属性： font:caption | icon | menu | message-box | small-caption | status-bar 如果将 font 属性设置为上面的一个值，就等同于设置 font 为操作系统该部件对应的font，也就是说直接使用

font属性 CSS 的 font 属性是多个文本样式的缩写形式，可包含 font-style、font-variant、font-weight、font-size、line-height、font-family 等属性。其完整语法要求 font-size 和 font-family 必须同时存在，否则缩写无效。 font 缩写会强制重置行高为 normal（浏览器默认值不同），导致兼容问题，建议必要时手动指定行高； 强制字体限制：缩写必须包含 font-family，若需保留原继承字体，可通过两种方法解决： - 占位字体法：用不存在字体占位（如 '☺'）后通过 font-family:

8.4 font 属性 8.4.1 作为缩写的 font 属性 font 缩写会破坏部分属性的继承性。font-size和font-family是必需的。 8.4.2 使用关键字值的 font 属性 使用关键字作为属性值的时候必须是独立的，不能添加font-family或者font-size之类。 8.4.3 font 关键字属性值的应用价值 8.5 真正了解@font face 规则 @font face 本质上就是一个定义字体或字体集的变量，这个变量不仅仅是简单地自定义字体，还包括字体重命名、默认字体样式设置等。 @font face 规则支持的 CSS 属性有 font-family、src

font属性 CSS 的 font 属性是多个文本样式的缩写形式，可包含 font-style、font-variant、font-weight、font-size、line-height、font-family 等属性。其完整语法要求 font-size 和 font-family 必须同时存在，否则缩写无效（如 font: normal 700 14px/20px 缺字体无效，而 font: 14px '☺' 语法有效）。使用 font 缩写时需注意： 继承性问题：未显式定义 line-height 时，font 缩写会强制重置行高为 normal（浏览器默认值不同），导致兼容问题，建议必要时手动指定行高； 强制字体限制：缩

8.4 font 属性 8.4.1 作为缩写的 font 属性 font 缩写会破坏部分属性的继承性。font-size和font-family是必需的。 8.4.2 使用关键字值的 font 属性 使用关键字作为属性值的时候必须是独立的，不能添加font-family或者font-size之类。 8.4.3 font 关键字属性值的应用价值 8.5 真正了解@font face 规则 @font face 本质上就是一个定义字体或字体集的变量，这个变量不仅仅是简单地自定义字体，还包括字体重命名、默认字体样式设置等。 @font face 规则支持的 CSS 属性有 font-family、src

font 属性 作为缩写的 font 属性：[ [ font-style || font-variant || font-weight ]? font-size [ / line-height ]? font-family ] ||表示或，?和正则表达式中的?的含义一致，表示 0 个或 1 个。仔细观察上面的语法，会发现font-size 和font-family 后面没有问号，也就是说是必需的，是不可以省略的。 使用关键字值的 font 属性： font:caption | icon | menu | message-box | small-caption | status-bar 如果将 font 属性设置为上面的一个值，就等同于设置 font 为操作系统该部件对应的font，也就是说直接使用

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 百分比值属性值又是相对于