css里面*{}和body{}区别

  css里面定义*{padding:0px;margin: 0px;}

  * 相当于选择器，代表html所有的元素，包括html标签、body标签等； {}大括号里面写入需要给定的属性和属性值即可。

  在css中一开始写入*{padding:0px;margin: 0px;}，表示初始化所有的标签元素(具有盒子模型)的内外边距均为0px.

 在css里面定义body{padding:0px;margin: 0px;}，body只是一个标签，如果它的子标签和该属性均具有继承性，才会继承这里所设置的属性；(比如：border、padding、margin属性不具有继承性；而color属性具有继承性等)

 关于css中哪些样式具有继承性，哪些不具有继承性，下面这位前辈已经给出了详细的说明：

      http://www.cnblogs.com/stephenykk/archive/2013/05/30/3109274.html

 <style type=""text/css">

     *{ color:red;} 
body{ color:blue;}

</style>

<body> 
       我是body~
      <p>我属于p标签</p> 
 </body> 

上面这段代码，在css中同时设置了*{}和body{}

只设置 *{ color:red;}  初始化所有标签元素的字体颜色(包括body标签下的字体)为红色； 则“  我是body~”，“我属于p标签”的字体均是红色；

只设置body{ color:blue;}，p标签作为body标签的子标签，具有继承性，p标签会继承离他最近的父标签的属性，则“  我是body~”，“我属于p标签”的字体均是蓝色；

同时设置*{ color:red;} ；body{ color:blue;}，根据css中的就近原则，“  我是body~”会继承离它最近的属性值，因此，是蓝色；

P 标签如果没有颜色设置就会继承body的蓝色，但是开始的时候 *已经给P标签设置了红色，因此“我属于p标签”的字体是红色。

posted @ 2017-06-05 10:20  柒玲珑  阅读(19490)  评论(0)    收藏  举报