自学到后面发现前面很多知识都忘了，现在重新回顾一下相关知识
一、CSS历史
- CSS应用最广泛的版本是2.1
- 在
caniuse.com网站中可以查询到哪些布局或技术、特性等在不同浏览器的兼容性如何。 - CSS是李博士好基友赖先生发明的
二、如何体系化学习CSS
- 学习语法
- 有错后去调试，反复调试。
- 不知道错在哪里就需要去查资料(其实就是抄代码)
- 看一下标准制定者(权威)
- 做的时候，大部分都是重复2,3两个步骤，写比看更重要。
三、border调试大法
- 先在css样式的最上面一行写上border: 1px solid blue; 简单的样式，看一下是不是正确显示。如果正确显示就说明选择器没有问题。
- border语句依次在下面代码的后面加上，如果border失效，那么证明就是border前面的语句有问题。
查资料
- 使用Google搜索 MDN + 关键词
- CSS trick
- 张鑫旭的博客
怎么找素材练习？
- PSD: Freepik 搜索 PSD WEB
- 365PSD里的UI套件，是中文的。
- dribbble.com 是效果图，不提供下载。只能靠肉眼去模仿了。
文档流(主要学习三种)
- inline：从左到右排列，从上到下排列。当最后一个装不下的时候会出现头在上一行，尾部在下一行的情况。
- block：从上到下排列，每一行都只有一个block元素。
- inline-block：跟inline排列顺序类似，但不会出现最后一个装不下的时候会出现头在上一行，尾部在下一行的情况，空间不够就会直接在下一行放。同时inline-block和inline的区别还有inline-block可以设置宽高，inline元素不可以。
宽度(width)
- inline元素的宽度是由里面的内联元素内容的宽度决定的，不能通过width这些元素设置，高度同理(注意：inline元素里面不能有block元素！！！)。
- block元素默认宽度是autu(最大宽度是百分之百),不是宽度为百分之百，不是同一个概念。(注重：永远不要写width: 100%，容易出现bug)
- inline-block元素默认宽度是元素内容宽度，但可以单独设置宽度。
高度(height)
- inline高度由line-height间接决定，与height无关。
- block默认高度由内部文档流元素决定，但是可以设置height。
- inline-block和block类似，也可以设置height。
overflow(溢出)
- block元素的宽高无法包住内部元素时，会出现溢出的情况。
- overflow: visible; 显示溢出部分，也是默认的效果。
- overflow: hidden; 隐藏溢出的部分
- overflow: scroll; 设置一个滚动条，用户可以通过滚动条来查看溢出的内容。但scroll有一个问题就是无论是否溢出都会出现滚动条，导致页面十分丑陋。
- overflow: autu; 自动检测是否溢出，如果溢出就显示滚动条，不溢出就不显示滚动条。
- 出现左右滚动条时，元素的宽度只会显示第一屏的宽度，然后往下排列，不会继续往右排列。
脱离文档流
- 通过设置元素的float和position: absolute/fixed; 等属性会让元素脱离文档流。
两种盒子模型
- content-box 内容盒-内容才是盒子的边界
- border-box 边框盒-边框才是盒子的边界。
- content-box width = 内容宽度
- border-box width = 内容宽度 + padding + border
- border-box 好用，更符合人类思维。
margin 合并
- 哪些情况会合并？
- 父亲和第一个儿子或者父亲和最后一个儿子margin合并
- 兄弟上下margin合并
- 阻止合并的方法
- 父子合并用 padding/border 挡住
- 父子合并用 overflow: hidden;
- 父子合并用 display: flex;
- 兄弟合并一般情况下是符合预期的
- 兄弟合并可以用inline-block消除
- 一条一条死记，CSS很多东西都是没理由变化的，很奇怪
- CSS属性逐年增多，可以查看一下每年新的东西，看一下有没有更好的解决方案。
