What is the difference between * and body in CSS? The most complete and detailed explanation-CSS Tutorial-php.cn

What is the difference between * and body in CSS? The most complete and detailed explanation

云罗郡主

Release： 2018-10-27 11:28:20

forward

5547 people have browsed it

The content of this article is about what is the difference between * and body in CSS? The most complete and detailed explanation, which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is the difference between * and body in CSS? The most complete and detailed explanation

Before introducing them, we should first know what roles these two symbols play in CSS files. In the CSS file * is a wildcard selector, which can select all elements in the document, which is to say a pass-through selector. Body is an ordinary type selector that can only select one element, body. The reason why everyone feels that * and body selectors sometimes have the same effect is mainly because body is the parent element of most layout elements. If the CSS properties of the elements are inherited, then the effect of the two is indeed Same. For example:

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

Copy after login

The above two codes have exactly the same effect, because the font-size attribute is inherited from the right. But everyone still needs to understand that their principles are different. The * selector does select each element and sets their font size to 12px, while the body sets the font size to 12px through inheritance.

There is such a code at the beginning of many CSS pages:

*{margin:0;padding:0}

Copy after login

Because many elements have default inner margins or outer margins, such as body, ul, p and title elements h1- h6 etc. Using the above code can easily clear the margins and padding of all elements, but it will also cause problems. For example:

<!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>

Copy after login

The above code may cause the text entered in the text box to be displayed in the upper left corner in some browsers, but not all browsers are like this. It is recommended to use the following method to define styles uniformly:

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

Copy after login

The above is the most complete and detailed introduction to what is the difference between * and body in CSS? I hope everyone can gain something, moreCSS video tutorialPlease pay attention to the PHP Chinese website.

The above is the detailed content of What is the difference between * and body in CSS? The most complete and detailed explanation. For more information, please follow other related articles on the PHP Chinese website!