css基础
文档流
- 流动方向
- inline 从左到右，到达最右边才会换行
- block 从上到下，每一个都另起一行
- inline-block 从左到右
- 宽度
- inline 宽度为内部 inline 元素的和，不能用 width 指定
- block 默认自动计算宽度 auto ，可用 width 指定
- inline-block 结合前两者特点，可用 width
- 高度
- inline 高度由行高 line-height 间接确定，跟 height 无关
- block 高度由文档流元素决定，可设 height
- inline-block 跟 block 类似，可设置 height
overflow 溢出
当内容大于容器
- 等内容的款年度或高度大于容器的，会溢出
- 可用 overflow 来设置是否显示滚动条
- auto 是灵活设置
- scroll 是永远设置
- hidden 是直接隐藏移除部分
- visible 是直接显示溢出部分
- overflow 可分为 overflow-x 和 overflow-y 很少用
脱离文档流
block 高度由内部文档流元素决定，可以设 height，这句话的意思是不是说，有些元素可以不在文档流中
- position: absolute/fixed;
- float
盒模型
- content-box 内容就是盒子的边界
- content-box width = 内容宽度
- border-box 边框才是盒子的边界 （推荐使用）
- border-box width = 内容宽度 + padding + border
margin 合并
- 父子。兄弟之间会合并，只有上下合并
- 阻止合并：
- 父子合并用 padding / border 挡住
- 父子合并用 overflow：hidden 挡住
- 父子合并用 display: flex
- 兄弟合并是符合预期的，可以用 display: inline-block 消除