Get Started

• CSS的历史
• 基本单位
• CSS语法
• 文档流

CSS是谁发明的

李即使的挪威同事赖先生首先提出CSS，基本上是凭一己之力发展了web。

CSS的厉害之处：层叠样式表

层叠指什么？

• 样式层叠
可以多次堆同意选择器进行样式声明
• 选择器层叠
可以用不同选择器堆用一个元素进行样式声名
• 文件层叠
可以用多个文件进行层叠
• 这些特性使得CSS极度灵活
也为CSS后来被吐槽留下了隐患

CSS版本

如何知道哪些浏览器支持哪些特性
1. 几十种浏览器全部跑一遍
2. 使用caniuse.com

CSS标准

css spec

基本单位

• 长度单位
px像素
em 相对于自身font-size的倍数
百分数
整数
rem：em熟了在了解
vw和vh
其他单位长度用的很少，不用了解

• 颜色
十六进制#FF6600或者#F60
RGBA颜色rgb（0，0，0）或者rgba（0，0，0，1）
hsl眼色hsl（360，100%，100%）

CSS语法

一、样式

选择器{
属性名: 属性值;
/注释/
}
• 注意事项
所有符号都是英文符号，写错了浏览器会警告
区分大小写，a和A是不同的东西
没有//注释
最后一个分号可以省略，但建议不要省略
任何地方写错了，都不会报错，浏览器会直接忽略

二、at语法

@charset "UTF-8";
@import url(2.css);
@media (min-width: 100px;) and (max-width: 200px){
语法一
}
• 注意事项
@charset必须放在第一行
前两个at语法必须以分号；结尾
@media语法会单独教学
charset是字符集的意思，但UTF-8是字符编码，是encoding，这是历史遗留问题。

如何调试CSS

• 方法
使用W3C验证器（在线/命令行工具）
使用vscode看颜色
使用webstorm看颜色
使用开发者工具看警告
• 如何找到开发者工具
找到想要搜索的标签
看它是否有选择器
看它的样式是否被划掉
看它的样式是否有警告

Border调试法

在选择器的各个地方加border测试
相当于JS的log调试法

查资料

• 网站推荐
Google搜索关键词加mdn
CSS tricks（英文）
张鑫旭的博客

• 书籍推荐
CSS和html一样，以练习为主

文档流

基本概念

• 要理解几个重要的概念
文档流Normal Flow
块、内联、内联块（最简单）
margin合并
两种和模型（border-box更符合人类思维）

文档流

• 文档中元素的流动方向
inline元素从左到右，到达最右边才会换行
（div从上到下，span向右）
block元素从上到下，每一个都另起一行
inline-block也是从左到右
• 宽度
inline宽度为内部inline元素的和，不能用width指定
block默认自动计算宽度，可用width指定
inline-block结合前两者特点，可用width
• 高度
inline高度有line-height间接决定，跟height无关
block高度由内部文档流元素决定，可以设height
inline-block跟block类似，可以设置height
※所有的元素都可以是inline和block。display: inline/block/inline-block;
※不要在inline元素里加block元素
※<div style="margin: 20px;width: auto;">如果不写宽度，就是自动的，不是100%
• 区别
inline-block不会像inline多于一行折返，分成两半
display: inline/block;内联和块都是可以通过样式改变的。
padding改变的不是span的实际高度和宽度，而是看的见的高度和宽度。
inline（内联）高度有line-height间接确定，跟height无关（跟字体有关）

overflow溢出

• 当内容大于容器就会溢出（高度或宽度）
div会把它里面的正常流动的元素全部包住（目前三种：span、block、inline-block）
• 当元素过长而内容过多时，被称为overflow。可以用scroll（永远显示）将其折叠，通过滚动条查看
基本不用，太丑了。换成了auto；自动折叠。
hidden是直接隐藏溢出部分
visible是直接显示一处部分
overflow可以分委overflow-x和overflow-y

.div1{
  border:1px solid green;
  height: 200px;
  /*overflow*/
  overflow: scroll;
}

• 如果div里什么都没有，那么div的高度为0.
• 如果由滚动条，内联元素默认在第一屏里显示

脱离文档流
1. position: absolute/fixed;
2. float: left;