纳粹:个人css/wxss纠错思路分享

每当编写大量的样式代码时，由于css本身的级联特性，我们都在观察显示的效果。由于某些原因，可能与之前的假设有一些差异。我们应该从那些地方找出这些问题的根源。在这里，我将谈谈我的想法。

但是，在此之前，您需要对css属性有足够的了解，在显示其效果时，可能会因环境不同而显示不同的结果。

让我们从我的角度来谈谈思维方式。

在真正纠错之前，请确保你写的风格文档没有粗心的错误。为了保证以上观点，我们先来看看错误显示效果现在是什么样的状态，为什么会这样，支持这种风格显示的结构是否有问题，或者这种结构是否与你预期的效果结构不同。然后，在通过一些调试工具观察他的盒子模型、相关渲染数据以及我们常用的时候，一些方法带来的问题也没有避免。仔细梳理以上之后，最后检查一下风格相关属性的使用来实现这种展示效果，确保你的实现思路和自己的思路一致。什么是无意的错误？也就是说，在编写大量样式时，可能会键入一些没有正确解析的符号，或者手动错误省略一些常规符号，这可能会导致无法解析和显示它们。

每当有显示的样式时，发生的事情并不是我们所期望的。确认以上正确后，我们先来看看错误的效果，想象一下可能导致这些效果的原因——是不是因为级别问题——是不是因为一些常用的方法发生的一些不寻常的情况没有避免，比如溢出：在需要浮动的地方设置隐藏，需要行内块和溢出显示之间的间隙，有些样式设置会在级别发生变化，还有一些。-对于渲染的盒子模型和相关的属性样式数据，这里我用chrome devtools的截图展示给大家。可以看到他的结构，某个节点计算出来的额头样式，以及当前浏览器计算出来的样式，可以直观的看到当前错误显示与预期的差异，从而找出问题的根源。还要看右上角的区块，非常直观的看到前箱模型的数据。

但凡有展示的风格，出现的都不是我们期待的。最后是针对我们想象的预期效果，一步一步的分析，一步一步的比较，要达到的效果，需要哪些风格，使用哪些技巧。

最后，由于css是一个级联样式表，由于某些选择器的优先级，可能会有一些样式冲突的原因。在这个地方，尽量不要用！重要的解决方法，最好在编写完整的样式表之前仔细考虑如何命名、构建组件、分离状态等等。然后，为了提高效率，避免不必要的麻烦，有必要尝试css预处理器，比如少sass等等。

这些只是个人观点。有更好的方法和想法。请分享和谈论它们。现身