Explication détaillée de la différence entre les éléments en ligne et les éléments de niveau bloc-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Explication détaillée de la différence entre les éléments en ligne et les éléments de niveau bloc

迷茫

Mar 25, 2017 am 10:46 AM

différence

1. La différence entre les éléments en ligne et les éléments de niveau bloc

1. Les éléments en ligne n'occuperont pas toute la ligne et sont disposés en une ligne droite. Ils sont tous sur la même ligne, disposés horizontalement

Les éléments au niveau du bloc occuperont une ligne, disposés verticalement ;

　2. Les éléments de niveau bloc peuvent contenir des éléments en ligne et des éléments de niveau bloc ; les éléments en ligne ne peuvent pas contenir d'éléments de niveau bloc.

3. La différence entre les attributs des éléments en ligne et des éléments au niveau du bloc est principalement due aux attributs du modèle de boîte. Le paramètre de largeur des éléments en ligne n'est pas valide, la hauteur n'est pas valide (. la hauteur de la ligne peut être définie), et la marge haut et bas n'est pas valide, le remplissage vers le haut et vers le bas n'est pas valide.

2. Conversion des éléments en ligne et des éléments de niveau bloc

Conversion des éléments en ligne éléments Pour les éléments de bloc : display:block;

Les éléments de bloc sont convertis en Éléments en ligne： display:inline;

Description du problème : Pourquoi la largeur et la hauteur des éléments en ligne tels que img et input peuvent-elles être définies ?

Réponse détaillée :

Les éléments sont la base de la structure du document. En CSS, chaque élément génère une boîte (box, également traduit par « box ») qui contient le contenu de l'élément. Mais différents éléments seront affichés différemment. Par exemple,

sont différents, et Différents types sont spécifiés pour différents éléments dans la définition du type de document (DTD), ce qui est l'une des raisons pour lesquelles la DTD est importante pour les documents.

1. Éléments remplaçables et non remplaçables

À partir des caractéristiques de l'élément lui-même, il peut être divisé en éléments remplaçables et non remplaçables.

a) Élément de remplacement

L'élément de remplacement signifie que le navigateur détermine le contenu d'affichage spécifique de l'élément en fonction de ses balises et de ses attributs.

Par exemple, le navigateur lira les informations sur l'image et les affichera en fonction de la valeur de l'attribut src de la balise , mais si vous affichez le code HTML (X), vous ne pouvez pas voir le contenu réel de l'image ; autre exemple

En fonction de l'attribut type de la balise , décidez si vous souhaitez afficher une zone de saisie, un bouton radio, etc.

