css样式表书写注意与排错

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

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

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

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

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

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

正确做法：

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

建议：

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

个人犯过的问题：

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

通过控制台查看 ：

错误演示-控制台查看图1image.png

错误演示-控制台查看图2image.png

此处应该再写一下，命名的规则：

• 可以包含字母，数字，下划线(_)，短横线（-），但是不能以数字开头
• css中不建议用下划线，建议使用短横线（与js区分开）
• 区分大小写
• 最好有语义，使用英文，不要随意简写