CSS新世界的笔记(7)

我来写笔记

按有用程度 按页码先后 最新笔记

展开收起
第4页

Marvin不慌 (Don't Panic)

CSS世界已经有了CSS2和CSS3，那会有CSS4吗? 答案是:不会有CSS4!实际上，现在连CSS3这个词都已经名存实亡了，因为CSS3已经解体了。为什么说CSS3解体了呢? 因为CSS按照大版本的方式进行迭代实在是太低效了，低效的原因其实很好理解，如果CSS这门语言必须按照大版本迭代发布的话，只要其中一个版本有一个CSS特性存在极大的争议，那这个版本的CSS的发布时间就会延后。例如，CSS2.1的规范在2002年开始制定，而一直到2011年才成为推...
2022-07-19 15:47:22
展开收起
第五章

Ennui

CSS渐变深入了解linear-gradient()线性渐变如果不写渐变方向，默认都是to bottom的渐变方向0deg是to top的，度数是顺时针旋转的，所以45deg是从左下到右上的渐变指定的长度，是以渐变方向的垂直线距离为基准的，假设设置了45deg方向，100px的长度，则渲染规则如下图所示渐变断点支持一次性设置两个位置值，如linear-gradient(white 40%, skyblue 40% 60%, white 60%)，则表示40%~60%的范围都是skyblue（新语法）除渐变断...
2022-02-09 15:07:54
展开收起
第四章

Ennui

透明度控制属性opacity opacity属性值不为1的元素会创建一个层叠上下文，层叠顺序会变高，可以实现DOM顺序靠前的元素覆盖后面的元素 opacity属性的叠加计算规则：opacity属性无继承性，当父元素0.5，子元素0.5，则子元素的不透明度为0.5 x 0.5 = 0.25 opacity属性的有效范围为0 ~ 1，当超过这个边界的，都会取边界值，如-0.99会取0，如999会取1 圆角属性border-radius 本节主要的奉献在于介绍了圆角的渲染机制。圆角其实是由给...
2022-02-08 11:24:57
展开收起
第三章

Ennui

这篇爆肝写了挺久的，内容杂又多，不少地方理解也有困难，其中也跳过了不少我觉得有难度且没多大用处的部分，不过依然是有一些地方没弄懂的已经标记出。 ps.豆瓣这个读书笔记排版很不友好，只能将就看着了。尺寸体系 width: fit-content 是最实用最常用的，他表示元素的宽度将由其内容决定，盒子紧紧包裹住内容。这在需要水平居中时很实用。对于stretch、available、fill-available这三个关键字来说，虽然名称不同，但作用都...
2022-01-04 22:42:27
展开收起
3.3 边框

明天

扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果 border-image属性：9 一、九宫格 border-image-slice:top right bottom left 表示支持1-4个数值或1-4个百分比值，后面可带一个关键字fill 默认值是100%，33.3% 1 2 3 4 5 6 7 8 9 fill 5 填充如果切割的左右距离之和大于背景图的宽，则上下边框不显示如果切割的上下距离之和大于背景图的高，则左右边框不显示 <h4>54切割</h4> <div class="example"&g...
2021-11-15 10:20:13
展开收起
第2章关键字

明天

异步：向服务器发出请求而无须用户等待响应 IE浏览器：一直到IE11 Edge浏览器：专指Edge12~18版本 Chromium Edge浏览器：使用Chromium为核心的Edge浏览器，是Edge18之后的版本，版本号从76开始现代浏览器(手机端)：使用web标准渲染网站，不需要使用CSS HACK，如谷歌、Safari、Firefox、Opera、Chromium Edge IE9+浏览器：IE及以上版本，以及所有Edge版本和所有现代浏览器 webkit浏览器：以webkit为渲染引擎，特指谷歌、Safari...
2021-11-15 10:15:15
展开收起
第二章

Ennui

CSS数据类型 CSS数据类型定义的是CSS属性中具有代表性的值，在规范的语法格式中，使用关键字外加一对尖括号（“<”和“>”）表示，例如数值类型是<number>、色值类型是<color>等。一种数据类型可以包含其他数据类型，或是函数，也可以是最常规的属性值。 color: <color> 以数据类型 <color> 为例，它支持以下的属性值： ●<rgb()> ●<rgba()> ●<hsl()> ●<hsla()> ●&...
2021-10-07 20:44:24