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

#书摘 #css #前端
最近在读CSS 世界，分享一点点书摘热知识

1. 原来图片没有src不发请求，src为空字符串会发请求（p3）

「注意，这里的<img>直接没有src属性，再强调一遍，是直接没有，不是src=""，src=""在很多浏览器下依然会有请求，而且请求的是当前页面数据。当图片的src属性缺省的时候，图片不会有任何请求，是最高效的实现方式。」

2. 终于知道为什么有些库重置css的时候会把img初始display值统一设置为inline-block了（p4）

图片压的貌似有点狠，待会儿评论传图片文件
张鑫旭写的这三部曲很不错。打算都看一遍 —— 顺序是CSS世界、CSS新世界、CSS选择器世界