recherche
Maisoninterface Webtutoriel CSSÉlément de bloc élément de bloc et élément en ligne élément en ligne_CSS/HTML

Une tentative a été faite pour insérer un élément de niveau bloc dans un élément de niveau en ligne. Ceci n'est pas autorisé. La seule exception à la possibilité d'insérer des éléments de niveau bloc dans des éléments en ligne est la balise object. Alors, que sont les éléments de niveau en ligne et les éléments de niveau bloc ? .

Les éléments de bloc sont généralement des éléments conteneurs pour d'autres éléments. Les éléments de bloc commencent généralement sur une nouvelle ligne. Ils peuvent accueillir des éléments en ligne et d'autres éléments de bloc. Un élément de bloc courant est la balise de paragraphe « P ». " L'élément de bloc est spécial. Il ne peut être utilisé que pour accueillir d'autres éléments de bloc.

Sans la fonction CSS, les éléments de bloc seront disposés une ligne à la fois. Après avoir utilisé CSS, nous pouvons modifier la valeur par défaut mode de mise en page de ce code HTML et placez les éléments de bloc là où vous le souhaitez. Au lieu de commencer bêtement une nouvelle ligne à chaque fois, il convient de souligner que la balise table est également un élément de bloc. Premièrement, du point de vue des utilisateurs ordinaires (sauf visuellement). personnes handicapées, aveugles, etc.), il n'y a pas d'autre différence entre la mise en page basée sur un tableau et la mise en page basée sur CSS, à l'exception de la différence de vitesse de chargement des pages. Mais si c'est ordinaire, après que l'utilisateur a cliqué par inadvertance sur le bouton d'affichage du code source de la page, La différence entre les deux est très grande. Le code source de la page de mise en page CSS conçu sur la base de bons concepts de reconstruction peut au moins permettre aux utilisateurs ordinaires sans expérience en développement Web de visualiser rapidement le contenu. De ce point de vue, le code de mise en page CSS devrait avoir une meilleure compréhension. expérience esthétique.

Vous pouvez imaginer l'élément conteneur de bloc div comme une boîte, ou si vous avez joué avec le découpage, ce sera plus facile à comprendre. Nous découpons d'abord les articles requis dans divers journaux et. magazines. Le contenu de chaque coupe est un bloc, puis nous utilisons de la colle pour réorganiser ces morceaux de papier selon notre propre intention de mise en page. Collez-le sur un nouveau morceau de papier vierge. Cela crée votre propre résumé unique. technique, la conception de la mise en page Web suit également le même modèle.

Éléments en ligne (Les éléments en ligne sont généralement basés sur des éléments de base au niveau sémantique. Les éléments en ligne ne peuvent accueillir que du texte ou d'autres éléments en ligne. L'élément en ligne commun "a ".

L'élément bloc et l'élément en ligne sont tous deux des concepts de la spécification HTML. La différence fondamentale entre les éléments block et les éléments inline est que les éléments block commencent généralement sur une nouvelle ligne. Lorsque le contrôle CSS est ajouté, cette différence d'attribut entre les éléments de bloc et les éléments en ligne ne devient plus une différence. Par exemple, nous pouvons ajouter un attribut tel que display:block à l'élément en ligne cite, afin qu'il ait également l'attribut de commencer à partir d'une nouvelle ligne à chaque fois.


Le concept de base d'un élément variable est qu'il doit déterminer si l'élément est un élément de bloc ou un élément en ligne en fonction du contexte. Les éléments variables appartiennent toujours aux deux catégories d'éléments ci-dessus. Une fois que le contexte a déterminé sa catégorie, il doit suivre les règles des éléments de bloc ou des éléments en ligne. Voir le texte intégral pour la classification approximative des éléments.

ps : Concernant le nom chinois de l'élément en ligne, il existe de nombreux types d'éléments en ligne, éléments en ligne, éléments en ligne et éléments en ligne. Fondamentalement, il n’existe pas de traduction unifiée, appelez-la simplement comme vous voulez. De plus, lorsque l'on parle d'éléments en ligne, nous penserons à un attribut d'affichage appelé display:inline ; cet attribut peut résoudre le fameux problème de double bordure flottante d'IE.

élément de bloc
* adresse - adresse
* blockquote - citation de bloc
* centre - bloc d'alignement
* dir - liste de répertoires
* div - Les niveaux de bloc couramment utilisés sont facile et sont également les balises principales de la mise en page CSS
* dl - Liste de définitions
* champset - groupe de contrôle de formulaire
* formulaire - Formulaire interactif
* h1 - Gros titre
* h2 - Sous-titre
* h3 - Titre niveau 3
* h4 - Titre niveau 4
* h5 - Titre niveau 5
* h6 - Titre niveau 6
* hr - Ligne de démarcation horizontale
* isindex - invite de saisie
* menu - liste de menus
* noframes - contenu facultatif des cadres, (pour les navigateurs qui ne prennent pas en charge les cadres, affichez ce contenu de bloc
* noscript -) contenu de script facultatif (pour les navigateurs qui ne prennent pas en charge cadres de support) Les navigateurs qui ne prennent pas en charge le script afficheront ce contenu)
* ol - formulaire trié
* p - paragraphe
* texte pré-formaté
* tableau - tableau
* ul - liste non triée

