- 文档流Normal Flow
- 块、内联、内联块
- margin合并
- 两种盒模型(border-box较为符合人类思维)
- inline 元素从左到右, 到达最右边才会换行
- block 元素从上到下, 每一个都另起一行
- inline-block 从左到右, 当一行末尾不能放下一个元素的时候会另起一行
- inline 宽度为内部inline元素的和, 不能用width指定
- block 默认自动计算宽度, 可以使用width指定
- inline-block 结合前两者特点, 可用width
- inline 高度由line-height 间接确定, 跟height无关
- block 高度由内部文档流元素确定, 可以设height
- inline-block 跟block类似, 可以设置height
- inline元素不能含有block元素
- div的宽度是能有宽就多宽, 不一定是100%, 在设置div宽度的时候不要设置100%
- 元素脱离文档流
- float
- position: absolute / fixed
- 两种盒模型: content-box, border-box
- content-box的宽度只包含content
- border-box的宽度含border、margin、padding、content
- content-box 内容盒-内容就是盒子的边界
- border-box 边框盒-边框才是盒子的边界
- content-box: width = 内容宽度
- border-box: width = 内容宽度 padding border
- border-box 好用
- 同时指定padding、width、border就知道为什么了
- 父子margin合并
- 兄弟margin合并
- 父子合并用 padding / border挡住
- 父子合并 overflow: hidden 挡住
- 父子合并 display: flex
- 兄弟合并是符合预期的
- 兄弟合并可以用inline-block消除
- 颜色英语名称
- 颜色16进制代码
- rgb
- rgba a 代表透明度, 取值范围0-1, 1是完全不透明, 0是完全透明
- 透明简写 transparent
- hsl (0-360, 百分数, 百分数); 色相, 饱和度, 亮度