CSS基础概念

一、CSS语法

语法一

选择器 {
  属性名: 属性值;
  /*此处为注释*/
}

注意事项

• 区分大小写
• 最后一个分号可以省略，但不建议

语法二

@charset "UTF-8";
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px) {
  语法一
}

注意事项

• @charset 必须放第一行
• charset 是字符集的意思，但UTF-8是字符编码encoding，历史遗留问题。

二、如何调试css？

方法一：

• VSCode看颜色
• WebStorm看颜色（ 推荐）
• W3C验证器
• 开发者工具

如何使用开发者工具？

0. 找到目标标签
1. 看它是否有选择器
2. 观察样式是否被划掉或者有警告

方法二：Border调试法

0. 怀疑某个元素有问题，则给这个元素加border（加在内容首行）
1. border没出现，则选择器有问题或者语法错了
2. border出现了，则看是否符合预期
3. 解决bug后删除border。

border调试发相当于js的log调试法

三、基本概念

理解几个重要的概念

1.文档流Nomal Flow

①流动方向

• inline 元素从左到右，到右边会换行显示
• block 元素每个占一行，从下倒下排列
• inline-block 元素从左到右，但是到右边不会换行显示（不会裂开）

②三种元素的宽高

0. inline 元素无初始宽度，宽度随内容改变；有初始高度，高度可以用 line-height 该表。

   inline 不用 width 和 height 制定宽高

1. block 有初始宽度，无初始高度，高度主要由内部文档流元素决定。

   可以指定宽高。（有个position：absolute操作）

2. inline-block 无初始宽高，宽随内容变，高随文档流变。

   可以指定宽高。

overflow 溢出

auto、scroll、hidden、visible

脱离文档流

float、position：absolute / fixed

2.盒模型

①content-box

content-box width = 内容宽度

②border-box

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

border-box好用

js.jirengu.com/vexaketove/…

3.margin合并

仔细体会border、margin 、padding、box-sizing、width的作用。

当父div没有设置border、padding、overflow时，父子div的 上下border会重叠，margin会合并。

画彩虹

js.jirengu.com/tolevutixu/…

其他

0. 使用 caniuse.com
1. span.ib{第$个inline-block元素}*6