常见的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;

}

猜你喜欢

转载自1445060302.iteye.com/blog/2418669