每当写完大量的样式代码的时候因为css本身的层叠性在观察其显示出的效果SEO关键词在观察其显示出的效果因为某些原因可能出现了与之前设想有些出入的地方该从那些地方如说去查找下这些问题来源。在这里我说说自己的想法思路。
不过在这之前你需要对css属性有些足够上的认识以及在显示其效果的时候可能会出因为不同环境下导致的不同的样子的结果显示。
下面就我的思路来说说是怎样思考的方式的。
在真正纠错之前请确保你写的东西那些样式文档上面没有一些疏忽上的错误。
确保了上一点先去看看现在的错误显示效果是个什么样的状态为什么会是这样的支持这个样式显示的结构是不是有些问题抑或是这个结构与你自己预期的效果结构有出入
然后在通过一些调试工具观察他的盒子模型以及相关的渲染数据和我们经常使用的时候因为某些方法而出现的问题并没有做回避处理。
以上仔细梳理之后最后针对实现该显示效果的样式相关属性的使用核对下确保自己的实现思路跟自己的想法是一直的。
什么是疏忽上的出错误？
这个就是在编写大量的样式的额时候可能会因为手误将一些不是正确解析的符号敲进去或者是漏掉了某些规则符号导致无法解析显示出来。
每当有显示的样式的时候出现的不是我们的预期
在确认上面无误的 之后我们先看下错误的效果设想下可能导致这些效果的原因
- 是不是因为层级的问题
- 是不是因为某些常用的方法顺带出现的一些异常情况没有回避比如需要清除浮动、inline-block之间有空隙、需要溢出显示的地方设置了overflow：hidden、某些样式设置会出现层级上的变化还有一些设定必须要有其他的样式设置才有效果等等。
- 针对渲染出来的盒子模型以及相关的属性样式数据这里我用chrome devtools截图给大家看看
可以看到这里可以看到他的结构某个节点计算出来的额样式和当前浏览器解析后计算出来样式都可以很直观的看出当前错误的显示跟预期的差别从而找出问题的根源。还又右上角那个块很直观的看出前盒子模型的数据。
每当有显示的样式的时候出现的不是我们的预期
最后就是针对我们设想的预期效果网站优化出现的不是我们的预期
最后就是针对我们设想的预期效果一步一步分析逐步对照实现的效果需要哪些样式要用到那些手法
最后要说的就是因为css本来就是层叠样式表可能有些原因是因为某些选择器的优先级问题导致出现了样式上的冲突。在这个地方尽量不要用！important的方式去解决最好是在编写一个完整的样式样式表前好好的思考下如何命名构建组件分离状态等等。然后要想提高效率免去不必要的麻烦试用下css预处理器也很有必要的比如less sass等等。
以上仅仅是个人意见有更好的方法思路也请分享出来谈论。献丑