一、CSS的历史

1. CSS是谁发明的

李爵士的挪威同事 Håkon Wium Lie （赖先生）首先提出 CSS

2.赖先生的生平

生平

  • 1991年获得MIT媒体实验室视觉研究理学硕士学位
  • 1994年提出CSS概念而闻名
  • 1999年任Opera的CTO
  • 2005年他写公开信给比尔盖茨问为什么IE不支持Web标准，盖茨说IE 7马上发布，他写了 Acid2 用来验证
  • 2006年通过了博士论文答辩
  • 2006年他倡议 Web 网页应使用通用字体格式

  • 2007年他倡议浏览器可以支持 video 标签

    观点

  • 微软的IE常常成为他的批评对象

  • 他也是Web打印概念的倡导者，用HTML和CSS写书

    3. CSS 层叠样式表

    层叠指的是什么

  • 样式层叠：可以多次对同一选择器进行样式声明

  • 选择器层叠：可以用不同选择器对同一个元素进行样式声明
  • 文件层叠：可以用多个文件进行层叠
  • 这些特性使得 CSS 极度灵活

这也为 CSS 后来被吐槽留下了隐患

4. CSS的版本

image.png

5.怎么知道哪些浏览器支持哪些特性

方法一：几十种浏览器全部跑一遍 （以前）
方法二：使用 caniuse.com （现在）

6. caniuse.com 的使用方法

使用

输入你关心的样式，比如 border-radius 或 filter
查看大部分浏览器的支持情况（红色表示不支持，黄色表示有一点问题看提示，绿色表示支持）
如果想看更多，点击 Show All（切换时如果没动静请切换成英文）
下方会详细说明兼容 bug 有哪些（可翻译成中文）

这个网站是怎么运作的

网站主一开始自己测试了一部分浏览器
社区的前端工程师帮助测试各种各样的浏览器
UC 浏览器和 QQ 浏览器当然主要是中国开发者测试
大家把测试结果提交到 GitHub 上
这就是开发者社区的力量

二、CSS 是艺术

就像画画、折纸，你需要用感性思维来理解 CSS。

不要用理性思维（所见即所学）

即不要问「为什么会这样」

而是说「原来是这样」

浏览器说是怎么样，就是怎么样

当然有极少情况是浏览器出错了

三、体系化学习

1.学一门语言必须学会什么

1.1.语法（怎么写代码）

1.1.1.语法一：样式语法

  1. 选择器 {
  2.   属性名: 属性值;
  3.   /*注释*/
  4. }

注意事项：

  • 所有符号都是英文符号，如果写错了，浏览器会警告
  • 区分大小写，a 和 A 是不同的东西
  • 没有 // 注释
  • 最后一个分号可以省略，但建议不要省略

  • 任何地方写错了，都不会报错，浏览器会直接忽略

    1.1.2.语法二：at 语法

    1. @charset "UTF-8";
    2. @import url(2.css);
    3. @media (min-width: 100px) and (max-width: 200px) {
    4. 语法一
    5. }

    注意事项：

  • @charset 必须放在第一行

  • 前两个 at 语法必须以分号 ; 结尾
  • @media 语法会单独教学
  • charset 是字符集的意思，但 UTF-8 是字符编码 encoding，这是历史遗留问题

  • @charset "UTF-8";的作用就是指定当前文件的字符编码（或字符集）

    1.2.如何调试（怎么知道自己代码写错了）

    1.2.1.方法（五种）

  • 使用 W3C 验证器（在线 / 命令行工具）不用试了 一般不会用

  • 使用 VSCode 看颜色
  • 使用 WebStorm 看颜色
  • 使用开发者工具看警告

  • Border 调试法

    1.2.2.如何使用开发者工具

    （1）找到你脑中的标签
    （2）看它是否有选择器
    （3）看它的样式是否被划掉
    （4）看它的样式是否有警告

    1.2.3.Border 调试法（必须会）

  • 步骤

