snowdream

前言

这是一个我在基于TS编写一种配置型组件模型时所想到的一种类型推导，个人觉得还是挺有意思的，在推导过程中对TS类型编程的理解又加深了不少；

前言

CSS，全称为Cascading Style Sheets，用于定制文档样式；CSS使得网页的呈现更加丰富，这也是初学前端的人最感到新奇的地方；

但是随着对CSS的深入使用才会发现：那些被我们津津乐道的“xx属性的奇淫技巧”这类东西都只不过是浮在CSS最表层的现象而已；这种对于CSS的使用方式在我看来无异于“盲人摸象”，即只能通过观察表面现象来总结使用方法，而不是从本质出发寻找解决方案，因此就可能会陷入永远只能借助表面现象来解决问题的困境。

前言

作为一个FE，每天都会和浏览器打交道，写的代码最终也会在各种各样的浏览器中进行呈现；那么浏览器到底是什么？它是如何理解我们的代码并渲染得到我们所看到的画面的？

“私、気になります”

浏览器，简单地来说就是一个应用程序，只不过这个应用程序比较特殊，是专门用于从万维网中获取资源的；而网页就是其中一种最常见的资源。

A web browser is a software application for retrieving, presenting and traversing information resources on the World Wide Web. ^[1]

注：以下探讨的是现代浏览器（Modern Browser），不包括IE这种；

前言

shape-outside这个属性实在是太冷门了，要不是去研究<basic-shape>数据类型，还真不会发现这个属性；但是其兼容性也还算可以，PC端完全没问题，移动端iOS是支持比较好的，而安卓端则不太支持：

shape-outside是CSS Shapes Module Level 1规范中提出的一个属性，用于设置浮动元素周围内联元素对其包裹的形状，也就是说借助shape-outside属性可以使得浮动元素周围的文字不再是围绕盒模型进行环绕，而是可以指定任意形状进行环绕，达到更丰富的文字环绕效果；比如：

前言

<basic-shape>是一种特殊的CSS数据类型，用于表示使用基本形状函数，从而应用相应的形状或路径；目前支持<basic-shape>类型的属性有：

• shape-outside：该属性用于指定周围内联元素环绕时所包围的形状；
• clip-path：该属性用于指定所属盒模型的裁剪形状；
• offset-path：该属性用于指定元素移动的路径，属于offset属性中的一个；