Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you except.

Perhaps you believe  that a certain selector should match an element, but noting happens, or a box is a different size than you excepted.

This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you to find out what is going on.

怎么进入DevTools

https://developer.mozilla.org/en-US/docs/Tools

然后调试你的html和css

Take a step back from the problem

Any coding problem can be frustrating, especially CSS problems because you often don't get an error message to search for online to help with finding a solution. If you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier.
任何编码问题都是令人沮丧的，尤其是CSS问题，因为你常常得不到一条错误信息来帮助你在线搜索解决方案。如果你感到沮丧，暂时远离这个问题——散散步，喝点饮料，和同事聊天，或者做点别的事情。有时候，当你停止思考问题的时候，解决方案就会神奇地出现，即使没有，当你感到精神振作的时候，处理它也会容易得多。

Browsers expect your CSS and HTML to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. If you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. In addition, two different browsers might cope with the problem in two different ways. A good first step therefore is to run your HTML and CSS through a validator, to pick up and fix any errors.
浏览器希望您的CSS和HTML能够正确编写，但是浏览器也非常宽容，即使您在标记或样式表中有错误，浏览器也会尽力显示您的网页。如果您的代码中有错误，浏览器需要猜测您的意思，它可能会做出与您的想法不同的决定。另外，两种不同的浏览器可能以两种不同的方式处理这个问题。因此，一个好的第一步是通过验证器运行HTML和CSS，以获取并修复任何错误。

注意浏览器兼容
比如：  shape-outside
https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside#browser_compatibility