　 Les éléments , , , <select>, <object> dans (X)HTML sont tous des éléments de remplacement. Ces éléments n'ont souvent pas de contenu réel, c'est-à-dire un élément vide, par exemple : </p> <p>　<img src="cat.jpg" /><br>　<input type="submit" name= "Submit" value="Submit" /></p> <p>　 Le navigateur affichera ces éléments en fonction de leur type de balise et de leurs attributs. Les éléments remplaçables génèrent également des cases dans leur affichage. </p> <p> b) Éléments non remplaçables </p> <p> La plupart des éléments de (X)HTML sont des éléments non remplaçables, c'est-à-dire que leur contenu est directement affiché à l'utilisateur (comme un navigateur). Par exemple : </p> <p>　<p>Contenu du paragraphe</p></p> <p>　 Le paragraphe<p> est un élément non remplaçable et le texte « Contenu du paragraphe » est entièrement affiché. </p> <p> 2. Afficher les éléments </p> <p> En plus des méthodes de classification des éléments remplaçables et des éléments non remplaçables, il existe d'autres méthodes de classification des éléments en CSS 2.1 : les éléments de niveau bloc (block-level ) et l'élément inline (niveau inline, également traduit par élément "inline"). </p> <p> a) Éléments de niveau bloc </p> <p> La caractéristique la plus évidente d'un élément visuellement formaté en bloc est qu'il remplit la zone de contenu de son élément parent horizontalement par défaut, et sur ses côtés gauche et droit, les éléments de niveau bloc sont sur leur propre ligne par défaut s'il n'y a pas d'autres éléments. </p> <p> Les éléments typiques au niveau du bloc sont : <p>, <p>, <h1> à <h6>, etc. </p> <p> Les éléments qui flottent (attribut float, peuvent flotter vers la gauche ou la droite) via CSS et définissent l'attribut d'affichage sur "block" ou "list-item" sont des éléments de niveau bloc. </p> <p> Mais les éléments flottants sont spéciaux En raison du flottement, il peut y avoir d'autres éléments à côté d'eux. Et "élément de liste" (élément de liste <li>) générera un symbole de point ou une séquence numérique devant lui. </p> <p> b) Éléments en ligne </p> <p> Les éléments en ligne ne forment pas un nouveau bloc de contenu, c'est-à-dire qu'il peut y avoir d'autres éléments autour d'eux, tels que <a>, <span>, < ;strong>, etc. Ce sont tous des éléments typiques de niveau en ligne. </p> <p>　 Les éléments avec un attribut d'affichage égal à "inline" sont tous des éléments en ligne. Presque tous les éléments remplaçables sont des éléments en ligne, tels que <img>, <input>, etc. </p> <p> Cependant, le type d'éléments n'est pas fixe. En définissant l'attribut display de CSS, les éléments en ligne peuvent être transformés en éléments de niveau bloc, et les éléments de niveau bloc peuvent également être transformés en éléments en ligne. </p> <p><span style="font-family: Microsoft YaHei">　3. Conclusion : </span></p> <p><span style="font-family: 宋体">　 Les éléments de remplacement ont généralement des dimensions intrinsèques, ils ont donc une largeur et une hauteur, qui peuvent être paramétrées. Par exemple, si vous ne précisez pas la largeur et la hauteur de img, celle-ci sera affichée en fonction de sa taille intrinsèque, qui est la largeur et la hauteur de l'image lors de son enregistrement. </span></p> <p><span style="font-family: 宋体"> Pour les éléments de formulaire, les navigateurs ont également des styles par défaut, notamment la largeur et la hauteur. </span></p><p>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!</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">Déclaration de ce site Web</div> <div>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</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Outils d'IA chauds</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>Application basée sur l'IA pour créer des photos de nu réalistes</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Outil d'IA en ligne pour supprimer les vêtements des photos.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Images de déshabillage gratuites</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>Dissolvant de vêtements AI</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title"> <h3>AI Hentai Generator</h3> </a> <p>Générez AI Hentai gratuitement.</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/fr/ai">Afficher plus</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Article chaud</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/1796780570.html" title="R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 Il y a quelques semaines</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/1796780641.html" title="R.E.P.O. Meilleurs paramètres graphiques" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Meilleurs paramètres graphiques</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 Il y a quelques semaines</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/1796785841.html" title="Assassin's Creed Shadows: Solution d'énigmes de coquille" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Solution d'énigmes de coquille</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Il y a quelques semaines</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/1796780520.html" title="R.E.P.O. Comment réparer l'audio si vous n'entendez personne" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Comment réparer l'audio si vous n'entendez personne</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 Il y a quelques semaines</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/1796785857.html" title="Où trouver la courte de la grue à atomide atomique" class="phpgenera_Details_mainR4_bottom_title">Où trouver la courte de la grue à atomide atomique</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 Il y a quelques semaines</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/fr/article.html">Afficher plus</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Outils chauds</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Bloc-notes++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_title"> <h3>Bloc-notes++7.3.1</h3> </a> <p>Éditeur de code facile à utiliser et gratuit</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 version chinoise" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_title"> <h3>SublimeText3 version chinoise</h3> </a> <p>Version chinoise, très simple à utiliser</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Envoyer Studio 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Envoyer Studio 13.0.1</h3> </a> <p>Puissant environnement de développement intégré PHP</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Outils de développement Web visuel</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 version Mac" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_title"> <h3>SublimeText3 version Mac</h3> </a> <p>Logiciel d'édition de code au niveau de Dieu (SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/fr/ai">Afficher plus</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Sujets chauds</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/gmailyxdlrkzn" title="Où se trouve l'entrée de connexion pour la messagerie Gmail ?" class="phpgenera_Details_mainR4_bottom_title">Où se trouve l'entrée de connexion pour la messagerie Gmail ?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7422</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/cakephp-tutor" title="Tutoriel CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutoriel CakePHP</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1359</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/steamdzhmcssmgs" title="Quel est le format du nom de compte de Steam" class="phpgenera_Details_mainR4_bottom_title">Quel est le format du nom de compte de Steam</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>76</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/fr/faq/winactivationkeyper" title="Clé d&#39;activation Win11 permanent" class="phpgenera_Details_mainR4_bottom_title">Clé d&#39;activation Win11 permanent</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>27</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/fr/faq/zt">Afficher plus</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/592543.html" title="Que sont les éléments en ligne et les éléments de niveau bloc ?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202308/17/2023081711295328733.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Que sont les éléments en ligne et les éléments de niveau bloc ?" /> </a> <a href="https://www.php.cn/fr/faq/592543.html" title="Que sont les éléments en ligne et les éléments de niveau bloc ?" class="phphistorical_Version2_mids_title">Que sont les éléments en ligne et les éléments de niveau bloc ?</a> <span class="Articlelist_txts_time">Aug 17, 2023 am 11:33 AM</span> <p class="Articlelist_txts_p">Les éléments en ligne incluent div, p, h1-h6, ul, ol, li, table, form, etc. ; les éléments au niveau du bloc incluent span, a, img, strong, em, input, label, etc. Les caractéristiques des deux éléments : 1. Les éléments en ligne occuperont une ligne, rempliront automatiquement la largeur du conteneur parent, pourront définir la largeur, la hauteur, les marges intérieures et extérieures et d'autres attributs, et pourront contenir d'autres éléments au niveau du bloc et des éléments en ligne. ; 2. Les éléments en ligne n'occuperont pas une ligne exclusive, la largeur et la hauteur sont déterminées par le contenu, et les marges intérieures et extérieures n'affectent que la disposition des éléments eux-mêmes, etc.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/470675.html" title="Que sont les éléments HTML en ligne et les éléments de bloc ?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202102/20/2021022015575660951.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Que sont les éléments HTML en ligne et les éléments de bloc ?" /> </a> <a href="https://www.php.cn/fr/faq/470675.html" title="Que sont les éléments HTML en ligne et les éléments de bloc ?" class="phphistorical_Version2_mids_title">Que sont les éléments HTML en ligne et les éléments de bloc ?</a> <span class="Articlelist_txts_time">Feb 20, 2021 pm 04:03 PM</span> <p class="Articlelist_txts_p">Les éléments HTML en ligne incluent : a (élément d'ancrage), b (gras), br (saut de ligne), code, em (accentuation), font (paramètre de police), i (italique), img (image), input (zone de saisie) ), span, strong (gras souligné), textarea, u, etc. ; les éléments de bloc incluent : adresse (adresse), blockquote (citation de bloc), center (bloc aligné au centre), div, h1~h6 (titre), hr ( Ligne de démarcation horizontale), p, ul, ol, etc.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/619476.html" title="Quelle est la différence entre les éléments en ligne et les éléments de niveau bloc ?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202310/16/2023101609503858496.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Quelle est la différence entre les éléments en ligne et les éléments de niveau bloc ?" /> </a> <a href="https://www.php.cn/fr/faq/619476.html" title="Quelle est la différence entre les éléments en ligne et les éléments de niveau bloc ?" class="phphistorical_Version2_mids_title">Quelle est la différence entre les éléments en ligne et les éléments de niveau bloc ?</a> <span class="Articlelist_txts_time">Oct 16, 2023 am 09:51 AM</span> <p class="Articlelist_txts_p">Il existe cinq différences entre les éléments en ligne et les éléments de niveau bloc : "modèle de boîte", "arrangement", "affichage du contenu", "position relative" et "taille par défaut" : 1. Les éléments en ligne ne génèrent pas de boîtes, de largeur et de hauteur indépendantes. Déterminés par le contenu, les éléments au niveau du bloc généreront un cadre rectangulaire indépendant et des attributs tels que la largeur, la hauteur, les marges et le remplissage peuvent être définis ; 2. Les éléments en ligne sont disposés horizontalement sur la même ligne, tandis que les éléments au niveau du bloc le seront. être pressé de haut en bas. Organiser dans l'ordre ; 3. Les éléments en ligne ne peuvent pas contenir d'éléments de niveau bloc, tandis que les éléments de niveau bloc peuvent contenir d'autres éléments de niveau bloc et des éléments en ligne.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/634793.html" title="La différence entre les éléments en ligne et les éléments de niveau bloc : une compréhension approfondie de la classification des éléments en HTML" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/170329687399445.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="La différence entre les éléments en ligne et les éléments de niveau bloc : une compréhension approfondie de la classification des éléments en HTML" /> </a> <a href="https://www.php.cn/fr/faq/634793.html" title="La différence entre les éléments en ligne et les éléments de niveau bloc : une compréhension approfondie de la classification des éléments en HTML" class="phphistorical_Version2_mids_title">La différence entre les éléments en ligne et les éléments de niveau bloc : une compréhension approfondie de la classification des éléments en HTML</a> <span class="Articlelist_txts_time">Dec 23, 2023 am 10:01 AM</span> <p class="Articlelist_txts_p">La différence entre les éléments en ligne et les éléments de niveau bloc : compréhension approfondie de la classification des éléments en HTML En HTML, les éléments peuvent être divisés en deux catégories : les éléments en ligne et les éléments de niveau bloc. Comprendre leurs différences est très important pour maîtriser correctement la mise en page et le style du HTML. Cet article fournira une compréhension approfondie des caractéristiques des éléments en ligne et des éléments de niveau bloc, et fournira des exemples de code spécifiques. Éléments en ligne Les éléments en ligne sont des éléments affichés en ligne par défaut dans les documents HTML. Ils n'occupent pas une ligne entière, mais apparaissent étroitement dans une ligne en fonction de la façon dont le flux de documents est organisé. Commun dans l'industrie</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/619478.html" title="Quels éléments en ligne et éléments de niveau bloc existe-t-il en HTML ?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202310/16/2023101609573984528.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Quels éléments en ligne et éléments de niveau bloc existe-t-il en HTML ?" /> </a> <a href="https://www.php.cn/fr/faq/619478.html" title="Quels éléments en ligne et éléments de niveau bloc existe-t-il en HTML ?" class="phphistorical_Version2_mids_title">Quels éléments en ligne et éléments de niveau bloc existe-t-il en HTML ?</a> <span class="Articlelist_txts_time">Oct 16, 2023 am 09:57 AM</span> <p class="Articlelist_txts_p">Les éléments en ligne et les éléments de niveau bloc couramment utilisés en HTML sont : 1. Les éléments de niveau bloc incluent des sémantiques telles que <div>, <p>, <ul>, <ol>, <li>, <h1>~<h6>. et <header> 2. Les éléments en ligne incluent des balises telles que <span>, <a>, <strong>, <em>, <img> et <input>.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/680335.html" title="L'attribut margin n'affecte pas les éléments en ligne" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/170824539359008.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="L'attribut margin n'affecte pas les éléments en ligne" /> </a> <a href="https://www.php.cn/fr/faq/680335.html" title="L'attribut margin n'affecte pas les éléments en ligne" class="phphistorical_Version2_mids_title">L'attribut margin n'affecte pas les éléments en ligne</a> <span class="Articlelist_txts_time">Feb 18, 2024 pm 04:36 PM</span> <p class="Articlelist_txts_p">L'effet de la marge sur les éléments en ligne est différent de celui des éléments au niveau du bloc. Dans les éléments en ligne, l'attribut margin affecte uniquement les marges verticales supérieure et inférieure, pas les marges horizontales gauche et droite. Par exemple, s'il existe un élément de paragraphe en HTML, nous pouvons lui définir des styles et observer l'effet de l'attribut margin sur celui-ci. Le code HTML ressemble à ceci :</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/630696.html" title="Que sont les éléments en ligne et au niveau bloc ?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202311/24/2023112413541576064.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Que sont les éléments en ligne et au niveau bloc ?" /> </a> <a href="https://www.php.cn/fr/faq/630696.html" title="Que sont les éléments en ligne et au niveau bloc ?" class="phphistorical_Version2_mids_title">Que sont les éléments en ligne et au niveau bloc ?</a> <span class="Articlelist_txts_time">Nov 24, 2023 pm 01:57 PM</span> <p class="Articlelist_txts_p">Les éléments en ligne incluent a, span, strong, b, em, i, label, img, input, select, textarea, button, abbr, cite, code, big, small, sub, sup, etc. Les éléments au niveau du bloc incluent div, p, h1-h6, form, ul, ol, dl, dt, dd, li, table, tr, td, th, hr, blockquote, adresse, menu, pre, etc.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/fr/faq/634938.html" title="Explication détaillée des scénarios d'utilisation et des méthodes des éléments CSS en ligne et des éléments au niveau du bloc" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/170331236737120.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Explication détaillée des scénarios d'utilisation et des méthodes des éléments CSS en ligne et des éléments au niveau du bloc" /> </a> <a href="https://www.php.cn/fr/faq/634938.html" title="Explication détaillée des scénarios d'utilisation et des méthodes des éléments CSS en ligne et des éléments au niveau du bloc" class="phphistorical_Version2_mids_title">Explication détaillée des scénarios d'utilisation et des méthodes des éléments CSS en ligne et des éléments au niveau du bloc</a> <span class="Articlelist_txts_time">Dec 23, 2023 pm 02:19 PM</span> <p class="Articlelist_txts_p">Explication détaillée des éléments CSS en ligne et des éléments de niveau bloc : explorez leurs scénarios d'application et leurs méthodes d'utilisation. En CSS, les éléments peuvent être divisés en deux types en fonction de leurs caractéristiques d'affichage : les éléments en ligne et les éléments de niveau bloc. Pour les développeurs web, il est très important de comprendre ces deux concepts, car leurs différentes caractéristiques déterminent leurs scénarios d'application et leurs méthodes d'utilisation. Les éléments en ligne sont des éléments qui n'occupent qu'une seule ligne dans une page Web. Les éléments en ligne courants incluent <span>, <img> et <input></p> </div> </div> <a href="https://www.php.cn/fr/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p> </div> <div class="footermid"> <a href="https://www.php.cn/fr/about/us.html">À propos de nous</a> <a href="https://www.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a> <a href="https://www.php.cn/fr/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1744086176"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> </body> </html>