CSS中*和body有什么区别?最全详解-css教程-PHP中文网

CSS中*和body有什么区别?最全详解

云罗郡主

发布： 2018-10-27 11:28:20

转载

5482 人浏览过

本篇文章给大家带来的内容是关于CSS中*和body有什么区别?最全详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

微信截图_20181027112602.png

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

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

登录后复制

以上两个代码的作用是完全一样的，因为font-size属性是居右继承性的。但是大家还是要明白它们的原理是不一样的，*选择器确实是选择了每一个元素并且把它们的字体大小设置为12px，body则是通过继承将字体设置为12px的。

在很多CSS页面的开头都有这么一句代码：

*{margin:0;padding:0}

登录后复制

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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.lvyestudy.com/" />
<title>php中文网</title>
<style type="text/css">
*{margin:0px;padding:0px;}
input{height:40px;}
</style>
</head>
<body>
<input type="text" name="mytest" />
</body>
</html>

登录后复制

以上代码可能会造成在一些浏览器中文本框输入的文字显示在左上角，并不是所以浏览器都这样。建议还是使用以下方式来统一定义样式：

body,ul,h1,h2,h3,h4,h5,h6,form,dl,p{
样式代码
}

登录后复制

以上就是对CSS中*和body有什么区别?最全详解的全部介绍，希望大家可以有所收获，更多CSS视频教程请关注PHP中文网。

以上是CSS中*和body有什么区别?最全详解的详细内容。更多信息请关注PHP中文网其他相关文章！

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程

CSS中*和body有什么区别?最全详解