第二天的内容是 CSS 和一些简单的 UI 设计技巧，我从一开始学 CSS 就觉得只会写 CSS 是没用的，如果写出来的页面巨丑无比，那你写它干什么。。。，不如不写（虽然我以往自己写的界面都巨丑🙉）。
今天讲的 UI 更多的是怎样提高用户体验的技巧，学完之后还是觉得这个很重要的，产品设计出来就是面向用户、方便用户的；要不然就不需要前端了，直接给个脚本更快😂。
下面是今天记得笔记，有些内容自己已经熟悉了就没有去记，更多的是记自己不了解和不熟悉的内容，共勉共勉，加油💪。
刚好学到 CSS ，来一篇我之前写的一篇关于 CSS 选择器优先级的文章：CSS选择器优先级、层叠、继承，大家可以参考参考。
一、CSS基础
1、CSS的基础
-
CSS简介
Cascading Style Sheets，层叠样式表；
-
选择器
选择器有很多种，选择器的优先级是一个很重要的内容，我之前写了一篇文章可以看看（CSS选择器优先级、层叠、继承）；
-
层叠、继承与选择器优先级
-
布局
- 盒子模型（块级盒子、内联盒子）
- 弹性布局
- 定位（position）：非static属性值经常用于弹窗、下拉选项、固定导航栏等场景；
- float、table、grid布局；
-
text
-
box-shadow
-
动画
2、学习CSS的方法
- 学习资源
- codecademy.comk：边学边练的网站
- udacity.com：视频式教学+课后实验互动
- w3cschool & 菜鸟教程
- freecodecamp.org：github上star最多的课程项目
- MDN & CSS-TRICKS & W3C CSS标准文档
3、CSS调试
利用各大浏览器提供的开发工具进行调试；
4、CSS扩展
-
CSS预处理器
使编写CSS代码更加程式化；
代表工具：
- less
- sass
- stylus
5、CSS革新
-
在js中写csss
以 styled-components为代表的css-in-js方案；
-
提供固定的样式库，在html文件中组合就行
以 tailwindcss 为代表的 utility-class 方案；
二、UI设计
1、功能导向
设计简单的、完整的功能，以MVP(Minimum Viable Product)版本功能来作为设计目标；
2、设计原则
-
层级：让用户能迅速抓住重点，并能知道怎样获取次要点；
-
一致性：风格要统一；
3、资料
《写给大家看的设计书》
4、一些具体设计方案
-
居中放
-
除非大屏浏览是核心场景，不然一般来说内容宽度应该在600~800px之间；
-
多列布局的核心是保持内容有一个合适宽度，维持可读性；
-
保持元素之间的间距 ；开始时间距多设点，然后从松到紧的去调试；
用间距凸显不同范围；
-
字体在12~20px是更适合阅读；
-
文本要对齐；
-
十多个灰色、主题色、功能色，克制地使用颜色，经量使用户唯一的抓住重点；要想到色盲和不同文化赋予不同色彩的含义不同；
5、实用技巧
- 增加蒙层来提高对比度
- 使用text-shadow来提高文字和背景的对比度；
- 用户头像加点内阴影；
- 干掉分界线；
