网页版面出现错乱的情况有哪些？

检查元素如 div开始和结束标签是否正确
审查元素发现多了个标签，或者标签结构不是你写的结构，一定是什么原因，标签的父子关系搞错了，或者上面说的标签没有结束，或者嵌套层级出了什么问题
没有清除浮动带来的影响，父元素得不到子元素的高度。或者元素宽度的问题
没有保存代码，当然这个点取决于你用的什么开发工具，不过养成保存这个习惯是程序员必备素质。
等等

写的css代码不生效，或者开始代码是好的，后面代码出现了问题，好奇怪？

1.检查代码是否已经保存代码
2.css 代码的问题

把html注释<!—html注释 -->写在css注释里面去了，解决的办法可以统一使用快捷键加注释，ctri+/
css里面的代码有问题，少了大括号，多了大括号，不小心多打了几个字母或文字
选择器写错了
注意删东西的时候不要多删，或者残留，造成错误

遇到问题随便定义div，不知道怎么去解决，乱定义div
大错特错：不知道怎么解决问题，随便定义个标签，比如div，刷新看看有没效果
发现有时候解决了问题，也不知道为什么？这只是一个巧合，不知道还是不知道

正确做法：

一一排除问题，审查元素看看，在浏览器修改css属性排查问题
检查宽高，浮动是否有影响，属性值设置是否正确
设置元素边框或背景色来调试看看
单独写一个html文件，测试这个问题的存在，一定要搞明白为什么

建议：

一边写一边看效果，不要写很多了再去看，不然后期排错不容易。
出了问题一定要学会自己先通过控制台查看
控制台查看的点，样式是否生效，或者是权重不够，或者继承了某些属性，

个人犯过的问题：

项目中大板块用id来区分，但是写css样式的时候，本来是要给加一个类名，增减样式，但是两次（第一次还不是第一次写项目的时候，好像是我个人的第三个项目的时候，估计状态不好，第二次的时候也是在那个项目里，当时特想抽自己）都将类名加入id 的后面，此时一个是没有这个类名，而且id的值里面含有空格，通过控制台查看，完全没有样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不允许存在空格</title>
    <style>
        #demo {
            width: 200px;
            height: 220px;
            background-color: #cccccc;
        }
        #demo .test {
            width: 100px;
            height: 110px;
            background-color: #fff222;
        }
    </style>
</head>
<body>
    <!-- 错误演示代码 -->
    <!-- 此处加了一个空格-->
    <div id="demo box">
        <div class="test"></div>
    </div>
</body>
</html>

通过控制台查看：