CSS 世界

coderljw 2024-10-13 大约 23 分钟

# 1. 了解 CSS 世界中的 “未定义行为”

像<a>、<button>这样的元素，当我们使用键盘进行 Tab 键切换的时候，是可以被 focus 的，表现为虚框或者外发光，这类元素称为 “焦点元素”。非焦点元素指没有设置 tabindex 属性的<div>、<span>等普通元素。

# 2. 块级元素

“块级元素” 对应的英文是 block-level element，常见的块级元素有<div>、<li>和<table>等。需要注意是，“块级元素” 和 “display 为 block 的元素” 不是一个概念。例如，<li>元素默认的 display 值是 list-item，<table>元素默认的 display 值是 table，但是它们均是 “块级元素”，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。

# 3. 文字少的时候居中显示，文字超过一行的时候居左显示（demo (opens new window)）

如果想让英文字符和中文一样，每一个字符都用最小宽度单元，可以试试使用 CSS 中的 word-break: break-all。

<div class="box">
  <p id="conMore" class="content">请给我一个面子,做我儿子吧！</p>
</div>

1
2
3

.box {
  width: 240px;
  padding: 10px;
  background-color: #cd0000;
  text-align: center;
}
.content {
  display: inline-block;
  text-align: left;
}

1
2
3
4
5
6
7
8
9
10

# 4. “首选最小宽度” 与凹凸效果（demo (opens new window)）

<span class="ao"></span>
<span class="tu"></span>

1
2

