CSS基础今天学习了css基础知识，结合维基百科和mdn，写下此博客跟大家分享，如有错误之处，欢迎指正（没有奖励😝）。

今天学习了css基础知识，结合维基百科和mdn，写下此博客跟大家分享，如有错误之处，欢迎指正（没有奖励😝）。

css：中文为层叠样式表（又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。当前使用最广泛的版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。1994年，哈肯·维姆·莱提出了CSS的最初建议。

层叠:

样式层叠：可以多次对同一选择器进行样式声明。
选择器层叠：可以用不同选择器对同一个元素进行样式声明。
文件层叠：可以用多个文件进行层叠。

note：这些特性使得css极度灵活，也为css被吐槽留下了隐患。

目前CSS2.1为使用最广泛的版本（IE支持），CSS3为最新版本（IE8部分支持）。

使用caniuse.com检查各种浏览器支持哪些特性。

体系化学习

怎样学习一门语言：

语法（怎样写代码）
- 语法1：样式语法
```
选择器{
  属性名:属性值;
  /*注释*/
 }
```
Notes：
1. 所有符号都是英文符号。
2. 区分大小写。
3. 没有//注释
4. 最后一个分号可省略，但建议不要省略。
5. 任何一个地方写错了，都不会报错，浏览器会忽略。
6. 若想知道写错，
- 语法2:@语法
```
 @charset "UTF-8";
 @import url(css路径);
 @media (min-width: 100px)and (max-width:200px){
    语法1
    }
```
Notes:
1. @charset必须放在第一行。
2. 前两个@语法都必须以;结尾。
3. @media语法以后在讲。
4. charset是字符集的意思，但UTF-8是字符编码encoding，为历史遗留问题。

调试（查找代码错误）

jigsaw.w3.org/css-validat…
vscode颜色报错，位置不大准。
WebStorm看颜色，位置准确。

Chrome开发者工具看警告。

 1. 找到标签
 2. 是否有选择器
 3. 样式是否被划掉
 4. 样式是否被警告

Border调试法：

1. 找到怀疑元素
2. 给该元素加一个border
3. 若border没生效，说明选择器错了或语法错了
4. 若border生效了，看看边界是否符合预期
5. bug解决了删除border

note：

CSS的border调试法相当于JS的log调试法。

查资料
1. mdn
2. css tricks
3. 张鑫旭博客
标准制定者w3c
1. all css specifications
2. css2.1中文版

如何学

抄文档，抄老师
在自己电脑上运行
加入自己的想法，重新运行并调试。

文档流

流动方向
- inline元素从左到右，到达最右边才会换行，字节会断开。
- block元素从上到下，每一个都另起一行。
- inline-block元素也是从左到右，字节不会断开。
宽度
- inline元素默认宽度为内部inline元素的和，inline元素内不能存在block元素，不能用width指定，白写。
- block元素默认自动计算宽度，不是也不能写width:100%;，会出bug，一般width用px或者em指定。
- inline-block元素结合两者特点，宽度默认跟inline元素一样，但可用width指定。
高度
- inline元素高度由line-height间接决定，与height，padding 无关。
- block元素高度由内部文档流元素决定，可以设置height。
- inline-block元素跟block元素基本类似，可以设置height。
overflow

overflow还可设置overflow-x和overflow-y。
- visibl：默认值。内容不会被剪裁，可以呈现在元素框之外。
- hidden：内容将被剪裁以适合填充框。不提供滚动条。
- scroll：内容将被剪裁以适合填充框。浏览器显示滚动条，无论是否实际剪切了任何内容。（这可以防止滚动条在内容更改时出现或消失。）打印机仍可能打印溢出的内容。
- auto：如果内容适合填充框内部，则看起来与可见内容相同。如果内容溢出，桌面浏览器会提供滚动条。
脱离文档流

或

效果为：