Quelle est la différence entre div et span dans la mise en page Web HTML ?-tutoriel CSS-php.cn

Quelle est la différence entre div et span dans la mise en page Web HTML ?

php中世界最好的语言

Libérer： 2017-12-01 15:03:22

original

2394 Les gens l'ont consulté

De nombreux amis nouveaux dans l'industrie ne comprennent pas très bien la différence entre ces deux balises. Peut-être pensent-ils que SPAN est la même et DIV est la même. Pourquoi y a-t-il deux balises avec la même fonction ? Cet article répondra à cette question pour vous.

La différence et les caractéristiques entre DIV et SPAN

Ce qui suit est l'introduction du système par défaut lorsqu'aucun style CSS n'est défini pour la page Web de développement
La différence entre div et span
La position occupée par div est une ligne, et l'espace occupé par
span est aussi large que le contenu

Analyse : à partir de l'image ci-dessus, il est facile de savoir que "je". je suis content un; le div utilisé" et "Je suis content deux; utilise div". Les deux contenus utilisent des balises

à l'extérieur. Le style qu'ils obtiennent est qu'ils occupent une ligne d'espace (équivalent à un saut de ligne); et "Je suis le contenu trois ; utilisez span" Et "Je suis le contenu quatre ; utilisez span", le contenu du texte est aussi large qu'il est, et la balise

Résumé des balises Span

Div et span peuvent être utilisés pendant le développement Web, et on peut généralement comprendre qu'il n'y a pas de différence. Mais notez que le div occupe une ligne, mais pas l'étendue. L'étendue est aussi large que le contenu l'occupe.

Extensions et améliorations

Le span dans le div n'a pas besoin d'être nommé sélecteur CSS pseudo-classe, le l'exemple est le suivant
Si la class du div est yangshi, alors définissez l'attribut css pour la travée interne, alors le code est le suivant
.yanshi span {attribut et valeur d'attribut}

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture connexe :

Différences dans les types de modèles de boîtes en CSS

Étapes pour implémenter l'effet de création de commutateurs dynamiques en CSS3

Étapes pour implémenter l'attribut de contenu de CSS3

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!