1. 图片网站
    goole wall haven 下载一些高清大图
    阿里的矢量图标网站
  2. 英文维基百科
    中文维基百科
  3. 周边工具
  • LESS CSS
    Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。 中文官网 英文官网
  • SASS SCSS
    世界上最成熟、最稳定、最强大的专业级CSS扩展语言 中文官网
  • PostCSS
    一种 CSS 处理程序

【建议】先不要看周边工具，学好最朴素的 CSS，然后升级就很容易了。

  1. CSS学习资源

CSS学习建议

CSS不正交及表现

CSS不正交的意思就是，CSS的各个属性之间存在相互影响，也就是会自相矛盾。所以很可能你现在实现了效果，再加入一个属性以后效果就完全打乱了。

CSS容易学？

背套路就能应付平时工作。

CSS是艺术，不是科学。不要尝试去理解CSS的复杂原理，满足需要就行了。

  • 自己试（会累死的）
  • 让别人研究，我用现成的，现在有很多这样的网站。
  • 多实践，多总结
  • 先学会套路：布局&居中&自适应&媒体查询&响应式&能做页面就可以了。
  • 熟练常用的，其他效果用到再google。
  • 巧用工具
    CSS3 Generator
  • 平时有时间就写博客总结以下CSS的用法。
  • 记住几个常见的写法即可：居中{两种水平居中，三种垂直居中}、布局{两种左右结构，两种左中右结构}、一行省略、多行省略

CSS难学（不正交 + 属性多 + 性价比低）

CSS 不正交，因而有些反直觉。不正交主要表现在两点：

  1. 同一元素的各属性之间互相影响
    • margin合并 VS border
    • ul>li VS display
    • position: absolute VS display: inline
  2. 各元素之间互相影响
    • position: fixed VS transform
    • float 影响 inline 元素

中文学习资源只看大 V 的（毕竟他们要维护形象不能瞎写），英文资源看 CSS Tricks、MDN 和 Codrops。书的话作用不大，最权威的书其实是文档。而中文学习资源毕竟是二手资源，别人的博客更是三手资源，所以还是好好学英文，直接读一手资源。

如果你想快速上手，就先写 CSS 小 demo 再学理论。
如果你想一鸣惊人，就仔细看 CSS 规范文档。

CSS知识

文档流是什么？

文档内元素的流动方向。每个内联元素（inline）从左到右流动，每个块级元素（block）从上到下流动，每个块级元素独占一行。给元素加边框border是很好的调试方法。

说一下自己的感受，调试了一点CSS样式，工具很好用，就是调试需要耐心，往往根据浏览器显示的为准，有点玄学的感觉，所以往往需要选取容错率较高的CSS样式实现方法。CSS样式是一环套一环的，“牵一发而动全身”，可见布局很重要，CSS经验也很重要。

脱离文档流有很多种方法！

方法一：设置了positopn:fixed; 的元素 就不属于原来的父元素了，父元素的宽度和高度都不包括它。而是相对屏幕固定。但是这种方法脱离文档流后，所有元素都会往左上角 叠加 起来。
必须加width=100%解决，加了宽度超级容易出bug，文档超出了宽度，又得在里面加一个内标签，把padding放在里面。

宽度是由什么决定的

块级元素宽度是自适应的，站满整个屏幕一行。随着屏幕宽度变化，块级元素宽度变化。

内联元素的宽度不可测。会随内联元素里的内容的宽高自动改变。

高度是由什么决定的

  1. 内联元素的高度
    内联元素的高度不可测。给内联元素设置宽高会默认失效
    但是你可以把内联元素设置为块级元素。其中内联元素有个奇特的地方，当一个内联是一个很长的单词的时，页面就算不够大容纳不下这个单词，默认情况下这个单词是不会分开，浏览器会把这个单词看作一个整体，英文的不可分割性原则，但是中文汉字就算是一个词语也会分开。但是可以通过设置word-break：break-all;样式强行分开。
    比如span的高度确定就是个复杂的问题，具体以浏览器显示为主。
  2. 块级元素的高度
    块级标签元素的高度：由其内部文档流元素 的高度总和 决定【背】也就是说，块级标签内部没有元素的时候 高度为0
  3. 内联块级元素
    内联块级元素不会独占一行，而且元素宽和高可设定，拥有内联和块级元素的特点
    方说这个是这个是历史上最大的错误，不知道从何说起？这个内联块级元素把块级元素变成内联元素以后，把独占一行的块级元素排成一行，就像导航栏的浮动效果。方说尽量用浮动float。 在不同电脑上看可能元素高度又不一样了，所以最好设置一下line-height,比如line-height=22px,这样元素载各个电脑的浏览器上就一样了。

box model

box-sizing有两个值分别为content-box和border-box，默认是 content-box
content-box 盒子的宽 和 高是 content 的宽和高。
border-box 盒子的宽 或 高是 content 、padding 和 border 三者宽或高的总和

开始写CSS

  • 引入 CSS 的三/四种方式
  • 从最小的东西开始入手
  • 逐渐变大
  • 学会组织 CSS（以后再说）
  • 自己写 CSS UI 库

引入CSS样式的方法

标签内联样式

直接给开始标签加上style属性，如<body style="background-color:grey;"></body>，优点是样式加在哪个标签上很明显，缺点是开始标签就会变得很长，代码看上去很乱很丑

<style>标签引入内联样式表。

如：

  1. <head>
  2.  ...
  3.     <style>CSS样式</style>
  4. </head>

这样所有的样式都被我们放到<style>标签里面了，我们的html代码看上去更简洁了，可是当我们的样式很多的时候，style标签内容就太长了，导致head头部太长了，这样也太不好看了，为此我们引进方法3。

link标签嵌入外部CSS样式。

当CSS样式太多太长的时候，我们将所有的CSS样式都放外部的.css文件里，然后再在头部<head>里用<link>标签把这个 .css 文件嵌入进来，如此一来，我们的HTML就有了CSS样式，HTML代码也很干净简洁，有规矩。这个方法会在装载页面主体部分 之前装载css文件，这样实现出来的页面从一开始就是带有样式效果的。

<head>
  ...
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

一个.css文件里嵌入另一个.css文件

结果就是两个.css的样式都会应用于html文件，最终展示出来。这个效果我们可以通过开发者工具，查看浏览器发起的请求 验证。这个方法会在整个页面装载完成之后再装载css文件，对于有的浏览器来说， 在一些情况下，如果页面文件的体积比较大，则会出现先现无样式的页面，闪烁一下之后再出现设置样式的效果。从浏览者的感受来说，这是使用导入式的一个缺陷。

/* 在style.css里 */
 @import "other.css"

要学好CSS

  • 通读CSS规范文档-17章。CSS2中文文档CSS3没有中文，英语要求高，人类根本都不读不完
  • 让张鑫旭（国内CSS研究前端最深的）研究，我用。
  • CSS研究再厉害，不能变成商业价值也没有用。
  • 所以一切够用就行。
  • JS才是前端核心