CSS历史
CSS是谁发明的
- 李爵士的挪威同事赖（Lie）先生首先提出CSS的理念
- 赖先生91年获硕士学位，94年提出CSS概念而闻名，99年任Opera的CTO，05年写公开信给比尔盖茨，写了Acid2验证浏览器是否支持Web标准
- 06年通过博士论文答辩
- 06年倡议Web网页应使用通用字体格式（现在也是）
- 07年倡议浏览器可以支持video标签
- 微软的IE常常成为他的批评对象
- 他也是Web打印概念的倡导者，用HTML和CSS写书
CSS全称 层叠 样式表
层叠指什么？
- 样式层叠
- 可以多次对同一选择器进行样式声明：分别写两个P标签，设置颜色，会同时作用所有P
- 选择器层叠
- 可以用不同选择器对同一个元素进行样式声明：在1基础上单独写一个class改颜色，使特定的P不一样
- 文件层叠
- 可以用多个文件进行层叠
- 这些特性使得CSS极度灵活
- 过于灵活导致有你写的标签被其他开发者轻易覆盖的隐患
样式表指什么？
- 类似p{ font-size: 100px;}
CSS 的版本
- CSS1 96年 不用管
- CSS2 98年 添加定位、z-index、media，不用管
- CSS2.1 04~11年 使用最广泛的版本
- CSS 3 99年开始起草 现代版本，分模块
- CSS 4* 分模块升级 还没有存在的东西，因为已经是不同模块独立升级了
我怎么知道哪些浏览器支持哪些特性
- 笨方法一个一个浏览器试
- 使用caniuse.com 现在用的方法
- 微软的edge已经用chrome内核
- UC被阿里收购，UC是阿里的
CSS是艺术
- 抛开理性思维，不要刨根问底背后的原理
- 不要问【为什么】，要说【原来是这样】
- 所见即所学
体系化学习
学一门语言必须学会什么
- 语法
- 如何调试
- 在哪查资料
- 标准制定者是谁
如何学
- Copy 抄文档、抄老师
- Run 放在自己的机器上运行成功
- Modify 加入一点自己的想法，然后重新运行
超级简单的语法
语法一：样式语法
选择器{
属性名：属性值;
/*注释*/
}
div{
border: xxxxx;
}
注意事项
- 符号都是英文符号，如果写错了，浏览器会警告
- 区分大小写
- 没有//注释
- 最后一个分号可以省略，但建议不要省略
- 任何地方写错了，都不会报错，浏览器会直接忽略
- 那我怎么知道自己写没写错呢?
语法二：@语法
@charset "UTF-8" /*放在第一*/
@import url(2.css);
@media(min-width: 100px) and (max-width: 200px){
语法一
}
注意事项
- @charset必须放在第一行
- 前两个@语法必须以分号;结尾
- @media语法会单独教学
- charset 是字符集的意思，但 UTF-8（除了8还有16，32，所以要指定UTF-8，但是GBK这种的字符编码就是GBK，从unicode的出现才开始这样）是字符编码 encoding，这是历史遗留问题
如何调试CSS
- 使用W3C验证器 (在线/命令行工具)不用试了
- vscode可以大概告诉你哪里错了
- WebStorm可以精确告诉你哪里错了
- 使用开发者工具看警告
如何使用开发者工具
- 找到你脑中的标签
- 看它是否有新选择器
- 看它的样式是否被划掉
- 看它的样式是否有警告
极力推荐 Border 调试法
步骤
- 怀疑某个元素有问题
- 就给这个元素加border
- border没出现？说明选择器错了或者语法错了
- border出现了？看看边界是否符合预期
- bug 解决了才可以把border删掉
记住
- CSS的border调试法
- 就相当于JS的log调试法
新人常见错误
低级错误
- 选择器拼写错误
- 属性名拼写错误
- 属性值拼写错误
- 大小写错误
- 没写分号
- 中文冒号
- 没写反花括号
- 没加单位
非低级错误
-没有非低级错误
查资料
网站推荐
- Google搜索关键词时加 MDN
- CSS tricks(英文网站，CSS 小技巧)
- 张鑫旭的博客（中国花时间学习CSS最多的一个人）
书籍推荐
- 不推荐买任何书
- CSS和HTML一样，以练习为主
在哪搜学习材料
PSD
- Freepik 搜索PSD
- 中文免费PSD网站比较少，需要多搜一下
- 365PSD里的UI套件还行
效果图
- dribbble.com 顶级设计师社区
- 可以用肉眼模范它
商业网站
直接模仿你常去的网站
不要沉迷临摹
- 每个类型的临摹一两个即可
- PC网站、手机网站、UI套件，再多无益
- 在外包公司最多不超过一年半
标准制定者？
- CSS SPEC 可以找到CSS最新标准，没人能看完它
- 你可以看看CSS 2.1 标准的中文版
- 可以看成圣经，很少翻出来看，撕逼的时候或者查正规描述时有用
文档流
首先理解几个重要的概念
- 文档流 Normal Flow
- 块、内联、内联块
- margin 合并
- 两种盒模型（border-box 更符合人类思维）
流动方向
- 形象：从左到右，从上到下
- inline元素从左到右，到达最后边才会换行（会跨行显示）
- block元素从上到下，每一个都另起一行
- inlie-block也是从左到右（不够位置就会下一行）
需要注意的地方！！
- HTML 5 中已经抛弃了「内联元素」的概念，所有元素都可以通过 CSS 变成内联的
- 因为其实都是由display来控制，比如可以将div的display设置成inline，那么他就是内联的了，而span、div只是默认display为inline和block而已。
- span.ib{第$个span元素}*数字可以一次性写多个有序的代码
宽度
- inline 宽度为内部 inline 元素（可以指内容，也可以指内嵌的inline）的和，不能用width指定
- block 默认自动计算宽度（auto），可用width指定
- inline-block 结合前两者特点，可用width
高度
- inline 高度由 line-height 间接确定，跟height无关
- block 高度由内部文档流元素决定（
style="position:absolute"可以脱离文档流），可以设height - inline-block 跟 block类似，可以设置height
overflow 溢出
- 内容（宽度or高度）大于容器
- auto 是灵活设置
- scroll 是永远显示，巨丑，别用
- hidden是直接隐藏溢出部分
- visible是直接显示溢出部分
- overflow可以分为overflow-x 和 overflow-y
- js.jirengu.com/rufug/2/edi…
- 代码在这里↓
脱离文档流
- 用了float 浮动
- 用了position: absolute/fixed 绝对定位，固定定位
- 脱离后，会直接在父级里布局，如果后面有元素盒子，会无视这个脱离了的，直接在身下布局
- js.jirengu.com/buyof/2/edi…
两种盒模型
content box
- width只含content
- width=content
border box 更好用
- width包含border+content
- width= padding*2 + content
margin 合并
哪些情况会合并
- 父子 margin 合并
- 兄弟 margin 合并
如何阻止合并
- 父子合并用padding/border挡住
- 父子合并用overflow:hidden 挡住
- 父子合并用display:flex,不知道为什么
- 兄弟合并是符合预期的
- 兄弟合并可以用inline-block消除
- 总之要一条一条死记
- 而且CSS的属性逐年增多，每年都可能有新的
基本但为
长度单位
- px像素
- em相对于自身 font-size的倍数
- 百分数
- 证书
- rem:等你把em滚瓜烂熟了再问rem
- vw和vh
- 其他长度单位都用的很少，不用了解
颜色
- 十六进制#FF6600 或者 #F60
- RGBA颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)
- hsl颜色 hsl(360,100%,100%)
动手画一个彩虹
- 源代码
- 思路
- 起手盒模型
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
- 写一个div作为祖先，里面生了7代div
- 给祖先设定长宽值而且一致
- 只需要记住祖先的id，其他的则通过id>div的方式找到
- 记得先写border确定边界
- 设定div的height，margin，每一代的div的height应该逐渐变小
- 每一代的div的background换个色
- 因为大伙儿的长宽相等，通过box-radius: 50%变身圆圈儿
- 将祖先高度减去一半，利用overflow遮住
- 再给最里头加个div，变成白色，祖先背景也白色
