如何知道哪些浏览器支持哪些特性：使用caniuse.com

CSS语法

语法一：样式语法

选择器{
  属性名:s属性值;
  /*注释*/
}

注意事项

1.符号必须是英文
2.区分大小写
3.没有//注释
4.最后一个分号可以省略，但是不建议省略
5.任何地方写错，不会有报错，浏览器直接忽略

语法二：at语法

@charst"UTF-8" //声明字符编码
@import url (2.css)// 导入额外的css文件
@media (min-width: 100px) and (max-width: 200px) {
  语法一
} //媒体查询

注意事项

1.@charset 必须放在第一行
2.前两个 at 语法必须以分号 ; 结尾
3.charset 是字符集的意思，但 UTF-8 是字符编码 encoding，这是历史遗留问题

如何调试CSS（Border调试法）

1. 怀疑某个元素有问题
2. 就给这个元素加 border
3. border 没出现，说明选择器错了或者语法错了
4. border 出现了，看看边界是否符合预期
5. bug 解决了才可以把 border 删掉 border调试法：

注：CSS规范搜索CSS spec

文档流

流动方向

1. inline（内联） 元素从左到右，到达最右边才会换行
2. block（块） 元素从上到下，每一个都另起一行
3. inline-block（内联块） 也是从左到右,但是到达最后不会把自己分成两块

宽度

1. inline 宽度为内部 inline 元素的和，不能用 width 指定
2. block 默认自动计算宽度（不是100%），可用 width 指定
3. inline-block 结合前两者特点，可用 width

高度

1. inline 高度由 line-height 间接确定，跟 height 无关
2. block 高度由内部文档流元素决定，可以设 height
3. inline-block 跟 block 类似，可以设置 height

overflow 溢出

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

1. auto 是灵活设置
2. scroll 是永远显示
3. hidden 是直接隐藏溢出部分
4. visible 是直接显示溢出部分
5. overflow可以分为 overflow-x 和 overflow-y auto示例

脱离文档流

哪些元素脱离文档流

1. float
2. position: absolute / fixed

position: absolute示例

---

盒模型

两种分别是:

• content-box 内容盒 - 内容就是盒子的边界
• border-box 边框盒 - 边框才是盒子的边界 公式

• content-box width = 内容宽度
• border-box width = 内容宽度 + padding + border

盒模型是什么

css盒模型分两种，一种是content-box，一种是border-box,他俩的区别是content-box宽度只包含content，border-box的宽度包含到border，分别是border、padding和content。border-box更好用

margin合并

哪些情况会合并

• 父子 margin 合并
• 兄弟 margin 合并

如何阻止合并

• 父子合并用 padding / border 挡住
• 父子合并用 overflow: hidden 挡住
• 父子合并用 display: flex，不知道为什么
• 兄弟合并是符合预期的
• 兄弟合并可以用 inline-block 消除
• 总之要一条一条死记
• 而且 CSS 的属性逐年增多，每年都可能有新的

基本单位

长度单位

1.px 像素
2.em 相对于自身 font-size 的倍数
3.百分数
4.整数
5.rem：等你把 em 滚瓜烂熟了再问 rem
6.vw 和 vh
7.其他长度单位都用得很少，不用了解

颜色

1.十六进制 #FF6600 或者 #F60
2.RGBA 颜色 rgb(0,0,0) 或者 rgba(0,0,0,1)
3.hsl 颜色 hsl(360,100%,100%)