#书摘 #css #前端
《CSS 世界》与众不同的background-position百分比计算方式
1. CSS中有一类属性值被称作 <position> 值，表示一种CSS数据类型、二维坐标空间，用于设置相对盒子的坐标。<position> 值支持1～4个值，可以是具体数值，也可以是百分比值，还可以是left、top、right、center和bottom等关键字。图9-5给出了经典的示意（p1）

- 如果缺省偏移关键字，则会认为是center，因此background-position:top center可以直接写成background-position:top。
- IE8浏览器最多只支持同时出现 2个值，从 IE9 开始支持同时出现 3个值或4 个值，作用是指定定位的偏移计算从哪个方位算起。

2. <position>值的百分比值有着特殊的计算公式：

positionX = (容器的宽度 - 图片的宽度) * percentX;
positionY = (容器的高度 - 图片的高度) * percentY;

#书摘 #css #前端
《CSS 世界》了解 :first-letter 伪元素
很多年前，Chrome浏览器和IE9浏览器还未出现，那时候first-letter叫伪类选择器，写法是前面加一个冒号，如:first-letter。那时候的语义要更直白一些，选择第一个字符，然后设置一些样式。后来，伪类和伪元素被划分得更加明确和规范了，::after、::before、 ::backdrop、::first-letter、::first-line、::selection等是伪元素，:active、 :focus、:checked等被称为伪类，这就导致::first-letter的语义发生了一些变化—首字符作为元素的假想子元素。
1．::first-letter 伪元素生效的前提 要想让::first-letter(:first-letter)伪元素生效，是需要满足一定条件的，而且条件乍一看还挺苛刻。首先，元素的display计算值必须是 block、inline-block、list-item、table- cell 或者 table-caption，其他所有 display 计算值都没有用，包括 display:table和display:flex等。 此外，不是所有的字符都能单独作为::first-letter 伪元素存在的，常见的标点符号、各类括号和引号在::first-letter 伪元素眼中全部都是“辅助类”字符，不算。字符前面不能有图片或者 inline-block/inline-table 之类的元素存在。
2．::first-letter伪元素可以生效的CSS属性 如果字符被选作了::first-letter 伪元素，并不是像::before 伪元素那样，几乎所有CSS都有效，只是一部分有效。因此，如果妄图使用 visibility:hidden 或者 display:none 隐藏::first- letter伪元素，还是省省吧（如p3）

#书摘 #css #前端
《CSS 世界》关于两端对齐
就不多说了，如图，这个方法我也用过，书里写的有点儿感慨：
关于使用空标签心理障碍 —— 「有人对代码有洁癖，原本规整的列表最后加几个空标签，心里难受。这种心理往往出现在新人身上，本质上是因为关注点是代码自身，而不是产品、同事或公司更高层面的东西。于是，当产品经理提需求时，他们想到的是我的代码如何如何，而不是产品收益如何如何。毕竟我们是职场人，很显然，创造收益和价值的意识要远比代码洁癖心理对职业生涯发展帮助更大。回到我们这里，代码排版确实不美了，但是功能很好地实现了，且非常健壮，容错性强，而且对SEO没有任何干扰，对辅助设备访问也没有任何干扰，百益无一害，有什么好难受的呢！」

#书摘 #css #前端
《CSS 世界》white-space 与换行和空格的控制
white-space 属性声明了如何处理元素内的空白字符，这类空白字符包括 Space 键、Enter 键、Tab 键产生的空白。因此，white-space可以决定图文内容是否在一行显示（回车空格是否生效），是否显示大段连续空白（空格是否生效）等。其属性值包括下面这些
- normal ：合并空白字符和换行符。
- pre ：空白字符不合并，并且内容只在有换行符的地方换行。
- nowrap ：该值和normal一样会合并空白字符，但不允许文本环绕。
- pre-wrap ：空白字符不合并，并且内容只在有换行符的地方换行，同时允许文本环绕。
- pre-line ：合并空白字符，但只在有换行符的地方换行，允许文本环绕。

从上面的解释我们可以看出，white-space 的功能分 3 个维度，分别是：是否合并空白字符，是否合并换行符，以及文本是否自动换行。于是我们就可以得到一个更加直观的功能表，如表8-2所示（p2）

1. 合并空格：会让多个空格变成1个，也就是我们平常看到的效果，敲了10个空格，结果页面就1个空格。
2. 合并换行：会把多个连续换行合并成1个，并当作1个普通空格处理，就是键盘空格键敲出来的那个空格。
3. 文本环绕：一行文字内容超出容器宽度时，会自动从下一行开始显示。

#书摘 #css #前端
《CSS 世界》关于 letter-space
letter-spacing 可以用来控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格等。letter-spocing具有以下一些特性。：
（1）继承性。
（2）默认值是 normal 而不是 0。虽然说正常情况下，normal 的计算值就是 0，但两者还是有差别的，在有些场景下，letter-spacing 会调整 normal 的计算值以实现更好的版面布局。
（3）支持负值，且值足够大的时候，会让字符形成重叠，甚至反向排列（非IE浏览器）
（4）和text-indent属性一样，无论值多大或多小，第一行一定会保留至少一个字符。在默认的左对齐情况下，无论值如何设置，第一个字符的位置一定是纹丝不动的。
（5）支持小数值，即使0.1px也是支持的，但并不总能看到效果，这与屏幕的密度有关。对普通的桌面显示器，设备像素比是1，最小渲染单位是1px，因此，需要至少连续10个字符，才能看到 0.1px 产生的 1px 间距变化，如果是 9 个字符，则不会有效果，这很可能会让人误以为letter-spacing不支持非常小的数值，实际上是支持的。

由于letter-spacing负值的字体重叠特性，我们还可以利用该属性实现一些文本动效（如文字飞入）