呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
联系频道主：@cosine_yu
#优质博文 #前端 #css
1. 【上篇】你的图片加载，一点都不酷炫！不信You Look Look...
2. 【下篇】你的图片加载，一点都不酷炫！不信You Look Look...

就喜欢这种花里胡哨，suki（x
juejin.cn
【上篇】你的图片加载，一点都不酷炫！不信You Look Look... - 掘金
对于图片加载，咱们可以更酷炫一点！ 比如这样！ 这样！ 这样！ 还有这样的！ 前言 现代网站中的图片使用量是很大的，在一些门户网站中，还会有一些大尺寸的图片展示，这个时候图片如果加载不顺畅，是很影响用
优质博文 前端 css
Expanding Input

❗️ Source Code

Save and Share 🚀

👉 @frontend_trend
Sparkly Circle Loader

❗️ Source Code

Save and Share 🚀

👉 @frontend_trend
#书摘 #css #前端
《CSS 世界》关于 clip
1. 可访问性隐藏： clip 剪裁被我称为“最佳可访问性隐藏”的另外一个原因就是，它具有更强的普遍适应性，任何元素、任何场景都可以无障碍使用。（p1）
2. clip 隐藏仅仅是决定了哪部分是可见的，非可见部分无法响应点击事件等；然后，虽然视觉上隐藏，但是元素的尺寸依然是原本的尺寸，在 IE 浏览器和 Firefox 浏览器下抹掉了不可见区域尺寸对布局的影响，Chrome浏览器却保留了。 Chrome 浏览器的这种特性表现实际上让 clip 隐藏有了瑕疵，好在通常使用场景是看不到这个差异的，故影响甚微。（p2-3）
书摘 css 前端
#书摘 #css #前端
《CSS 世界》流的破坏与保护——关于overflow
「此时，有人可能会惊呼：什么？设置 height:0 同时 overflow:hidden？那岂不是里面所有元素都被剪裁看不见啦？如果是普通元素确实会如此，但是对于 absolute 绝对定位以及 fixed 固定定位元素，规则要更复杂！」


1. overflow 对absolute 元素的剪裁规则用一句话表述就是：绝对定位元素不总是被父级overflow属性剪裁，尤其当overflow在绝对定位元素及其包含块之间的时候。
上面这句话是官方文档的直译，似乎还是有些拗口，我们再换一种方法表述就是：如果overflow 不是定位元素，同时绝对定位元素和 overflow 容器之间也没有定位元素，则overflow无法对absolute元素进行剪裁

最后，非常有必要补充一点，那就是由于 position:fixed 固定定位元素的包含块是根元素，因此，除非是窗体滚动，否则上面讨论的所有overflow剪裁规则对固定定位都不适用。这一点后面还会提及。

2. 在CSS 世界中，上面说的这些几乎都是完美无瑕的，但是，随着 CSS3 新世界到来的冲击，规则在不经意间发生了一些变化，其中最明显的就是transform属性对overflow剪裁规则的影响，CSS3新世界中transform属性似乎扮演了原本“定位元素”的角色，但是这种角色扮演并不完全。

可以看到 overflow 元素自身 transform 的时候，Chrome 和 Opera 浏览器下的overflow剪裁是无效的，这是唯一和有定位属性时的overflow剪裁不一样的地方，因此才有“角色扮演并不完全”的说法。

transform除了改变overflow属性原有规则，对层叠上下文以及position:fixed的渲染都有影响。

因此，当大家遇到 absolute 元素被剪裁或者 fixed 固定定位失效时，可以看看是不是transform属性在作祟。
书摘 css 前端
#书摘 #css #前端
《CSS 世界》流的破坏与保护

1. absolute的包含块
包含块（containing block）这个概念实际上大家一直都有接触，就是元素用来计算和定位的一个框。比方说，width:50%，也就是宽度一半，那到底是哪个“元素”宽度的一半呢？实际上就是指的“包含块”。
普通元素的百分比宽度是相对于父元素的 content box 宽度计算的，而绝对定位元素的宽度是相对于第一个position不为static的祖先元素计算的。
实际上，大家已经和“包含块”打过交道了，对于这些计算规则，规范是有明确定义的，具体如下（剔除了不常用的部分内容）。
（1）根元素（很多场景下可以看成是 <html> ）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。
（2）对于其他元素，如果该元素的 position 是 relative 或者 static，则“包含块”由其最近的块容器祖先盒的 content box 边界形成。
（3）如果元素 position:fixed，则“包含块”是“初始包含块”。
（4）如果元素 position:absolute，则“包含块”由最近的 position 不为 static 的祖先元素建立，具体方式如下。
如果该祖先元素是纯 inline 元素，则规则略复杂：
- 假设给内联元素的前后各生成一个宽度为0的内联盒子（inline box），则这两个内联盒子的 padding box 外面的包围盒就是内联元素的“包含块”
- 如果该内联元素被跨行分割了，那么“包含块”是未定义的，也就是 CSS2.1 规范并没有明确定义，浏览器自行发挥。否则，“包含块”由该祖先的 padding box 边界形成。
（5）如果没有符合条件的祖先元素，则“包含块”是“初始包含块”。

2. 可以看到，和常规元素相比，absolute 绝对定位元素的“包含块”有以下3个明显差异：
（1）内联元素也可以作为“包含块”所在的元素
（2）“包含块”所在的元素不是父块级元素，而是最近的 position 不为 static 的祖先元素或根元素
（3）边界是 padding box 而不是 content box
书摘 css 前端
#书摘 #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 前端
cosine - 前端人の日常频道
#书摘 #css #前端 《CSS 世界》margin无效情形解析 「因为 margin 属性的诸多特异性，所以，我们在实际开发的时候，经常会遇到设置的margin无效的情形，这里我罗列一下，希望大家遇到类似的问题知道原因以及如何对症下药。」 1. display 计算值为 inline 的非替换元素的垂直 margin 是无效的，虽然规范提到有渲染，但浏览器表现却未寻得一点踪迹，这和padding是有明显区别的。对于内联替换元素，垂直margin有效，并且没有margin合并的问题，所以图片永远不会发生margin合并。…
#书摘 #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 前端
Before
After
Back to Top