Quelle est la différence entre * et body en CSS ? L'explication la plus complète et la plus détaillée ?-tutoriel CSS-php.cn

Quelle est la différence entre * et body en CSS ? L'explication la plus complète et la plus détaillée ?

云罗郡主

Libérer： 2018-10-27 11:28:20

avant

5533 Les gens l'ont consulté

Le contenu de cet article porte sur la différence entre * et body en CSS ? L'explication la plus complète et la plus détaillée, qui a une certaine valeur de référence, peut s'y référer. J'espère qu'elle vous sera utile. .

Quelle est la différence entre * et body en CSS ? Lexplication la plus complète et la plus détaillée ?

Avant de les présenter, il faut d'abord savoir quels rôles jouent ces deux symboles dans les fichiers CSS. Dans le fichier CSS * se trouve un sélecteur générique, qui permet de sélectionner tous les éléments du document, c'est-à-dire un sélecteur pass-through. Body est un sélecteur de type ordinaire qui ne peut sélectionner qu'un seul élément, body. La raison pour laquelle tout le monde pense que les sélecteurs * et body ont parfois le même effet est principalement parce que body est l'élément parent de la plupart des éléments de mise en page. Si les propriétés CSS des éléments sont héritées, alors l'effet des deux est effectivement le même. Par exemple :

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

Copier après la connexion

Les deux codes ci-dessus ont exactement le même effet, car l'attribut font-size est hérité de la droite. Mais tout le monde doit encore comprendre que leurs principes sont différents. Le sélecteur * sélectionne chaque élément et définit la taille de la police à 12 px, tandis que le corps définit la taille de la police à 12 px par héritage.

Il existe un tel code au début de nombreuses pages CSS :

*{margin:0;padding:0}

Copier après la connexion

Parce que de nombreux éléments ont des marges intérieures ou extérieures par défaut, comme les éléments body, ul, p et title. h1-h6 etc. L'utilisation du code ci-dessus peut facilement effacer les marges et le remplissage de tous les éléments, mais cela entraînera également des problèmes. Par exemple :

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

Copier après la connexion

Le code ci-dessus peut entraîner l'affichage du texte saisi dans la zone de texte dans le coin supérieur gauche de certains navigateurs, mais tous les navigateurs ne sont pas comme ça. Il est recommandé d'utiliser la méthode suivante pour définir les styles de manière uniforme :

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

Copier après la connexion

Ce qui précède est l'introduction la plus complète et la plus détaillée de quelle est la différence entre * et body en CSS. J'espère que vous pourrez gagner quelque chose, plus Tutoriel vidéo CSSVeuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!