语法
样式语法
选择器{
属性名：属性值；
/*注释*/
}
at语法
@charset "UTF-8";
@import url(2.css);
@media (min-width:100px) and (max-width:200px) {
语法一
}
- @charset必须放在第一行，charset是字符集，UTF-8是字符编码
基本概念
文档流
流动反向
- inline从左到右，到最右换行
- block从上到下，每一个都另起一行
- inline-block从左到右
宽度
- inline宽度为内部inline元素和，不能用width指定
- block默认自动算宽度，可用width指定
- inline-block结合前两者特点，可用width
高度
- inline高度由line-height间接决定
- block高度由内部文档流元素决定，可以设height
- inline-block和block类似
overflow溢出
auto、scroll、hidden、visible
脱离文档流
- float
- position:absolute/fixed
margin合并
哪些情况会合并
- 父子margin合并
- 兄弟margin合并
如何阻止合并
- 父子合并用padding/border挡住
- 父子合并用overflow：hidden挡住
- 父子合并用display：flex
- 兄弟合并是符合预期的
- 兄弟合并可以用inline-block消除
两种盒模型
- content-box width = 内容宽度
- border-box width = 内容宽度 + padding + border
CSS布局
兼容IE9， float；只兼容最新浏览器 ，grid；否则flex
float
- 子元素上加float：left和width，在父元素上加.clearfix
flex
父元素container样式
- display: flex
- flex-direction: row/column
- flex-wrap: wrap 折行
- just-content: center/space-between 主轴对齐
- align-items: center 次轴对齐
子元素items属性
- order
- flex-grow 如何长胖
- flex-shrink 如何变瘦
Grid
container
- display: grid
- grid-template-columns
items
- grid-column-start
- grid-column-end
- grid-template-areas
CSS定位
布局是屏幕平面上的，定位是垂直于屏幕上的
div分层
- 由上往下：内联子元素、浮动元素、块级子元素、border、background
- 浮动元素脱离文档流
position
- 写了absolute，一般都得补一个relative
- 写了absolute或fixed，一定要补top和left
relative
使用场景
- 用于做位移(少用)
- 用于给absolute元素做爸爸
配合z-index
- z-index：auto默认值，不创建新层叠上下文
- z-index： 0/1/2
- z=index: -1/-2
absolute
- 脱离原来的位置，另起一层，比如对话框的关闭按钮
- 是相对于祖先元素中第一个不是static元素定位的
- left： 100%
- left： 50%，加负margin
fixed
相对于视口定位
CSS动画
浏览器渲染过程
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两棵树合并成一颗渲染树
- layout布局
- Paint绘制
- Compose合成
transform
- 位移translate、缩放scale、旋转rotate、倾斜skew
- 一般配合transition过渡，inline元素不支持transform，需要先变成block
transition
- 作用：补充中间帧
- visibility：visible
- transition：属性名 时长 过渡方式 延迟
animation
- animation： 时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名
