CSS全局声明*与body的区别

  通常在写CSS前,为了保证兼容性及展示效果的一致,先会清除浏览器默认样式。此时有两种用法比较常用:1、*{};  2、body{};

  之前我比较偏好于用*{},比较便于把控样式的设置。一直也没试过body{},所以对body不太了解。今天简单一试,发现了两者的区别。

  简单讲就是——*{}将更改应用于HTML结构中的所有元素,而body{}仅是更改了body层的默认属性。从继承角度讲的话,*{}可以算做是应用于元素本身,而body{}则是继承。

 

  举个栗子:

       <h1>标签默认的字体大小为"font-size: 2em;",如果用*{font-size:20px;}声明全局样式,则<h1>标签的字体大小会更改为"font-size: 20px;";而如果用body{font-size:20px;}声明全局样式,则<h1>标签的字体大小仍为"font-size:2em;",只是计算由原来浏览器的默认字体大小16px × 2 = 32px更改为20px × 2 = 40px;

 

  总结:*{}声明将应用body以及body下的所有元素的相应属性值——body,body * {};

     body{}声明仅作用于body层,仅影响body下所有元素的相应属性为继承性质的值——body {};

posted @ 2018-08-21 15:55  阿克琉斯之踵  阅读(1151)  评论(0编辑  收藏  举报