CSS中*和body有什么区别？

来源：互联网发布：闲鱼网淘宝编辑：程序博客网时间：2024/05/01 10:21

http://www.softwhy.com/forum.php?mod=viewthread&tid=4758

CSS中*和body有什么区别:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
在介绍它们两个我们首先应该知道这两个符号在CSS文件中充当的是什么角色。在CSS文件中*是通配符选择器，它可以选择文档中所有的元素，也就是说是一个通杀选择器。body是一个普通的类型选择器，只能够选中body这么一个元素。而之所大家会感觉到*和body选择器有时候作用是相同的，主要是因为body是绝大多数布局元素的父元素，如果元素的CSS属性居有继承性的话，那么两者的效果确实一样。例如:

[HTML] 纯文本查看复制代码运行代码

?
1
2
body{font-size:12px;}
*{font-szie:12px;}

以上两个代码的作用是完全一样的，因为font-size是居右继承性的。但是大家还是要明白它们的原理是不一样的，*选择器确实是选择了每一个元素并且把它们的字体大小设置为12px，body则是通过继承将字体设置为12px的。
建议:
在很多CSS页面的开头都有这么一句代码:

[HTML] 纯文本查看复制代码运行代码

?
1
2
3
4
* { 
        margin:0;
        padding:0
   }

因为很多元素都有默认的内边距或者外边距，例如body、ul、p和标题元素h1-h6等。使用以上代码可以很轻松的清除所有元素的外边距和内边距，但是也会带来问题。例如:

[HTML] 纯文本查看复制代码运行代码

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> 
<head>
<title>蚂蚁部落</title>
<styletype="text/css">
    *{
        margin:0px;
        padding:0px;
     }
    input
    {
        height:40px;
    }
</style>
</head>
<body>
    <inputtype="text"name="mytest"/> 
</body>
</html>

说明:代码经过本站测试，复制黏贴即可运行。
以上代码可能会造成在一些浏览器中文本框输入的文字显示在左上角，并不是所以浏览器都这样。建议还是使用以下方式来统一定义样式：

[HTML] 纯文本查看复制代码运行代码

?
1
2
3
4
body,ul,h1,h2,h3,h4,h5,h6,form,dl,p
{ 
       样式代码
}

1 0