css 数据类型简述

本章大部分的内容来自张鑫旭老师的css新世界。希望大家多多支持张鑫旭老师css三部曲。

为什么 CSS 数据类型很重要

css发展迅速。

大概意思就是css现在发展太快了，再加上css现在很多模块是拆解开的。凭借着以前的思维经验这玩意就很难，指不定漏掉什么了。

提高学习效率

理解数据的类型，避免挨个去记住。

统一理解模型

就是从某些属性提取出一些类似的特征，形成了一种通用的认知模型。

适应新特性

比如突然又蹦出来一个css，你就把它当初一个函数，知道它的意思，知道他需要传入的参数就ok。但是这个参数，是类似于已经之前定义好的集合类型，减少负担压力。

CSS 常见数据类型解析

具体的所有的，在这里肯定是介绍不了，太多了，我们只能看张鑫旭老师在css新世界介绍了什么类型，咱就跟着瞅一眼。具体的比如你用到什么了去张鑫旭老师的博客下面有一篇css值类型文档大全、MDN，然后下面有个Formal syntax,或者css权威指南瞅一眼就得了。

shape-box

这里插一个题外话，我是感觉记住这种css类型不要死记硬背，这里有什么内部的属性，大概扫一眼，这玩意是干嘛的，最常见用在哪。现在这各个大佬的博客、css-tricks、甚至chatgpt都行，你就了解一下。

接下来闲言少絮，直接开搂。

shape-box是做什么的: 决定形状计算区域的基准，这不一下子任督二脉打通了，就是你想要裁剪根据，我哪个盒区域计算被怎么用呢：常见就是shape-outside.

shape-box支持的属性如下：

<box>
margin-box

这一看，margin-box大家明白啊，这不就是边距盒吗，那box是啥呢。

这就得再往下拆解了

content-box;
padding-box;
border-box;

这大家不是一眼看明白了。

<basic-shape>

咱还是和上面一样先看一下这个basic-shape是做什么的： basic-shape是一种css数据类型，用于定义几何形状。那这玩意最常见的用在哪呢：这些形状通常有clip-path、shape-outside属性结合使用。

这一看大家不就几乎明白了，那就是裁剪，绘图用的被，这玩意。在这记得说一句大漠老师的新书了css实战技巧的第一partcss图形。

注：这里有点不要脸了(❁´◡`❁)，后面带了自己的邀请码，这里可以提一句，如果大家确实想要自己节省一点，可以自己给自己推广一下，还能减点钱。

好不多说了。

inset() -> 矩形
circle() -> 圆形
ellipse() -> 椭圆形
path() -> 路径
polygon()->多边形

什么你问我，这些怎么去用(ﾟДﾟ*)ﾉ，哥们只能告诉你，css新世界没写ㄟ( ▔, ▔ )ㄏ。我告诉你，你就能看吗，看了你就记住了吗。

<image>

老套路被，image:是一种css数据类型，用来描述图形资源。最常见的：background-image

url -> url -> 调用图像资源
gradient -> 渐变图像
element() -> 类似于截图功能。
image() -> 支持回退机制的图片
image-set() -> 多分辨率图像
cross-fade() -> 两个图像交叉点淡化
paint() -> 调用css PaintAPI 绘制图像

也许你会觉得后面几个哇，好叼，后面几个不是直接起飞🛫，我就是和你说你就用吧，项目绝对酷炫，后期上线xx客户告诉你用不了/_ \。你和他说，为什么要让我做兼容性，而你我的尊敬的客户，难道你配不上，电脑上最新的浏览器吗(❁´◡`❁)。

<color>

是什么：css中用来定义颜色属性的类型。用在哪：太多了，只要是颜色就能用得到。

color其实是属于非常庞大的一部分内容，想想也合理，那画面咱总不能，都是像以前都是黑白的吧，也不能让咱这四位数五位数的显示器，没有一点体验上优势吧。

先说一些张鑫旭老师在css新世界提到的

<rgb()>;
<rgba()>;
<hsl()>;
<hsla()>;
<hex-color>;
<named-color>;
currentColor;
deprecated-system-color;

上面这种其实除了currentColor和deprecated-system-color，大家应该几乎都用过，就是没用过，也抽瞅见过。其实这两个so-easy。currentColor就是当前color 的颜色,这个color可不是css的类型，他是css的属性，就是我们平常定义的字体颜色。 deprecated-system-color,就是废弃的颜色。了解也没用，那你说了为什么没用，你还写，张鑫旭老师写了ㄟ( ▔, ▔ )ㄏ，咱总得尊重一点吧。

说完了这些还有一些新的

lch()
lab()
oklch()
oklab()
color()

这些感兴趣的骚年，可以自己去找资料看一下，当然这里我们还可以推荐大漠老师的另外一本小册（ps:大漠老师看见请打款）现代 CSS,(❁´◡`❁)没想到吧还有哥们的推广码，大家也可以自己推广自己的，上面的我说了方法。

以上的部分大概就是这个章节的内容。

首先总结了为什么要学习css数据类型。齐次讲了常见的几个类型结构。

注：这里我大大部分只是罗列了，张鑫旭老师,css新世界这本书，这一章节的部分，并不全面，也不够深入，大家如果感兴趣可以买一下这本书瞅一瞅，顺便说一句张鑫旭老师在b站,现在也在精讲css三部曲的课程，搭配css三部曲看非常好，因为有些内容过时了，张鑫旭老师也提出了。同时我个人建议也可以搭配一些其他小册，文章去看，集百家之长。

到这篇就结束了，谢谢大家，有什么问题评论区留言，有问题，看情况去改（￣︶￣）↗　。