#书摘 #css #前端
《CSS 世界》深入内联元素 —— vertical-align 书接上回

1. 「vertical-align 上标下标类属性值指的就是 sub 和super 两个值，分别表示下标和上标。在HTML代码中，有两个标签语义就是下标和上标，分别是上标 <sup> 和下标` <sub>`，因为这两个HTML标签长得很类似，所以很多人经常记不清到底哪个是上标哪个是下标。我告诉大家一个记忆方法，就是看p和b两个字母的圈圈位置，如果圈圈在上面，就是“上标”，如果圈圈在下面，就是“下标”」确实好记
2. 「最后，HTML标签 <sup> 和 <sup> 的vertical-align属性也和super和sub有着非同一般的关系，那就是 <sup> 标签默认的vertical-align属性值就是super，`<sub>` 标签默认的vertical-align属性值就是sub。上标常用作标注，下标在数学公式、化学表达式中用得比较多，基本上，vertical-align 上标下标类属性值的实际应用价值也就上面这点儿了，设计本意之外的使用价值几乎就是零。」
3. 基于vertical-align属性的纯css定位的水平垂直居中弹框（p3-p5）可了解，现在自己应该是不会用这种方法的：https://demo.cssworld.cn/5/3-10.php

#书摘 #css #前端
《CSS 世界》深入内联元素 —— vertical-align

1. 说到这里，我就忍不住多说两句。很多即使工作很多年的前端开发人员，也可能不知道 vertical-align的属性值支持数值，更不知道支持负值，这着实让我很意外。如果实用性差那还好理解，关键是vertical-align的数值属性值在实际开发的时候实用性非常强。一是其兼容性非常好，二是其可以精确控制内联元素的垂直对齐位置。http://demo.cssworld.cn/5/3-3.php
2. vertical-align 起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display值为table-cell的元素。换句话说，vertical-align 属性只能作用在 display 计算值为 inline、inline- block，inline-table或table-cell的元素上，而浮动和绝对定位会让元素块状化，
3. 填坑来了：「在4.3.5节最后提到了一个“内联特性导致的margin无效”的案例，代码如下：

<div class="box">
<img src="mm1.jpg">
</div>
.box > img {
height: 96px;
margin-top: -200px;
}

此时，按照理解，-200px 远远超过图片的高度，图片应该完全跑到容器的外面，但是，图片依然有部分在.box 元素中，而且就算 margin-top 设置成 -99999px，图片也不会继续往上移动，完全失效。其原理和上面图片底部留有间隙实际上是一样的，图片的前面有个“幽灵空白节点”，而在 CSS 世界中，非主动触发位移的内联元素是不可能跑到计算容器外面的，导致图片的位置被“幽灵空白节点”的vertical-align:baseline给限死了。我们不妨把看不见的“幽灵空白节点”使用字符x代替，原因就一目了然了」（p4-5）

其实这就是为什么很多重置css会把图片重置为块级元素的原因，比如tailwind

#书摘 #css #前端
《CSS 世界》深入内联元素之行高 建议通读

1. 对于非替换元素的纯内联元素，其可视高度完全由 line-height 决定。注意这里的措辞—“完全”，什么padding、border 属性对可视高度是没有任何影响的
2. 因此，对于文本这样的纯内联元素，line-height 就是高度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。比方说，line-height 设为16px，则一行文字高度是16px，两行就是32px，三行就是 48px，所有浏览器渲染解析都是这个值，1像素都不差。
3. 那如果是替换元素，又或者是块级元素，line-height在其中又扮演什么角色呢？上面推荐的文章里有提到
「行距顾名思义就是两行之间的距离，那么很显然，行高就等于字高加上行距。由于行高可以小于字号，因此行距可以是负值。那么为什么要引出半行距的概念呢？因为在网页上，行距不是完全加在字的上方或下方的，而是均匀分布在字的上下，而半行距就是行距的一半，因此在追求严格的显示效果的场景应当尽量使得行高减去字号的值为偶数，这样它才能作为行距被平分，如果为奇数不能平分，则可能在不同的浏览器中多出来的1px的位置会不同（不一定是在上方或下方）。」
4. 可能是由于CSS开发人员不够专注细致，外加规范设计本身的原因，设计师往往会对各个元素间的距离间隙标注得很清晰。但是，设计师并不是开发人员，他们并没有把网页中无处不在行间距考虑在内，所有与文字相关的间距都是从文字的上边缘和下边缘开始标注的。除非我们全局行高设置为line-height:1，否则这些标注的距离和我们使用的margin间距都是不一致的。
举个例子，假设line-height是1.5，font-size大小是14px，那么我们的半行距大小就是：(14px * 1.5 - 14px) / 2 = 14px * 0.25 = 3.5px。border 以及 line-height 等传统 CSS 属性并没有小数像素的概念，因此，这里的 3.5px 需要取整处理，如果标注的是文字上边距，则向下取整；如果是文字下边距，则向上取整，因为绝大多数的字体在内容区域中都是偏下的。所以，假设设计师标注了文字字形上边缘到图片下边缘间距 20px，则我们实际的margin-top值应该是17px，因为3.5px向下取整是3px。——严谨！

#书摘 #css #前端
《CSS 世界》关于border的奇妙小知识

1. border-color 有一个很重要也很实用的特性，就是“border-color 默认颜色就是color色值”。具体来讲，就是当没有指定border-color颜色值的时候，会使用当前元素的color计算值作为边框色。（p1）
2. 使用透明边框实现右下方background定位，默认background背景图片是相对于padding box定位的，也就是说，background-position:100%的位置计算默认是不会把border-width计算在内的。（p2）
3. 优雅地增加点击区域大小（p3）
4. border 属性可以轻松实现兼容性非常好的三角图形效果，即使在移动端，使用CSS的border属性绘制三角形等图形仍是性价比最高的方式。例如，一个朝下的等腰直角三角形（p3，这个算热知识）
5. border 实现等高布局（这个实现给我看傻了，p4-5） https://demo.cssworld.cn/4/4-4.php