体系化学习
- 学一门语言必须学会什么
1.语法（怎么写代码）
2.如何调试（怎么知道自己的代码写错了）
3.在哪查资料（就是为了抄代码）
4.标准制定者是谁
- 如何学
1.copy - 抄文档、抄老师
2.Run - 放在自己的机器上运行成功
3.Modify - 加入一点自己的想法，然后重新运行。
CSS文档搜索（css spec）
css语法
- 语法一：样式语法
选择器{
属性名：属性值； /注释/
}
- 注意事项
- 所有符号都是英文符号，如果写错了，浏览器会警告
- 区分大小写，a和A是不同的东西
- 没有//注释
- 最后一个分号可以省略，但是不建议省略
- 任何地方写错了，都不会报错，浏览器会直接忽略
- 语法二：at语法
@charset "UTF-8";
@import url(2.css);
@media (min-width: 100px) and (max-width: 200px ){
语法一
}
- 注意事项
- @chartset 必须放在第一行
- 前两个at 语法必须以分号；结尾
- @media 语法会单独教学
- charset 是字符集的意思，但UFT-8 是字符编码encodin ，这是历史遗留问题
- border调试法
- 步骤
- 怀疑某个元素有问题
- 就给这个元素加个border
- border没出现？说明选择器错了或者语法错了
- border出现了？ 看看边界是否符合预期
- bug解决了才可以把border删掉
- 记住 CSS的border 调试法 就相当于js的log调试法
文档流
- 流动方向
- inline元素从左到右，到达最右边才会换行（到达最后会拆分）
- block元素从上到下，每一个都另起一行
- line-block也是从左到右(到达最后的时候不会把自己拆分，一定是一个完整的块元素）
- 宽度
- inline宽度为内部inline元素的和，不能用width指定(行内元素不能设置宽度）
- block 默认自动计算宽度，可用width指定(默认auto宽度）
- inline-block 结合前两者特点，可用width（默认和inline一样，但是可以设置宽度）
- 高度
- inline 高度由line-height间接确定，跟height无关
- block高度由内部文档流元素决定，可以设height
- inline-block 跟block类似，可以设置height
css里面尽量不要写 style="width:100%"因为这样写的话宽度占到100后还要加上2像素border宽度。
- overflow文字溢出部分 等内容的宽度或高度大于容器的，会溢出
- 可用overflow来设置是否显示滚动条
- visible 默认样式
- hidden 超出部分隐藏
- scroll 滚动条(不超出也有)是永远显示
- auto 自动，灵活设置
盒模型
- 请介绍一下盒模型？
- 盒模型一共分两种，一种是content-box，另一种是border-box；两种区别是，content-box的宽度只包含内容content，border-box包含到border分别是border内边距和内容。
公式：
content-box width：内容宽度
border-box width：内容宽度+padding+border