Élément en ligne
* a - Point d'ancrage
* abbr - Abréviation
* acronyme - Premier mot
* b - Gras (non recommandé)
* bdo - bidi override
* big - big font
* br - saut de ligne
* cite - citation
* code - code informatique (obligatoire pour citer le code source)
* dfn - Définir le champ
* em - Emphase
* police - Paramètre de police (non recommandé)
* i - Italique
* img - Image
* saisie - Zone de saisie
* kbd - Définir le texte du clavier
* label - label du tableau
* q - citation courte
* s - trait de soulignement (non recommandé)
* samp - définir un exemple de code informatique
* select - sélection de projet
* small - small texte de police
* span - conteneur en ligne couramment utilisé, définissant des blocs de texte
* barré - souligné
* fort - accent gras
* sub - bas Superscript
* sup - Superscript
* textarea - Zone de saisie de texte multiligne
* tt - Texte télex
* u - Souligné
* var - Définir une variable

Éléments variables
Les éléments variables déterminent si l'élément est un élément block ou un élément en ligne selon le contexte.

* applet - applet java
* bouton - bouton
* del - supprimer le texte
* iframe - cadre en ligne
* ins - texte inséré
* carte - bloc d'image (carte)
* objet - objet objet
* script - script client

Déclaration
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Draggin & # 039; et droppin & # 039; en réactionDraggin & # 039; et droppin & # 039; en réactionApr 17, 2025 am 11:52 AM

L'écosystème React nous offre de nombreuses bibliothèques qui se concentrent sur l'interaction de la glisser et de la chute. Nous avons react-dnd, react-beeufuly-dnd,

Logiciel rapideLogiciel rapideApr 17, 2025 am 11:49 AM

Il y a eu des choses merveilleusement interconnectées à propos des logiciels rapides ces derniers temps.

Gradients imbriqués avec un clip de fondGradients imbriqués avec un clip de fondApr 17, 2025 am 11:47 AM

Je ne peux pas dire que j'utilise souvent le clip de fond. Je ne parierai presque presque jamais dans le travail CSS au jour le jour. Mais je me suis souvenu de cela dans un post de Stefan Judis,

Utilisation de la réalisation de demandes avec des crochets ReactUtilisation de la réalisation de demandes avec des crochets ReactApr 17, 2025 am 11:46 AM

L'animation avec des demandes de châssis devrait être facile, mais si vous n'avez pas lu de manière approfondie de la documentation de React, vous rencontrerez probablement quelques choses

Besoin de faire défiler en haut de la page?Besoin de faire défiler en haut de la page?Apr 17, 2025 am 11:45 AM

Peut-être le moyen le plus simple d'offrir cela à l'utilisateur est un lien qui cible un ID sur l'élément. Tellement comme ...

La meilleure API (GraphQL) est celle que vous écrivezLa meilleure API (GraphQL) est celle que vous écrivezApr 17, 2025 am 11:36 AM

Écoutez, je ne suis pas un expert GraphQL mais j'aime travailler avec. La façon dont elle expose les données en tant que développeur frontal est assez cool. C'est comme un menu de

Actualités de plate-forme hebdomadaire: bookmarklet d'espacement de texte, attente de haut niveau, nouvel indicateur de chargement d'ampliActualités de plate-forme hebdomadaire: bookmarklet d'espacement de texte, attente de haut niveau, nouvel indicateur de chargement d'ampliApr 17, 2025 am 11:26 AM

Au cours de cette semaine, un Bookmarklet pratique pour inspecter la typographie, en utilisant Await pour bricoler comment les modules JavaScript s'importent, ainsi que Facebook & # 039; S

Diverses méthodes pour étendre une boîte tout en préservant le rayon de la frontièreDiverses méthodes pour étendre une boîte tout en préservant le rayon de la frontièreApr 17, 2025 am 11:19 AM

J'ai récemment remarqué un changement intéressant sur Codepen: sur le plan des stylos sur la page d'accueil, il y a un rectangle avec des coins arrondis se développant dans le dos.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques moisBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles