常见的CSS问题及解决方法

一.特殊性和分类次序的问题。

1.将所有段落的北京颜色设置为白色且intro段落为橙色

   .content p {

     background-color:white;

   }

   .intro {

     background-color:orange;

   }

此做法仍然会看到intro段落为白色，因为段落的选择器的特殊性会更强。

解决方案：在intro段落开头添加内容元素的class.

  .content p {

     background-color:white;

   }

   content.intro {

     background-color:orange;

   }

2.外边距叠加的问题

div框设置10像素的外边距，段落设置20像素的外边距：

#box {

   margin: 10px;

   background-color: #d5d5d5;

}

p {

    margin: 20px;

    background-color: #d5d5d5;

}

此做法使得段落的20像素与div的10像素外边距叠加，形成了一个20像素的垂直外边距。

解决方案：在div周围添加内边距或边距即可。

#box {

   margin: 10px;

   padding: 1px;

   background-color: #d5d5d5;

}

p {

    margin: 20px;

    background-color: #d5d5d5;

}