一. CSS 简介

1. CSS(Cascading Style Sheets)层叠样式表

CSS厉害之处——层叠

样式层叠：可以多次对同一选择器进行样式声明
选择器层叠：可以用不同选择器对同一个元素进行样式声明
文件层叠：可以用多个文件进行层叠所以这些特性使CSS极度灵活，也造成了CSS不正交的特点。

2. CSS版本

版本	时间	重点
CSS 2.1	2004～2011推出	使用最广泛的版本（所有浏览器都支持）
CSS 3	1999年开始起草	现代版本，分模块（IE8部分支持）

如何知道哪些浏览器支持哪些特性？

方法：使用caniuse.com (开发者社区的力量)

3. CSS语法(超级简单)

样式语法

选择器 {
    属性名: 属性值;
    /*注释*/
    /*所有符号都是英文符号，如果写错了，浏览器会警告 ；
      区分大小写；
      最后一个分号可以省略，但建议不要省略 */
}

@语法

@charset "UTF-8";        /*必须在第一行,@charset定义的是样式表的字符集，charset是字符集的意思，但UTF-8是字符编码的意思，是历史遗留问题，可以理解为声明字符编码的意思*/
@import url(2.css);      /*导入额外的CSS*/
@media (min-width:100px) and (max-width:200px){
    样式语法
}

如何调试CSS ？！

CSS任何地方写错了，浏览器都不会报错，会直接忽略，因此通过调试才能知道代码正确与否。

方法

使用VScode看颜色
使用WebStorm看颜色
使用开发者工具看警告：找到标签 → 看是否有选择器 → 看样式是否被划掉 → 看样式是否有警告
border调试法：给怀疑元素加border，逐行往下加；若border没出现，说明上一行选择器或者语法错了；若border出现了，看看边界是否符合预期；bug解决了才可以把border删掉
CSS的border调试法就相当于JS的log调试法。

4. CSS文档查询

CSS的标准制定者——W3C，搜索CSS spec可以找到CSS最新标准，看不完，可以看看CSS2.1标准的中文版。

网站推荐：

MDN ( 搜索关键词 + MDN )
CSS tricks
张鑫旭博客

5. CSS素材练习

PSD : freepik搜索psd web ； 365PSD(中文的)
效果图(不提供下载) ：dribbble.com顶级设计师社区，可以用肉眼模仿
商业网站 ：直接模仿你常用的网站
不要沉迷临摹！ 每个类型临摹一两个即可，PC网站、手机网站、UI套件，再多无益。

二. CSS 基本概念

1. 文档流 Normal Flow

1) 流动方向

所有内联元素inline（如span）从左到右依次排列，默认合并，到最右边会换行，如果最右边长度不够一个Inline元素，会自动切割为两半，即会跨越两行

所有块级元素block（如div）从上到下依次排列，不会合并，每个块级元素都独占一行

inline-block也是从左到右，很像inline，但有block的特点，不会跨两行 注意：HTML5不会再区分内联元素和块级元素，全部由样式display: inline ｜ block;决定元素类型，没有绝对的元素类型

2) 宽度

inline宽度为内部inline元素的和，不能用width指定 (不要在inline元素中加block元素，样式很奇怪)

block默认自动计算宽度，一般为一行长，可用width指定（block元素的默认宽度是width: auto; 不是100%，最大是100%，但永远不要写100%）

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

3) 高度

inline高度由line-height间接确定（字体变了可能会不一样），跟height无关

block高度由内部文档流元素的总和决定，可以设置height

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

4) overflow 溢出

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

默认 overflow: visible; 就是溢出，放那不管

overflow: hidden; 溢出部分被隐藏，用户看不到溢出的内容,无法滚动

overflow: scroll; 超出部分可以滚动展示，但有一个bug，是就算你的内容没有溢出，它也会显示滚动条

overflow: auto; 灵活地显示滚动条，只有在需要的时候才会出现滚动条 overflow可设置为 overflow-x 和 overflow-y

5) 脱离文档流

block元素的高度是由内部文档流元素决定的，所以当元素脱离了文档流，block元素就不会计算它的高度。
有两种方式可以脱离文档流：

position: absolute | fixed;
float: left | right;

2. 盒模型

1) 两种盒模型（border-box更符合人类思维）

CSS 盒模型有两种，一种是 content-box，一种是 border-box；
content-box 的宽度 width 表示内容区的宽度，不包含 padding 和 border；
border-box 的宽度 width 表示内容区 + padding + border 的总和，
一般优先使用border-box。

代码展示

<div class="content-box">content box</div>
<div class="border-box">border box</div>

 .content-box {
   margin: 25px;
   border: 5px solid red;
   padding: 15px;
   box-sizing: content-box;
   width: 100px;
   height: 100px;
 }
 .border-box {
   margin: 25px;
   border: 5px solid red;
   padding: 15px;
   box-sizing: border-box;
   width: 100px;
   height: 100px;
 }

代码效果图

虽然都设置了相同的宽度为100px，但可以看到两种盒模型的宽度是不同的
content-box盒模型：content = 100px,
border-box盒模型：padding + border + content = 100px

2) margin合并（只在上下方向合并，左右不会合并）

父子margin合并，兄弟margin合并

阻止合并

父子合并用padding/border挡住
父子合并用overflow：hidden挡住
父子合并用display：flex
兄弟合并用inline-block 消除

3) 基本单位

常用长度单位

px 像素
em 相对于自身font-size的倍数
百分数

颜色

十六进制 #FF6600或#F60
rgba颜色 rgb(0, 0, 0) 或 rgba(0, 0, 0, 1) (a指透明度，0全透明，1不透明)
hsl颜色或hsla hsl(360, 100%, 100%)——(颜色，饱和度，亮度)，a同上取色工具：snipaste pro

CSS简介和基本概念