浏览器兼容检查：

CanIUse

CSS reset——默认样式的去除

* { /*有的说法说*会使得性能变差，要一个个设置使用了的标签下面的样式*/
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
button {
  font-family: inherit;
}
ol,
ul {
  list-style: none;
}
table {/*必须加！去除table间隙*/
  border-collapse: collapse;
  border-spacing: 0;
}

语法

样式语法

选择器{
    属性名：属性值;
}

@语法
```
@charset "UTF-8";/*必须放在第一行申明字符编码集*/
@import url(style.css);
@media (min-width:100px) and (max-width:200px){
    /* ... */
}
```
注意点：
1. @语法要以分号结尾
2. charset 是字符集，但是 utf-8并不是字符集，是字符编码集，charset确定了字符集，这是历史遗留问题

CSS学习方法

调试方法

W3C验证
使用VSCode看报错颜色
使用Webstorm看报错颜色（最靠谱）
使用开发者工具
Border调试法

步骤：
1. 给怀疑的元素加border
2. 如果border没出现，说明选择器初吻日
3. 如果border出现了，调整border位置

查阅资料

技术名词 +

MDN
CSS tricks
张鑫旭的博客

练习素材

PSD：

在 Freepik 搜索 PSD web
365 PSD 的UI套件

效果图：

dribbble.com 顶级设计师社区

用肉眼模仿

文档流

normal flow

什么是文档流

文档流指的是文档中元素的流动方向。

inline、 inline-block 元素从左到右

block 元素从上到下

高度的决定

inline 的高度由 line-height 间接决定，字体也可以改变

block 、 inline-block的高度由包住的元素决定，也可以设置height

overflow溢出

内容溢出容器的解决方法：

overflow:hidden

直接隐藏溢出的部分
overflow:scroll

显示滚动条
overflow:auto

在内容超出的时候才会显示滚动条

脱离文档流

如何脱离文档流：

float
position:absolute/fixed

脱离文档流后，所在的容器不再计算高度，父级容器如果没有设置高度会造成高度塌陷

盒模型

box-sizing

content-box

border-box

border-box 更好用

margin合并

只在上下方向存在，左右方向不存在

兄弟合并

<div class="parent">
  <div class="child1">第一个孩子</div>
  <div class="child2">第二个孩子</div>
</div>

.parent{
  border:1px solid red;
}
.child1{
  border:2px solid blue;
  margin-bottom:30px;
}
.child2{
  border:2px solid green;
  margin-top:30px;
}

第一个孩子的margin和第二个孩子的margin出现重叠现象

解决方法：

给子节点加上

display:inline-block;
width:100%;

首尾孩子和父元素合并

.parent{
  margin:15px;
  border:1px solid red;
  background:yellow;
}
.child{
  border:2px solid blue;
  margin:30px 0;
}

解决方法：

给父元素加： padding border
给父元素加：overflow:hidden
给父元素加： display:flex

基本单位

px 像素 (pixel)

em 相对于自身 font-size 的倍数

.div1{
  font-size:20px;
  background:yellow;
  width:3em;
}

此div的宽度为 3*20 = 60px

rem

根元素的字体大小
百分数
整数
vw

视窗宽度的1%
vh

视窗高度的1%

定位

一个div的分层

由上至下：

文字内容
浮动元素
块级子元素
border
background

position

值

static 默认值
relative

相对于自身移动
1. 用于位移 (top,left移动) 很少用
2. 给absolute做父元素
absolute
1. 相对于除了 static 定位以外的第一个父元素进行定位。

鼠标悬浮显示提示内容
如果不写 top/left 有些浏览器会混乱

fixed

相对于视口定位，尽量不要用，bug很多
stiky

粘滞定位，兼容性很差

在看到这个块的时候根据文档流定位，往上划走的时候就固定在视口顶部

层叠上下文

加了定位（非static）的元素处于最上层（z-index = 0)

只有处于同一层叠上下文的 z-index 才可以比较

如何创建层叠上下文

MDN 层叠上下文

文档根元素（<html>）；
z-index = 0
flex
opacity 不为 1
transform

CSS基础