css揭秘，认知与自我认知

写在前面的话

1. 规范

每项规范从最初启动到最终成熟，都会经过如下阶段：
编辑草案(ED)

1. 收割公开工作草案(FRWD)
2. 工作草案(WD)
3. 候选推荐规范(CR)
4. 提名推荐规范(PR)
5. 正式推荐规范(REC)

2.css

相信你的眼睛，而不是数字

人的眼睛并不是一台完美的输入设备。有时候精准的尺度看起来并不精准，而我们的设计需要顺应这种偏差。
看一个完美居中的物体时，会感觉它并不居中。实际上，我们应该把这个物体从几何学的中心点再晚上稍微上挪一点。
宽度相同的圆形和正方形，圆形会显得小一点。
上述视觉上的错觉在任何形式的视觉设计中都普遍存在，需要我们有针对性地进行调整。

响应式设计

避免不必要的媒介查询

保持代码的DRY

在软件开发中，保持代码的DRY 和可维护性是最大的挑战之一，而这句话对CSS 也是适用的。在实践中，代码可维护性的最大要素是尽量减少改动时要编辑的地方

案例

多重边框

涉及属性：

1. box-shadow （  设置多层纯色shadow）
投影不会影响布局，不会受到box-sizing属性的影响，不会影响鼠标事件，比如悬停、点击
// 因此不能用于处理项目中 slider热点优化
2. outline
处理两层边框
优点： 边框样式灵活

伪随机背景

知识点

linear-gradient(90deg, #fb3 15%,#665 0,#665 40%, #ab4 0,#ab4 65%,
hsl(20, 40%, 90%) 0);

//设置垂直渐变背景
// #fb3为[0,15%] #665为[0,40%] 以此类推，如果开始写的不是0，代表从上一个结束位置开始渐变;

注意事项

大的background-size 要放在后面；
蝉原则： 通过质数来增加随机性

条纹背景

background: linear-gradient(to right, #fb3 50%, #58a 0);
background-size: 30px 100%

// 角度灵活的斜向条纹
background: repeating-linear-gradient
//灵活的同色系条纹
background-image: repeating-linear-gradient(30deg,
hsla(0, 0%, 100%, .1 )，
hsla(0,0%,100%, .1) 15px,
transparent 0 , transparent 30px);  

知识点

H：
Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：
Saturation(饱和度)。取值为：0.0% - 100.0%
L：
Lightness(亮度)。取值为：0.0% - 100.0%
A：
Alpha透明度。取值0~1之间。

半椭圆 （也是略纠结的地方，第二个图形没画出来）

border-radius：可以为所有四个角提供完全不同的水平和垂直半径

菱形

正方形图片

transform: rotate(-45deg) scale(1.42);

插入换行

控制首个tr不换行
老套的

遇到多个dd 使用选择器作为辅助
dt ～dt

CSS3的同级元素通用选择器 E ~ F
匹配任何在E元素之后的同级F元素
dd + dt
毗邻元素选择器 E + F 匹配所有紧随E元素之后的同级元素F

文本行斑马条纹

华丽的 &符号（hack）

扩大可点击区域

根据兄弟元素数量设置样式

紧贴底部的页脚

在智渔云文档中用到，使用flex布局

自定义复选框☑️

input["checkbox"]{
  position: absolute;
  clip: rect(0,0,0,0);
}
// label ::before 设置为不换行空格   `\a0`

打字动画