css调试
Border调试法
步骤
- 怀疑某个元素有问题
- 就给这个元素加border
- border没出现？说明选择器错了或者语法错了
- border出现了？看看边界是否符合预期
- bug解决了才把border删掉
CSS的border调试法相当于JS的log调试法
避免低级错误
- 选择器拼写错误
- 属性名拼写错误
- 属性值拼写错误
- 大小写错误
- 没写分号
- 中文冒号
- 没写反花括号
- 没加单位
在哪查资料
网站推荐
- Google搜索 关键词 + MDN
- CSS trcks (英文)
- 张鑫旭的博客
在哪搜练习素材
PDS
文档流
流动方向
- inline：元素从左到右，塞满换行，会割裂元素
- block：元素从上到下，每个都占一行
- inline-block：从左到右，放不下换行，不会割裂元素
宽度
- inline：宽度为内部inline元素的和，width改不了
- block：默认能多宽就撑多宽，width可以修改
- inline-block：结合前两者特点，width可以改
高度
- inline：高度由line-height间接确定,跟height无关
- block：高度由内部文档流元素决定,可以设height
- inline-block：跟block类似，可以设置height
脱离文档流
哪些元素脱离文档流
- float
- position: absolute / fixed
