#书摘 #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

#书摘 #css #前端
《CSS 世界》margin无效情形解析
「因为 margin 属性的诸多特异性，所以，我们在实际开发的时候，经常会遇到设置的margin无效的情形，这里我罗列一下，希望大家遇到类似的问题知道原因以及如何对症下药。」

1. display 计算值为 inline 的非替换元素的垂直 margin 是无效的，虽然规范提到有渲染，但浏览器表现却未寻得一点踪迹，这和padding是有明显区别的。对于内联替换元素，垂直margin有效，并且没有margin合并的问题，所以图片永远不会发生margin合并。
2. 表格中的 <tr> 和 <td> 元素或者设置display 计算值是table-cell或table-row的元素的margin都是无效的。但是，如果计算值是table-caption、table或者inline-table则没有此问题，可以通过margin 控制外间距，甚至::first-letter伪元素也可以解析margin。
3. margin合并的时候，更改margin值可能是没有效果的。以父子margin重叠为例，假设父元素设置有 margin-top:50px，则此时子元素设置 margin-top:30px 就没有任何效果表现，除非大小比50px大，或者是负值。
4. 绝对定位元素非定位方位的 margin 值“无效”。什么意思呢？很多时候，我们对元素进行绝对定位的时候，只会设置1～2个相邻方位。例如：`img { top: 10%; left: 30%;}` 此时right和bottom值属于auto状态，也就是右侧和底部没有进行定位，此时，这两个方向设置margin值我们在页面上是看不到定位变化的。(但实际上是有margin的，见p2)
5. 定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。(看上去就像是“失效”一样，见p2)
6. 鞭长莫及导致的margin无效。
比较抽象，后边再介绍
7. 内联特性导致的margin无效。（p4）

#书摘 #碎碎念
看到一篇很好的文章：2022年冬，我在临沂城送外卖（原文）

https://mp.weixin.qq.com/s/JOsE6eaojI9Uvkb-nAJ-Xg

1. 「有时候，精心修订过的数字会误导世界。还不如我们日常的体验。这些骑手干着全世界强度最大的外卖工作，拿着最低比例的收入;商家一批一批退出，不再接受它这么重的抽成;它的大股东们在全世界豪宅游艇转移资产……和这些财报数据显示的完全不符。」

2. 「而我们这些外卖总部的管理系统，与刚才说的那些人性化的公司比较，内核完全不同。
我们这些公司很特殊，就是我们这个“大系统”的具体而微，基因完全一样。它的一切设计，在大数据和人工智能的加持下，变得更精密、更准确，“恰好”能获取适量的劳动者，“恰好”能让骑手们维持最基本的生活，让他们积累不下休养生息、以钱养钱的些微资本，像驴一样，被牢牢拴在这台磨上。」

3. 「我不觉得知识分子是一个多么美好的词。——它就是个中性词，既不好，也不坏。
我读了很多年书，读了很多书，结识了很多读书人。但我觉得读书越多，盲区越大，反而会生成一种鄙视日常世界的莫名奇妙的自负。」