（1）怀疑某个元素有问题 就给这个元素加 border
（2）border 没出现？说明选择器错了或者语法错了（为 border 前面一行有问题）
（3）border 出现了？看看边界是否符合预期
（4）bug 解决了才可以把 border 删掉

  • 记住 CSS 的 border 调试法 就相当于 JS 的 log 调试法

    1.2.4.新人常犯错误

  • 只有低级没有非低级错误

  • 选择器拼写错误
  • 属性名拼写错误
  • 属性值拼写错误
  • 大小写错误
  • 没写分号
  • 中文冒号
  • 没写反花括号

  • 没加单位

    1.3.在哪查资料（其实就是为了抄代码）

    1.3.1.网站推荐

  • Google 搜索关键词时加 MDN当做核实的规范

  • CSS tricks（英文）

  • 张鑫旭的博客详细，平实易懂

    1.3.2书籍推荐

    不推荐任何书籍，和HTML一样，以练为主

    1.4.在哪搜练习素材

    1.4.1. PSD

  • Freepik 搜索 PSD web

  • 如果下载慢，就把域名加入FQ插件
  • 中文免费 PSD 网站较少，需要多搜一下

  • 365PSD 里的 UI 套件还行

    1.4.2.效果图（不提供下载）

  • dribbble.com 顶级设计师社区

  • 可以用肉眼模仿它

    1.4.3.商业网站

    直接模仿你常去的网站（如百度等，一般先模仿手机版，比较小）

    1.4.4.注：不要沉迷临摹

  • 每个类型的临摹一两个即可

  • PC 网站、手机网站、UI 套件

  • 再多无益

    1.5.标准制定者是 W3C

    搜索 CSS spec 可以找到 CSS 最新标准 （没人能看完它）

    可以看看 CSS 2.1 标准的中文版

    2.如何学 （CRM学习法）

    Copy - 抄文档、抄老师
    Run - 放在自己的机器上运行成功
    Modify - 加入一点自己的想法，然后重新运行

    四、文档流

    1.基本概念

  • 文档流 Normal Flow

  • 块、内联、内联块
  • margin 合并
  • 两种盒模型（ border-box 更符合人类思维）

  • HTML 5 中已经抛弃了「内联元素」的概念，所有元素都可以通过 CSS 变成内联的

    2.文档流动方向

    链接

    内联（inline）元素

    可理解为 span 元素，从左到右排列，遇到行尾折行
    span{第$个span元素}*n 快速打出多行
    HTML

    1. <span>第1个span元素</span>
    2. <span>第2个span元素</span>
    3. <span>第3个span元素</span>
    4. <span>第4个span元素</span>
    5. <span>第5个span元素</span>
    6. <span>第6个span元素</span>
    7. <span>第7个span元素</span>
    8. <span>第8个span元素</span>

    CSS

    1. span{
    2. border: 1px solid red;
    3. padding:
    4. }

    效果图
    image.png
    span 元素中可加div元素

    1. <span>第1个
    2. <div>nihao</div>
    3. span元素</span>

    image.png

    块级（block）元素

    可理解为 div 元素，每个块级元素一行，从上到下（如下图）
    其中第1个 div 元素加了个脱离文档流的（后面详细介绍）

    1. <div style="width:10em;">第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素第1个div元素
    2. <div style="float:left;   background:white;">额外的DIV</div>
    3. </div>
    4. <div style="width:200px;">第2个div元素</div>
    5. <div>第3个div元素</div>
    6. <div>第4个div元素</div>
    7. <div>第5个div元素</div>
    8. <div>第6个div元素</div>
    1. div{
    2. border: 1px solid green;
    3. }

    效果图
    image.png

    inline-block 元素

    也是从左到右，但是一个元素不会跨两行
    输入 span.ib{第$个inline-block元素}*8

    1. <span class="ib">第1个inline-block元素</span>
    2. <span class="ib">第2个inline-block元素</span>
    3. <span class="ib">第3个inline-block元素</span>
    4. <span class="ib">第4个inline-block元素</span>
    5. <span class="ib">第5个inline-block元素</span>
    6. <span class="ib">第6个inline-block元素</span>
    7. <span class="ib">第7个inline-block元素</span>
    8. <span class="ib">第8个inline-block元素</span>
    1. .ib{
    2. border: 1px solid blue;
    3. display: inline-block;
    4. }

    效果图
    image.png

    3.宽度

  • inline 宽度为内部 inline 元素的和，不能用 width 指定

  • block 默认自动计算宽度，可用 width 指定

  • inline-block 结合前两者特点，可用 width

    4.高度

  • inline 高度由 line-height 间接确定，跟 height 无关

  • block 高度由内部文档流元素决定，可以设 height

  • inline-block 跟 block 类似，可以设置 height

    5. overflow 溢出

    即内容大于容器
    等内容的宽度或高度大于容器的，会溢出，可用 overflow 来设置是否显示滚动条

  • auto 是灵活设置（内容超出时显示滚动条）

  • scroll 是永远显示滚动条（即使内容没有超出也显示，所以一般不用这个）
  • hidden 是直接隐藏溢出部分（超出部分看不到了）
  • visible 是直接显示溢出部分

overflow 可以分为 overflow-x 和 overflow-y

5. 脱离文档流

哪些元素脱离文档流

  1. float:left/right
  2. position: absolute/fixed

不用上面的属性就不会脱离文档流

五、盒模型

1.两种盒模型（内部）

  • content-box 内容盒 - 内容就是盒子的边界

  • border-box 边框盒 - 边框才是盒子的边界

    公式

  • content-box width = 内容宽度

  • border-box width = 内容宽度 + padding + border（一般优先使用这种）

image.png

2.margin 合并（外部）

2.1.哪些情况会合并

父子 margin 合并 兄弟 margin 合并

2.2.如何阻止合并

  • 父子合并用 padding / border 挡住
  • 父子合并用overflow: hidden 挡住
  • 父子合并用 display: flex，不知道为什么
  • 兄弟合并是符合预期的 兄弟合并可以用inline-block消除

总之要一条一条死记 而且 CSS 的属性逐年增多，每年都可能有新的

3.基本单位

3.1.长度单位

  • px 像素
  • em 相对于自身 font-size 的倍数
  • 百分数
  • 整数
  • rem：等你把 em 滚瓜烂熟了再问 rem
  • vw 和 vh

其他长度单位都用得很少，不用了解

3.2.颜色

十六进制 #FF6600 或者 #F60（这是淘宝色）
RGBA 颜色 rgb(0,0,0) 或者 rgba(0,0,0,0~1) —0表示全透明，1表示不透明（相当于红绿蓝配色）
hsl 颜色 hsl(360,100%,100%)，跟 rgb 一样可以加a—色相、饱和度、亮度（英语：Hue, Saturation, Lightness）

六、用以上的知识做了一个彩虹

这是一个彩虹