二、实用技巧与特性 1. 隐藏元素的背景图加载行为 IE8~11：无论是否隐藏都会请求图片 Firefox：隐藏时不加载 Chrome/Safari：元素直接设置 display:none 且含 background-image时加载，父元素为 display:none时不加载 2. background-position 百分比计算特性 公式：(容器尺寸 - 图片尺寸) × (-50%) 结果始终为正值，使图片定位在容器内部而非外部。 3. background-repeat 性能优化: 避免使用过小尺寸的平铺图片，会导致渲染卡顿 推荐使用 100px×100px 等适中尺寸，平衡文件大小与渲染

9.2 CSS 世界的 background background 相关属性: background-image、background-position、background-repeat、background-attachment、background-color: transparent； 如果是 IE9+浏览器，则还包括： background-size、background-origin、background-clip； 9.2.2background-position background-position:用来精确定位背景图出现的位置（从左上角 0 0 开始计量）。 值得范围：关键字（left、right、top、bottom、center）/偏移量（px，%）； 9.2.3 background-repeat 与渲染性能 background-repeat表示定义background-image的重复呈现方式 repe

9.2 CSS 世界的 background background 相关属性: background-image、background-position、background-repeat、background-attachment、background-color: transparent； 如果是 IE9+浏览器，则还包括： background-size、background-origin、background-clip； 9.2.2background-position background-position:用来精确定位背景图出现的位置（从左上角 0 0 开始计量）。 值得范围：关键字（left、right、top、bottom、center）/偏移量（px，%）； 9.2.3 background-repeat 与渲染性能 background-repeat表示定义background-image的重复呈现方式 repe

background 属性 • background-image: none • background-position: 0% 0% • background-repeat: repeat • background-attachment: scroll • background-color: transparent 1. 隐藏元素的 background-image 到底加不加载，一个元素如果 display 计算值为 none，在 IE 浏览器下（IE8～IE11）依然会发送图片请求，Firefox 浏览器不会，Chrome 和 Safari 浏览器上：如果隐藏元素同时又设置了 background-image，则图片依然会去加载；如果是父元素的 display 计算值为 none，则背景图不会请求。 2. 与众不同的 background-posi

9.2 CSS 世界的 background background 相关属性: background-image、background-position、background-repeat、background-attachment、background-color: transparent； 如果是 IE9+浏览器，则还包括： background-size、background-origin、background-clip； 9.2.2background-position background-position:用来精确定位背景图出现的位置（从左上角 0 0 开始计量）。 值得范围：关键字（left、right、top、bottom、center）/偏移量（px，%）； 9.2.3 background-repeat 与渲染性能 background-repeat表示定义background-image的重复呈现方式 repe

CSS 世界的 background - background-image: none - background-position: 0% 0% - background-repeat: repeat - background-attachment: scroll - background-color: transparent 如果是 IE9+浏览器，则还包括: - background-size: auto auto - background-origin: padding-box - background-clip: border-box 9.2.1 隐藏元素的 background-image 到底加不加载 在 IE 浏览器下(IE8~IE11，更高版本不确定)依然会发送图片请求，Firefox 浏览器不会，至于 Chrome 和 Safari 浏览器则似乎更加智能一点:如果隐藏元素同时又设置了 background-image，则图片依

呃呃呃呃都让人发发发尴尬

::first-letter(:first-letter)伪元素生效，是需要满足一定条件的，元素的 display 计算值必须是 block、inline-block、list-item、table- cell 或者 table-caption，其他所有 display 计算值都没有用，包括 display:table和 display:flex 等。 CSS 世界的 color 属性支持十六进制颜色、rgb 颜色。十六进制颜色指的是长得像#000000 或#000 这样的颜色，我们在 CSS 中用得最频繁的就是这种格式的颜色。原因是字符数目最少，书写更快，渲染性能更高。

8.7.1 深入:first-letter 伪元素及其实例 1．::first-letter 伪元素生效的前提。首先，元素的 display 计算值必须是 block、inline-block、list-item、tablecell 或者 table-caption，其他所有 display 计算值都没有用，包括 display:table和 display:flex 等。 2．::first-letter 伪元素可以生效的 CSS 属性。如果字符被选作了::first-letter 伪元素，并不是像::before 伪元素那样，几乎所有 CSS 都有效，只是一部分有效。 所有字体相关属性；所有背景相关属性；所有 margin 相关属性；所有 padding 相

