我推荐题主的学习方法：善用调试工具(组图)

优秀的程序员web前端培训分享如何学习CSS？我为该主题推荐的学习方法是：善用调试工具。

使用谷歌浏览器调试，看不懂属性时可以直接在浏览器中调整值

css写的时候，由于选择器的权重，经常会出现样式覆盖的问题

如果您的选择器编写正确并且被划掉。

应该是体重不足的缘故。

下面是看起来很复杂的加权规则。

加权规则：HTML标签（类型选择器）的权重为1，class的权重为10，id的权重为100。

权重表示为：0,0,0,0；

类型选择器权重为：0, 0, 0, 1

类选择器的权重为：0,0,1,0

id选择器的权重为：0, 1, 0, 0

属性选择器的权重为：0, 0, 1, 0

伪类选择器的权重为：0, 0, 1, 0

伪元素选择器权重为：0, 0, 0, 1

内联样式的权重为：1、0、0、0

注意：如果权重相同，则以下样式生效；

权重值的计算规则略复杂css选择器中大于号，不再详述。

您可以简单地将这些权重相加为小数，这可以解决大多数问题

结果有问题时，升级到100base，例如

#a1 .a2 .a3 .a4 .a5

#a1 #a2 .a5

以上两个选择器哪个权重更大？

100 + 10 + 10 + 10 + 10

100 + 100 + 10

答案显然是第二个。

此外，还有一些常见的新手，

它可能会困扰你很长时间，但它是 P 的一种 CSS 问题。

1、比如浮动引起的问题

当父元素的高度没有设置时css选择器中大于号，子元素的浮动会导致父元素的高度塌陷。

如何处理？

固定父元素的高度，或者给父元素添加overflow:hidden；

2、关于定位的问题

元素使用绝对定位位置：absolute

但是您的参考框架没有添加 position: relative

导致元素（由于未找到参考框架）相对于整个页面定位

3、边框和填充问题

给元素添加边框和内边距会影响盒子的大小

这一点不容忽视。

对于初学者，建议使用以下代码重置CSS

* {

边距：0；填充：0

}

4、边距问题

margin: auto 只能实现元素左右居中，不能实现上下居中

5、注意块元素和内联元素的区别

默认情况下，块元素是 100% 宽的，并且会单独在一行上。

可以设置宽度和高度

和内联元素，比如，

不能设置宽高，从左到右排列

6、Img 标签比较特殊

图片的特征与文字的特征非常相似

可以将图片理解为特殊的文字内容

7、选择器的含义

.page .con 和 .page.con 和 .page>.con 有不同的含义

.page>.con 大于号表示必须是子元素

.page.con 中没有空间可以同时拥有两个类

.page 和 .con 之间有一个空格，表示所有后代都包含子元素