CSS的不正交案例

1. 使用!important覆盖其它CSS属性

例：

/* 不正交的CSS */

h1 {
    color: red !important;
    font-size: 36px;
    line-height: 1.5;
}

在上面的例子中，color属性由于使用了!important，覆盖了其它样式规则。

这种做法的问题在于，如果我们要更改color属性的值，除非再次使用!important，否则将无法覆盖前面的样式规则。

2. 直接使用像素单位设置字体大小

例：

/* 不正交的CSS */

h1 {
    font-size: 36px;
    line-height: 1.5;
}

p {
    font-size: 16px;
    line-height: 1.5;
}

在上面的例子中，font-size属性使用了像素单位来设置字体大小。这种做法的问题在于，像素大小在不同设备上看起来可能不一样，而且在不同分辨率的屏幕上会出现问题。这就意味着，我们需要针对每个设备和分辨率调整字体大小，而这显然是不可行的。

为了解决这个问题，我们可以使用相对单位（如em或rem）来设置字体大小，以便在不同设备和分辨率上得到更一致的结果。

3. 使用绝对定位而不考虑相对定位

例：

/* 不正交的CSS */

.container {
    position: relative;
}
.item {
    position: absolute;
    top: 0;
    left: 0;
}

在上面的例子中，.container元素被设置为相对定位，然后.item元素被设置为绝对定位，并使用了top和left属性来将其视图位置定位在.container元素的左上角。

这种做法的问题在于，如果.container元素的大小发生变化，.item元素的视图位置将会改变。为了避免这种情况，我们应该尽可能使用相对定位，而不是绝对定位。