8.7 了解:first-letter/:first-line 伪元素 8.7.1 深入:first-letter 伪元素及其实例 1．::first-letter 伪元素生效的前提 元素的 display 计算值必须是 block、inline-block、list-item、table- cell 或者 table-caption； 常见的标点符号、各类括号和引号在::first-letter伪元素眼中全部都是“辅助类”字符； 2．::first-letter 伪元素可以生效的 CSS 属性 所有字体、背景、margin、padding、border相关属性，color 属性 3．::first-letter 伪元素的一些有意思的特点 支持部分 display 属性值标签嵌套；颜色

:first-letter:只能作用于块级作用域， 有场景限制（字体、背景、margin、padding、border、color等）。价格前面一般都有一个¥符号，这个符号字体往往会比较特殊，字号也比较大，同时和文字的数值有几像素的距离。要实现这样的效果，通常的做法是在¥符号外面包一个 span 标签，命名一个类名，然后通过 CSS 控制. color: currentColor 变量是个好东西，可以使用当前 color 计算值，即所谓颜色值,IE9以上才支持。

:first-letter和:first-line有一些相似之处，使用时的限制也类似： 1. 首先元素的display计算值必须是block、inline-block、list-item、table-cell或者table-caption 2. 常见的标点符号是辅助字符，不属于first-letter'生效的范围 3. 字符前面不能出现图片或者inline-block/inline-table之类的元素存在 4. 能支持生效的CSS属性也有一些限制 CSS世界的color很单调，表现在： 1. 少的可怜的颜色关键字 2. 不支持transparent 3. 不支持currentColor 4. 不支持rgba和hsla 5. 支持却鸡肋的系统颜色

8.7 了解:first-letter/:first-line 伪元素 8.7.1 深入:first-letter 伪元素及其实例 1．::first-letter 伪元素生效的前提 元素的 display 计算值必须是 block、inline-block、list-item、table- cell 或者 table-caption； 常见的标点符号、各类括号和引号在::first-letter伪元素眼中全部都是“辅助类”字符； 2．::first-letter 伪元素可以生效的 CSS 属性 所有字体、背景、margin、padding、border相关属性，color 属性 3．::first-letter 伪元素的一些有意思的特点 支持部分 display 属性值标签嵌套；颜色

::first-letter伪元素用于选择文本块的第一个字符并应用样式，其使用需满足条件： 元素display值须为block/inline-block/list-item/table-cell/table-caption； 仅作用于有效字符（如字母、数字、中文等），标点符号等"辅助字符"需跟随有效字符才能生效； 前面不能存在inline-block/inline-table元素； 支持字体、背景、边距等CSS属性，但无法使用display/visibility控制显隐； 具有特殊权重特性——继承属性（如color）会覆盖父级!important声明； 可与::before伪元素联动，且

:first-letter:只能作用于块级作用域， 有场景限制（字体、背景、margin、padding、border、color等）。价格前面一般都有一个¥符号，这个符号字体往往会比较特殊，字号也比较大，同时和文字的数值有几像素的距离。要实现这样的效果，通常的做法是在¥符号外面包一个 span 标签，命名一个类名，然后通过 CSS 控制. color: currentColor 变量是个好东西，可以使用当前 color 计算值，即所谓颜色值,IE9以上才支持。

8.7.1 1. ::first-letter 的演变 早期称为伪类（如 :first-letter），后规范为伪元素（::first-letter），语义变为“首字符作为元素的假想子元素”。 2. 生效条件 元素类型限制：元素的 display 计算值需为 block, inline-block, list-item, table-cell, table-caption。 字符类型限制： 主字符：数字、字母、中文、空格、$ 及运算符，需要注意空格常被忽略。 辅助字符（视为“赠品”）：标点符号、括号、引号等（·@#%&*()（）[]【】{}:："“”;；'‘’》《,，.。？?!！…*、

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