.ao,
.tu {
  display: inline-block;
  width: 0;
  font-size: 14px;
  line-height: 18px;
  margin: 35px;
  color: #fff;
}
.ao:before,
.tu:before {
  outline: 2px solid #cd0000;
  font-family: Consolas, Monaco, monospace;
}
.ao:before {
  content: 'love你love';
}
.tu {
  direction: rtl;
}
.tu:before {
  content: '我love你';
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 5. 关于 height: 100% 无效

有一种看似合理的说法：如果父元素 height:auto 子元素还支持 height:100%，则父元素的高度很容易陷入死循环，高度无限。实际上，这种解释是错误的，大家千万别被误导。证据就是宽度也存在类似场景，但并没有死循环。
首先，先下载文档内容，加载头部的样式资源（如果有的话），然后按照从上而下、自外而内的顺序渲染 DOM 内容。套用本例就是，先渲染父元素，后渲染子元素，是有先后顺序的。因此，当渲染到父元素的时候，子元素的 width:100%并没有渲染，宽度就是图片加文字内容的宽度。等渲染到文字这个子元素的时候，父元素宽度已经固定，此时的 width:100%就是已经固定好的父元素的宽度。宽度不够怎么办？溢出就好了，overflow 属性就是为此而生的。
为何宽度支持，高度就不支持呢？规范中其实给出了答案。如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为 auto。一句话总结就是：因为解释成了 auto。要知道，auto 和百分比计算，肯定是算不了的：（'auto' * 100/100 = NaN）。但是，宽度的解释却是：如果包含块的宽度取决于该元素的宽度，那么产生的布局在 CSS 2.1 中是未定义的。
还记不记得本书第 2 章最后的 “未定义行为” 吗？这里的宽度布局其实也是 “未定义行为”，也就是规范没有明确表示该怎样，浏览器可以自己根据理解去发挥。好在根据我的测试，布局效果在各个浏览器下都是一致的。这里和高度的规范定义就区别明显了，高度明确了就是 auto，高度百分比计算自然无果，width 却没有这样的说法，因此，就按照包含块真实的计算值作为百分比计算的基数。

# 6. 如何让元素支持 height:100%效果（demo (opens new window)）

1. 设定显式的高度值。
1. 使用绝对定位。
绝对定位元素的百分比计算和非绝对定位元素的百分比计算是有区别的，区别在于绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算在内，但是，非绝对定位元素则是相对于 content box 计算的。

# 7. 与众不同的初始值

min-width/min-height 的初始值是 auto，max-width/max-height 的初始值是 none。max-width/max-height 的初始值为何是 none 而不是 auto 呢？这个问题的答案其实与下面小节的内容有关。我们不妨举个简单的例子解释一下，已知父元素宽度 400 像素，子元素设置宽度 800 像素，假如说 max-width 初始值是 auto，那自然使用和 width 一样的解析渲染规则，此时 max-width 的计算值就应该是父元素的 400 像素，此时，你就会发现，子元素的 800 像素直接完蛋了，因为 max-width 会覆盖 width。于是，我们的 width 永远不能设置为比 auto 计算值更大的宽度值了，这显然是有问题的，这就是为什么 max-width 初始值是 none 的原因。

# 8. 超越!important，超越最大

超越!important：指的是 max-width 会覆盖 width。
超越最大：指的是 min-width 覆盖 max-width。

最后宽度为 256px。

<img src="1.jpg" style="width:480px!important;" />

img {
  max-width: 256px;
}

1
2
3

.container 元素表现为至少 1400px 宽。

.container {
  min-width: 1400px;
  max-width: 1200px;
}

1
2
3
4

# 9. 替换元素的尺寸计算规则

固有尺寸 > HTML 尺寸 > CSS 尺寸。

固有尺寸：图片原尺寸。

<!-- HTML 尺寸 -->
<img src="1.jpg" width="128" height="96" />

1
2

/* CSS 尺寸 */
img {
  width: 200px;
  height: 150px;
}

1
2
3
4
5

因为图片中的 content 替换内容默认的适配方式是填充（fill），也就是外部设定的尺寸多大，我就填满、跟着一样大。换句话说，尺寸变化的本质并不是改变固有尺寸，而是采用了填充作为适配 HTML 尺寸和 CSS 尺寸的方式。在 CSS3 新世界中，<img>和其他一些替换元素的替换内容的适配方式可以通过 object-fit 属性修改了。

/* 最终尺寸为1.jpg图片原尺寸 */
div:before {
  content: url(1jpg);
  display: block;
  width: 200px;
  height: 200px;
}

1
2
3
4
5
6
7

# 10. 替换元素和非替换元素的距离有多远

观点 1：替换元素和非替换元素之间只隔了一个 src 属性。
- 当我们点击按钮给图片添加一个 src 地址时，图片从普通元素变成替换元素，原本都还支持的::before 和::after 此时全部无效，此时再 hover 图片，是不会有任何信息出现的，于是就非常巧妙地增强了图片还没加载时的信息展示体验。
- 基于伪元素的图片内容生成技术（demo (opens new window)）。核心 CSS 代码：

img::after {
  /* 生成 alt 信息 */
  content: attr(alt);
  /* 尺寸和定位 */
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  /* 来点过渡动画效果 */
  transition: transform 0.2s;
}
img:hover::after {
  /* alt 信息显示 */
  transform: translateY(0);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

观点 2：替换元素和非替换元素之间只隔了一个 CSS content 属性（demo (opens new window)）。

<img />

img {
  content: url(1jpg);
}

1
2
3

# 11. logo 创新的方法（demo (opens new window)）

缺陷：无法设置图片的尺寸。要想在移动端使用该技术，建议使用 SVG 矢量图片。

h1 {
  content: url(logo.png);
}

1
2
3

# 12. padding 的百分比值

宽高比为 5:1 的比例固定的头图（demo (opens new window)）。

.box {
  padding: 10% 50%;
  position: relative;
}
.box > img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

1
2
3
4
5
6
7
8
9
10
11

内联元素的垂直 padding 会让 “幽灵空白节点” 显现，也就是规范中的 “strut” 出现。内联元素默认的高度完全受 font-size 大小控制。

span {
  padding: 50%;
  font-size: 0;
  background-color: gray;
}

1
2
3
4
5

# 13. padding 与图形绘制（demo (opens new window)）

三道杠。

.icon-menu {
  display: inline-block;
  width: 140px;
  height: 10px;
  padding: 35px 0;
  border-top: 10px solid;
  border-bottom: 10px solid;
  background-color: currentColor;
  background-clip: content-box;
}

1
2
3
4
5
6
7
8
9
10

双层圆。

.icon-dot {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid;
  border-radius: 50%;
  background-color: currentColor;
  background-clip: content-box;
}

1
2
3
4
5
6
7
8
9
10

# 14. margin 负值与等高布局（demo (opens new window)）

.column-box {
  overflow: hidden;
}
.column-left,
.column-right {
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

1
2
3
4
5
6
7
8

# 15. margin 合并的计算规则

“正正取大值”、“正负值相加”、“负负最负值”。

# 16. 了解各种 border-style 类型

如果你是一个 “性能控”，可以两个一起写（0 和 none），根据前辈的测试，这样写渲染性能最高。

div {
  border: 1px solid;
  border-bottom: 0 none;
}

1
2
3
4

为什么 border-width 的默认值是 media（3px）。

当边框宽度是 1px 和 2px 的时候，其表现和 border-style:solid 是一模一样的：当边框为 3px 的时候，才开始有双线边框的表现。
三道杠。

.icon-menu {
  width: 120px;
  height: 20px;
  border-top: 60px double;
  border-bottom: 20px solid;
}

1
2
3
4
5
6

# 17. border-color 和 color

border-color 有一个很重要也很实用的特性，就是 “border-color 默认颜色就是 color 色值”。

可以看到，使用 border 实现，我们 hover 变色的时候，只需要重置 1 处，也就是重置元素本身的 color 就可以了。因为整个图形都是使用 border 绘制的，同时颜色缺省，所以所有图形颜色自动跟着一起变了（demo (opens new window)）。
```
.add {
  color: #ccc;
  border: 2px dashed;
}
.add:before {
  border-top: 10px solid;
}
.add:after {
  border-left: 10px solid;
}
/* hover 变色 */
.add:hover {
  color: #06c;
}
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 18. 基于 ex 单位的天然垂直居中对齐（demo (opens new window)）

.icon-arrow {
  display: inline-block;
  width: 20px;
  height: 1ex;
  background: url(arrow.png) no-repeat center;
}

1
2
3
4
5
6

# 19. 内联元素的高度之本 — line-height

默认空<div>高度是由行高决定的，而非文字（demo (opens new window)）。
line-height 不可以影响替换元素（如图片的高度）。

不是 line-height 把图片占据高度变高了，而是把 “幽灵空白节点” 的高度变高了。
```
<div class="box">
  <img src="1.jpg" height="128" />
</div>
```
1
2
3
```
.box {
  line-height: 256px;
}
```
1
2
3

# 20. 行高与多行文字垂直居中（demo (opens new window)）

<div class="box">
  <div class="content">基于行高实现的...</div>
</div>

1
2
3

.box {
  line-height: 120px;
  background-color: #f0f3f9;
}
.content {
  display: inline-block;
  line-height: 20px;
  margin: 0 20px;
  vertical-align: middle;
}

1
2
3
4
5
6
7
8
9
10

# 21. 深入 line-height 的各类属性值

数值、百分比值、长度值差异（demo (opens new window)）。
- line-height:150%和 line-height:1.5em 代码下的文字重叠的原因在于<h3>和<p>元素继承的并不是 150%或者 1.5em，而是<body>元素的 line-height 计算值 21px，也就是说，<h3>和<p>元素的行高都是 21px，考虑到<h3>的 font-size 大小为 32px，此时<h3>的半行间距就是-5.5px，因而“标题”文字和下面的“内容”文字发生重叠。
- 但是 line-height:1.5 的继承则不同，<h3>和<p>元素的 line-height 继承的不是计算值，而是属性值 1.5，因此，对于<h3>元素，此时的行高计算值是 1.532px=48px，<p>元素的行高计算值是 1.520px=30px，于是，间距合理，排版舒适。
注意，在 CSS 中，计算行高的时候，行高值一定不要向下舍入，而要向上舍入。上面虽然 14*1.42857 计算机近乎是 20px，但在 Chrome 浏览器下，依然以 19px 的高度呈现，如果我们向上舍入取 1.42858，则最终所有浏览器行高计算值是 20px。

# 22. 内联元素 line-height 的“大值特性”

假如文字就 1 行，.box 元素的高度分别是多少？

无论内联元素 line-height 如何设置，最终父级元素的高度都是由数值大的那个 line-height 决定的，我称之为 “内联元素 line-height 的大值特性”（原因：幽灵空白节点）。
```
<div class="box">
  <span>内容...</span>
</div>
```
1
2
3
```
/* 示例一 */
.box {
  line-height: 96px;
}
.box span {
  line-height: 20px;
}

/* 示例二 */
.box {
  line-height: 20px;
}
.box span {
  line-height: 96px;
}
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 23. vertical-align 家族基本认识

使用 vertical-align 数值实现文字和小图标对齐（demo (opens new window)）。
- 由于 middle 并不是真正意义上的垂直居中，因此还是会有像素级别的误差，误差大小与字体和字号均有关。
- 设置 vertical-align: -5px，此时，图标和文字实现了真正意义上的垂直居中，此时容器的可视高度和当前行高 20 像素保持了一致。

# 24. vertical-align 作用的前提

前提条件：只能应用于内联元素以及 display 值为 table-cell 的元素。
这种情况看上去是 vertical-align: middle 没起作用，实际上，vertical-align 是在努力地渲染的，只是行框盒子前面的 “幽灵空白节点” 高度太小，如果我们通过设置一个足够大的行高让 “幽灵空白节点” 高度足够，就会看到 vertical-align: middle 起作用了。

<div class="box">
  <img src="1.jpg" />
</div>

1
2
3

/* 看上去不起作用 */
.box {
  height: 128px;
}
.box > img {
  height: 96px;
  vertical-align: middle;
}

/* 添加line-height */
.box {
  height: 128px;
  line-height: 128px; /* 关键 CSS 属性 */
}
.box > img {
  height: 96px;
  vertical-align: middle;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

table-cell 元素设置 vertical-align 垂直对齐的是子元素，但是其作用的并不是子元素，而是 table-cell 元素自身（demo (opens new window)）。

# 25. vertical-align 和 line-height 之间的关系

图片底部留有间隙的问题（demo (opens new window)）。
1. 图片块状化。
2. 容器 line-height 足够小。
3. 容器 font-size 足够小。
4. 图片设置其他 vertical-align 属性值。
两端对齐列表的间隙问题（demo (opens new window)）。
利用 inline-block 基线原理的小图标对齐（demo (opens new window)）。

# 26. vertical-align:middle 与近似垂直居中（demo (opens new window)）

line-height 和 vertical-align: middle 实现的多行文本或者图片的垂直居中全部都是 “近似垂直居中”，原因与 vertical- align: middle 的定义有关。
- 内联元素：元素的垂直中心点和行框盒子基线往上 1/2 x-height 处对齐。
- table-cell 元素：单元格填充盒子相对于外面的表格行居中对齐。

# 27. 成事不足败事有余的 clear

clear 属性只有块级元素才有效的，而::after 等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因。
由于 clear:both 的作用本质是让自己不和 float 元素在一行显示，并不是真正意义上的清除浮动，因此 float 元素一些不好的特性依然存在，于是，会有类似下面的现象。
- 如果 clear:both 元素前面的元素就是 float 元素，则 margin-top 负值即使设成-9999px，也不见任何效果。
- clear:both 后面的元素依旧可能会发生文字环绕的现象。

# 28. BFC 的定义

那什么时候会触发 BFC 呢？常见的情况如下。
- <html>根元素。
- float 的值不为 none。
- overflow 的值为 auto、scroll 或 hidden。
- display 的值为 table-cell、table-caption 和 inline-block 中的任何一个。
- position 的值不为 relative 和 static。
换言之，只要元素符合上面任意一个条件，就无须使用 clear:both 属性去清除浮动的影响了。因此，不要见到一个<div>元素就加个类似.clearfix 的类名，否则只能暴露你孱弱的 CSS 基本功。

# 29. 最佳结界 overflow

要想彻底清除浮动的影响，最适合的属性不是 clear 而是 overflow。

# 30. overflow 与滚动条

关于浏览器的滚动条，有以下几个小而美的结论。
- 在 PC 端，无论是什么浏览器，默认滚动条均来自<html>，而不是<body>标签。
- 滚动条会占用容器的可用宽度或高度。
```
html {
  overflow: hidden;
}

```
1
2
3
4
让页面滚动条不发生晃动的小技巧。

html {
  overflow-y: scroll; /* for IE8 */
}
:root {
  overflow-y: auto;
  overflow-x: hidden;
}
:root body {
  position: absolute;
}
body {
  width: 100vw;
  overflow: hidden;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

滚动条是可以自定义的。因为 IE 浏览器的自定义效果实在是比原生的还要难看，就不浪费大家时间了，就此打住。倒是支持-webkit-前缀的浏览器可以说说。
- 整体部分，::-webkit-scrollbar。
- 两端按钮，::-webkit-scrollbar-button。
- 外层轨道，::-webkit-scrollbar-track。
- 内层轨道，::-webkit-scrollbar-track-piece。
- 滚动滑块，::-webkit-scrollbar-thumb。
- 边角，::-webkit-scrollbar-corner。
- 但是我们平时开发中只用下面 3 个属性。
```
::-webkit-scrollbar {
  /* 血槽宽度 */
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  /* 拖动条 */
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  /* 背景槽 */
  background-color: #ddd;
  border-radius: 6px;
}
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 31. overflow 与锚点定位

元素设置了 overflow:hidden 声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在。

URL 锚链锚点定位和 overflow 的选项卡切换（demo (opens new window)）。

其一，容器高度需要固定。

其二，也是最麻烦的，就是 “由内而外” 的锚点定位会触发窗体的重定位，也就是说，如果页面也是可以滚动的，则点击选项卡按钮后页面会发生跳动，这种体验显然是非常不好的。

<div class="box">
  <div class="list" id="one">1</div>
  <div class="list" id="two">2</div>
  <div class="list" id="three">3</div>
  <div class="list" id="four">4</div>
</div>
<div class="link">
  <a href="#one">1</a>
  <a href="#two">2</a>
  <a href="#three">3</a>
  <a href="#four">4</a>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

.box {
  height: 10em;
  border: 1px solid #ddd;
  overflow: hidden;
}
.list {
  line-height: 10em;
  background: #ddd;
}

1
2
3
4
5
6
7
8
9

focus 锚点定位和 overflow 的选项卡切换优化（demo (opens new window)）。

# 32. 具有相对特性的无依赖 absolute 绝对定位

一个 absolute 就能实现定位（demo (opens new window)）。
“无依赖绝对定位” 与导航图标定位（demo (opens new window)）。
“无依赖绝对定位”与超越常规布局的排版（demo (opens new window)）。
“无依赖绝对定位”与下拉列表定位（demo (opens new window)）。

# 33. absolute 与 clip

clip 属性要想起作用，元素必须是绝对定位或者固定定位，也就是 position 属性值必须是 absolute 或者 fixed（不能缩写、不支持百分比值）。

# 34. 重新认识的 clip 属性

如何隐藏<h1>标签中的 “CSS 世界” 这几个文字，通常有以下一些技术选型。
1. 下策是 display:none 或者 visibility:hidden 隐藏，因为屏幕阅读设备会忽略这里的文字。
2. text-indent 缩进是中策，但文字如果缩进过大，大到屏幕之外，屏幕阅读设备也是不会读取的。
3. color:transparent 是移动端上策，但却是桌面端中策，因为原生 IE8 浏览器并不支持它。color:transparent 声明，很难用简单的方式阻止文本被框选。
4. clip 剪裁隐藏是上策，既满足视觉上的隐藏，屏幕阅读设备等辅助设备也支持得很好。
```
.logo h1 {
  position: absolute;
  clip: rect(0 0 0 0);
}
```
1
2
3
4

# 35. relative 与定位

relative 的定位还有另外两点值得一提：相对定位元素的 left/top/right/bottom 的百分比值是相对于包含块计算的，而不是自身。注意，虽然定位位移是相对自身，但是百分比值的计算值不是。
top 和 bottom 这两个垂直方向的百分比值计算跟 height 的百分比值是一样的，都是相对高度计算的。同时，如果包含块的高度是 auto，那么计算值是 0，偏移无效也就是说，如果父元素没有设定高度或者不是 “格式化高度”，那么 relative 类似 top: 20%的代码等同于 top: 0。

# 36. position:fixed 与背景锁定

蒙层弹窗：消失的滚动条使用同等宽度的透明边框填充。

蒙层显示的同时执行下面的 JavaScript 代码。

var widthBar = 17,
  root = document.documentElement
if (typeof window.innerWidth == 'number') {
  widthBar = window.innerWidth - root.clientWidth
}
root.style.overflow = 'hidden'
root.style.borderRight = widthBar + 'px solid transparent'

1
2
3
4
5
6
7

蒙层隐藏的时候执行下面的 JavaScript 代码。

var root = document.documentElement
root.style.overflow = ''
root.style.borderRight = ''

1
2
3

# 37. 了解衬线字体和无衬线字体

需要注意的是，serif 和 sans-serif 一定要写在最后，因为在大多数浏览器下，写在 serif 和 sans-serif 后面的所有字体都会被忽略。

body {
  font-family: 'Microsoft Yahei', sans-serif;
}

1
2
3

# 38. font 关键字属性值的应用价值

让网页的字体跟系统走。

html {
  font: menu;
}
body {
  font-size: 16px;
}

1
2
3
4
5
6

# 39. @font face 的本质是变量

借助 font-weight 实现响应式图标（demo (opens new window)）。

# 40. text-indent 与内联元素缩进

text-indent 的百分比值是相对于当前元素的 “包含块” 计算的，而不是当前元素（demo (opens new window)）。
text-align 与纯文本对齐。

<p>
  面子：请给我一个面子,做我儿子吧！
</p>
<p>
  剑来：大雨依旧磅礴。她不起身，徐凤年便一直撑着伞。老剑神李淳罡望向这一幕，瞪大眼睛。随即眼中黯然落寞缅怀追忆皆有。那一年背负那女子上斩魔台，一样是大雨天气，一样是撑伞。世人不知这位剑神当年被齐玄帧所误，木马牛被折并不算什么，只剩独臂也不算什么，这都不是李淳罡境界大跌的根由，潮亭下被困二十年，李淳罡也不曾走出那个自己的画地为牢。原本与世已是无敌，与己又当如何？李淳罡想起她临终时的容颜，当时她已说不出一个字，可今曰想来，不就是那不悔两字吗？！李淳罡走到大雪坪崖畔，身后是一如他与绿袍女子场景的撑伞男女。她被一剑洞穿心胸时，曾惨白笑言：“天不生你李淳罡，很无趣呢。”李淳罡大声道：“剑来！”徽山所有剑士的数百佩剑一齐出鞘，向大雪坪飞来。龙虎山道士各式千柄桃木剑一概出鞘，浩浩荡荡飞向牯牛大岗。两拨飞剑。遮天蔽曰。这一曰，剑神李淳罡再入陆地剑仙境界。
</p>

1
2
3
4
5
6

p {
  text-indent: -3em;
  padding-left: 3em;
}

1
2
3
4

# 41. letter-spacing 与字符间距

非 IE 浏览器反向排列。

<p class="lt">一二三四五</p>

.lt {
  letter-spacing: -2em;
}

1
2
3

letter-spacing 与字符动效（demo (opens new window)）。

.title {
  animation: text-in 1s both;
}
@keyframes text-in {
  0% {
    letter-spacing: -200px;
  }
  100% {
    letter-spacing: 0;
  }
}

1
2
3
4
5
6
7
8
9
10
11

# 42. word-spacing 与单词间距

word-spacing 仅作用于空格字符。可以是 Space 键敲出来的空格（U+0020），也可以是换行符产生的空格（浏览器解析为 U+0020），还可以是 Tab 键敲出来的空格（U+0009），抑或是&npsp;非换行空格（U+00A0）。
小程序 text-align: justify 不管用时可以试试这个。

# 43. 了解 word-break 和 word-wrap 的区别（demo (opens new window)）

顾名思义，word-break: break-all 的作用是所有的都换行，毫不留情，一点儿空隙都不放过，而 word-wrap: break-word 则带有怜悯之心，如果这一行文字有可以换行的点，如空格或 CJK（中文/日文/韩文）之类的，就不打英文单词或字符的主意了，在这些换行点换行，至于对不对齐、好不好看则不关心，因此，很容易出现一片一片空白区域的情况。

# 44. 一本万利的 text-transform 字符大小写（demo (opens new window)）

使用场景：身份证输入、验证码输入。

input {
  text-transform: uppercase;
}

1
2
3

# 45. 深入:first-letter 伪元素及其实例

::first-letter 伪元素生效的前提：首先，元素的 display 计算值必须是 block、inline-block、list-item、table-cell 或者 table-caption，其他所有 display 计算值都没有用，包括 display: table 和 display: flex 等。此外，不是所有的字符都能单独作为::first-letter 伪元素存在的，赠品字符不支持（“赠品字符”包括·@#%&()（）[]【】{}:："“”;。'‘’》《,，.。？?!！…、/\）。
::first-letter 颜色等权重总是多了一层：“第”这个字符的颜色超过 95% 的前端人员会认为是 blue，因为大家都是从 CSS 选择器权重的角度去考虑的。这个答案本身没问题，但是却忽略了很重要的一点，::first-letter 伪元素其实是作为子元素存在的，或者说应当看出是子元素，于是就很好理解了。对于类似 color 这样的继承属性，子元素的 CSS 设置一定比父元素的级别要高，哪怕父级使用了重量级的!important，因为子元素会先继承，然后再应用自身设置。因此，上面 CSS 和 HTML 代码的最终结果是，第一个字符 “第” 字的颜色是 red，红色。

<p><span>第一个</span>字符看看会不会变红？</p>

p:first-letter {
  color: red;
}
p > span {
  color: blue !important;
}

1
2
3
4
5
6

::first-letter 实际应用举例

<p>¥399</p>

.price:first-letter {
  margin-right: 5px;
  font-size: xx-large;
  vertical-align: -2px;
}

1
2
3
4
5

# 46. 故事相对较少的:first-line 伪元素

:first-line 的生效前提与:first-letter 一样，但没有 “赠品字符” 之类的梗存在。

::first-line 实际应用举例。

希望网站小标签、线框按钮和实色按钮全部都可以使用 color 颜色控制。

<a href class="btn-normal red" role="button">红色按钮</a>
<a href class="btn-normal blue" role="button">蓝色按钮</a>
<a href class="btn-normal green" role="button">绿色按钮</a>

1
2
3

当我们使用如下 CSS 代码的时候，实色背景按钮就会遇到文字颜色和背景颜色一样的问题。

.btn-normal {
  background-color: currentColor;
}

1
2
3

我们可以这样处理。

.btn-normal::first-line {
  color: #fff;
}

1
2
3

# 47. visibility 与元素的显隐

visibility 的继承性：父元素设置 visibility: hidden，子元素也会看不见，究其原因是继承性，子元素继承了 visibility: hidden，但是，如果子元素设置了 visibility: visible，则子元素又会显示出来，这个和 display 隐藏有着质的区别（demo (opens new window)）。
CSS3 transition 支持的 CSS 属性中有 visibility，但是并没有 display。

# 48. 真正的不占据空间的 outline 及其应用

案例一：头像剪裁的矩形镂空效果（demo (opens new window)）。
案例二：自动填满屏幕剩余空间的应用技巧。

<div class="footer">
  <p>Designed &amp; Powered by zhangxinxu</p>
</div>

1
2
3

.footer {
  height: 50px;
}
.footer > p {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  padding: 15px 0;
  background-color: #a0b3d6;
  outline: 9999px solid #a0b3d6;
  clip: rect(0 9999px 9999px 0);
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 49. 改变水平流向的 direction

CSS direction 与文字溢出打点效果（demo (opens new window)）。

<p class="ell" dir="ltr">开头是我，这是中间，然后就是结束</p>
<p class="ell" dir="rtl">开头是我，这是中间，然后就是结束</p>

1
2

.ell {
  width: 240px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

1
2
3
4
5
6

# 50. 改变 CSS 世界纵横规则的 writing-mode

水平方向也能 margin 合并（demo (opens new window)）。
使用 text-indent 实现文字下沉效果（demo (opens new window)）。

CSS 权威指南（下） CSS 揭秘