CSS概念首先是由赖先生（Håkon W Lie）提出来的，目前用的最广泛的版本是CSS2.1，CSS特性很多，可以使用caniuse.com查询哪个特性适用于哪个浏览器。
常用语法：
选择器{属性名：属性值；}
@语法，如@charset "UTF-8";，注意必须以;号结尾
如何验证代码对错
- 使用W3C CSS validation 查询，但比较麻烦
- 使用VSCode ，错误会有颜色显示，但并不是很清晰
- 使用WebStorm ，错误会有清晰的颜色显示，但太占内存了，启动也慢
- 使用开发者工具看警告
border调试法
语法：border:1px solid red;
调试步骤
- 怀疑？＋border；
- 无——选择器/语法错；
- 有——边界是否符合预期；
- 解决——删除。
文档流
流动方向左到右，inline元素（内联元素），如span，默认合并，允许跨行；
流动方向上到下，block元素（块级元素），如div，不会合并，不会跨行；
使用display:block/inline；可以变成内联/块级元素。注意，不要在内联元素里＋块级元素。
内联元素，需注意
- 宽度为内部inline元素之和，不能用width指定
- 也不接受height，由line-height间接确定的
块级元素，需注意
- 宽度默认
width:auto，并非100%（永远不要写width:100%），能有多宽占多宽，也可以指定宽度 - 高度由内部文档流决定的，可以设置height，如果里面什么都没有则为0
inline-block，从左到右，但不会跨行分割显示
- 宽度默认把内容包起来
- 可指定高度
内容溢出，overflow:visible;
- visible，超出部分不管（默认）
- hidden，超出部分不给用户看
- scroll，超出部分可滚动显示（由滚动条，横竖都有），bug=哪怕无超出也会有滚动条
- auto，不超出时无滚动条，超出时才有滚动条可滚动，且只有一根有用的竖的滚动条，但若里面的内容过多，则会出现横的滚动条
- 注意：若有横向滚动条，内联元素默认只在第一屏内显示，后面留空
盒模型
截图来自饥人谷课件
- content-box，宽度只包含内容
- border-box，宽度包含border（内含：border、padding、content）
margin合并
- 兄弟间的合并，margin下和margin上合并
- 父子间的合并，第一个孩子的margin上、最后一个孩子的margin下和父亲合并
- 如何解决：设置padding/border的overflow:hidden
CSS布局
截图来自饥人谷课件
float布局
- 子元素＋ float:left和width
- 父元素＋ .clearfix
.clearfix:after{
content:'';
display:block;
clear:both;
}
- 一些经验
- 最后一个子元素不设width
- IE6/7存在双倍margin bug，例如
margin-left：10px;，会显示20px，解决如下：
（1）margin减半，-margin-left:5px;
（2）加上display:inline-block;
- 当发现有多余的东西时，
vertical-align:top; - 当发现border像素会干扰时，将border改为outline，
outline:1px solid red; - 居中可写，
margin:0 auto;，最好写为margin-left:auto; margin-right:auto;，这样不会覆盖margin-top，块级元素的宽度是固定的，左边auto的外边距和右边auto的外边距会使其居中 - 做平均布局时，在布局中加x图层，多出的右边距为负，值为每个间距的值（可理解为位移）
flex布局
截图来自饥人谷课件
- container，容器
- 变成container容器，
.container{display:flex;} - 主轴流动方向，
.container{flex-direction:row/column;}
3. 折行，
.container{flex-wrap:wrap/nowrap;}，折行，空间不够就折，不挤/不折行，挤在一起
- 主轴对齐方式，
.container{justify-content:flex-start/center/space-between;}
5. 次轴对齐，
.container{align-items:center;}
- item，项目
- order，改变显示顺序，为数字，从小到大显示（负，0，正）
- flex-grow，如何分配多余的空间，为数字，数字越大越“肥”，默认为0，不会变
- flex-shrink，当区域不够时，大家都缩小，控制谁缩得小，为数字，数字越大越缩得快，默认是1，大家一起缩，为0则是不管怎样都不缩
- align-self，可定制一个item
5. 经验
（1）想让两个item左右靠，右边item用margin-left:auto;即可
（2）第n个孩子的缩写（item为例）
.item:first-child
.item:nth-child(2)
.item:nth-child(3)
.item:last-child
grid布局
- container
- 成为container，
.container{display:grid/inline-grid;} - 定义列和行
截图来自饥人谷课件
- 设置item范围，代码显示区域如图所示
.item-a{
grid-column-start:2;
grid-column-end:five;
grid-row-start:row1-start;
grid-row-end:3;
}
图片改编来自饥人谷课件
- free space，巧记：份，fr
.container{grid-template-columns: 1fr 1fr 1fr;}，平分为三份.container{grid-template-columns: 1fr 50px 1fr 1fr;}，除50px外，平分为三份
- 分区，尽量看懂就行
截图来自饥人谷课件
- 空隙
截图来自饥人谷课件
CSS定位
- div三维立体，由低到高===background、border、块级元素、浮动元素、内容；其中
（1）后出现的内容会盖住前出现的内容；
（2）float:left;，会使其脱离文档流成为浮动元素，注意，左浮会盖住内容
- position属性
- static，默认的，一般不写，表明还在文档流中
- relative，还在文档流中，占据的位置不变，但显示的位置可做一定偏移。可配合z-index使用，默认为auto，auto为0，值越高层叠越高（负数、0、正数）
- absolute，绝对定位：写法，在父元素加
position:relative;，在子元素加position:absolut;，则子元素会以父元素为基准定位（想以谁定位就把relative加在谁上面）。注意：但并不是说absolute是相对于relative定位的，而是以离它最近的没有position:static;的祖先为定位的。
经验
（1）文字内容不换行：white-space:nowrap;；
（2）按钮上的悬浮显示框：
button span{display:none;}
button:hover span {display:inline-block;}
（3）写了absolute后要写top/left/right/botton中的两个
（4）善用left:100%;left:50%;负margin
（5）如何在检查代码中展示hover：选中代码，点:hov，再点hover
- fixed，可以让其相对于示口（用户能看到的所有画面）一直在一个相对位置上
- sticky，粘滞定位
层叠上下文
用 z-index=负数/0/正数 来定位，数字越大越高
- 每个层叠上下文就是一个新的小世界，同一个世界的z-index才能比较
- 默认z-index:auto，不会创建一个小世界，为0时会创建
- opacity不等于1时会创建
- 处于flex里会创建
- 有transform时也会创建
CSS动画
帧：静止画面；播放：如每秒30张。
浏览器渲染过程：(1-3一般用js)
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两树合成一颗渲染树（render tree，相同部分合并）
- layout布局（确定位置）
- paint绘制（确定样子）
- composite合成（拍平成一层）
渲染一定六步全走完吗？no
- 全走，4.5.6.（如div、remove（））
- 跳过layout，5.6.（如改变背景颜色）
- 跳过layout、paint，6.（如改变transform）
CSS动画的两种做法
- transition过渡（给开始状态、结尾状态，中间过渡过程自行补充），语法为 transition:属性名 时长 过渡方式 延迟；
transition:left 200ms linear 100ms; - animation过渡,多状态呈现
@keyframes xxx{
0%{transform:none;}
60%{transform:translateX(200px);}
100%{transform:translateX(200px) translateY(200px);}
}
