CSS基础

一、CSS是啥

层叠样式表
可用font直接内联（不建议）
也可用style内联style=“…”/< style >…< /style >
link href

二、基础规则

1.选择器

元素选择器（标签/类型选择器）
ID选择器：ID必须唯一
类选择器：更灵活
属性选择器
伪类选择器

2.层叠与继承

层叠：后面覆盖前面、选择器有优先级
继承：

三、CSS怎么学

课程+练习
w3+菜鸟
mdn+css-tricks

四、常用规则

1.盒子模型

块盒子：撑开一行
内联盒子：可设内外边距和边框，宽度可以撑开，设置高宽无效（可改为inline-block）

2.布局display

正常文档流：
static
块级元素整个换行，内联元素溢出部分换行
弹性盒子：
flex
弹性盒子子元素display仍然是内联或块状但是会被忽略
居中对齐的方式，主要就是flex的justify-content和align-item
相对定位：
relative
绝对定位：
absolute
fixed

3.装饰

文字：字体、颜色、字号、下划线、居中
背景：
边框：
阴影：
交互：
动画：

五、进阶

调试
预开发：tailwind
css-in-js

六、UI设计

一、简约设计

画草图
功能至上

二、设计原则

层级
一致性

三、设计体系

页面
间距
文字
色彩
阴影

四、实用技巧

明晰的用户头像：内阴影
干掉分界线：应用+间距

五、资源

语雀：给开发看的UI设计
推荐阅读：《写给大家看的设计书》