Flux de documents CSS et éléments de niveau bloc (block) et éléments en ligne (inline). J'ai lu de nombreux livres et lu de nombreux articles auparavant, c'est une connaissance de base fragmentaire de la mise en page CSS, qui est relativement superficielle. Dans "The Definitive Guide to CSS" de Reilly, j'ai trouvé que le concept de flux de documents qui y était mentionné me rendait très sensible. Malheureusement, le livre n'expliquait pas ce qu'est le flux de documents. Peut-être que l'auteur pensait que c'était trop simple pour mériter d'être mentionné. . Mais je pense que ce concept est vraiment important. Après l'avoir compris, un certain nombre de théories de mise en page CSS deviennent faciles à comprendre, et je réalise la rationalité de la conception CSS. Donc, sur la base de mes suppositions et de mes expériences, j'ai proposé cette déclaration If. s'il y a des erreurs, c'est tout à fait normal.
Le flux de documents divise le formulaire en lignes de haut en bas et organise les éléments dans chaque ligne de gauche à droite, ce qui correspond au flux de documents.
Chaque élément non flottant au niveau du bloc occupe sa propre ligne et les éléments flottants flottent à une extrémité de la ligne selon les besoins. Si la ligne actuelle ne peut pas tenir, elle flottera sur une nouvelle ligne.
Les éléments en ligne n'occuperont pas de ligne. Presque tous les éléments (y compris les éléments de niveau bloc, en ligne et de liste) peuvent générer des sous-lignes pour placer des sous-éléments.
Il existe trois situations qui entraîneront l'existence d'éléments hors du flux de documents, à savoir le positionnement flottant, absolu et fixe. Mais dans IE, les éléments flottants existent également dans le flux de documents (ce qui me fait penser que c'est raisonnable><).
Les éléments flottants n'occupent aucun espace de flux de documents normal, et le positionnement des éléments flottants est toujours basé sur le flux de documents normal, puis extrait du flux de documents et déplacé aussi loin que possible vers la gauche ou la droite. Le contenu du texte sera enroulé autour de l'élément flottant. Lorsqu'un élément est extrait du flux de documents normal, les autres éléments toujours présents dans le flux de documents ignorent l'élément et remplissent son espace d'origine.
Le concept déroutant de flottement est causé par l'interprétation de la théorie par le navigateur. On peut seulement dire que de nombreuses personnes utilisent IE comme standard, mais en réalité ce n'est pas le cas.
Sur la base du flux de documents, nous pouvons facilement comprendre les modèles de positionnement suivants :
Positionnement relatif, c'est-à-dire décalage par rapport à la position de l'élément dans le flux de documents. Mais conservez l'espace réservé d'origine.
Positionnement absolu, c'est-à-dire complètement hors du flux documentaire, décalage et positionnement fixe par rapport à l'élément parent le plus proche avec une valeur non statique de l'attribut position. Positionnement absolu, c'est-à-dire complètement hors du flux documentaire, décalage par rapport à. la fenêtre.
Il y a encore quelques questions que je dois résoudre. Je ne comprends pas
1. En tant qu'un des trois éléments de base, quelle est la principale différence entre les éléments en ligne et les éléments au niveau du bloc ?
2. Comment comprendre quand l'attribut Clear prend la bonne valeur ? Il semble que la situation expérimentale soit toujours incompatible avec la théorie.
Que signifie l'élément inline ? Que sont les éléments de niveau bloc.
Le texte chinois du « Guide définitif CSS » indique : Tout élément visible qui n'est pas un élément de niveau bloc est un élément en ligne. La caractéristique de ses performances est la forme de « disposition en lignes ». La « disposition en lignes » signifie ici que sa forme d'expression est toujours affichée en lignes. Par exemple, lorsque nous définissons un élément en ligne border-bottom:1px solid #000;, il sera répété dans chaque ligne et il y aura une fine ligne noire sous chaque ligne. S'il s'agit d'un élément de niveau bloc, la ligne noire affichée n'apparaîtra qu'en dessous du bloc.
Les éléments tels que p, h1 ou div sont souvent appelés éléments de niveau bloc, et ces éléments sont affichés sous forme de bloc de contenu ; les éléments tels que Strong et span sont appelés éléments en ligne, et leur contenu est affiché dans la ligne, c'est-à-dire , "boîte en ligne". (Vous pouvez utiliser display=block pour convertir des éléments en ligne en éléments de bloc. display=none signifie que l'élément généré n'a aucun cadre, n'affiche pas l'élément et ne prend pas de place dans le document)
R : Les éléments en ligne sont des éléments dans une ligne et ne peuvent être placés que dans une ligne ; les éléments au niveau du bloc ne sont qu'une boîte de quatre carrés et peuvent être placés n'importe où sur la page.
B : Pour parler franchement, un élément en ligne est comme un mot ; un élément de niveau bloc est comme un paragraphe. S'il n'est pas défini autrement, il apparaîtra sur sa propre ligne.
C : éléments généraux au niveau du bloc tels que paragraphe <p>, titre <h1><h2>..., liste, <ul><ol><li>, table <table>, formulaire <form>, DIV<div > et BODY <body> et d'autres éléments. Les éléments en ligne sont tels que : les éléments de formulaire <input>, les hyperliens <a>, les images <img>, <span>…..
D : La caractéristique notable des éléments de niveau bloc est que chaque élément de niveau bloc commence à s'afficher sur une nouvelle ligne et que les éléments suivants doivent également être affichés sur une nouvelle ligne.
E : <span> est un élément en ligne dans la définition CSS, tandis que <div> est un élément de niveau bloc.
Pour ceux qui ont appris CSS, ils peuvent le comprendre immédiatement. Mais ce n'est pas facile à comprendre pour les novices, donc je veux surtout le rendre plus familier aux novices !
L'utilisation du mot conteneur facilitera la compréhension visuelle de leur existence et de leur objectif. Les éléments en ligne sont équivalents à de petits conteneurs, tandis que <div> équivaut à un grand conteneur. Bien sûr, un petit conteneur peut être placé dans un grand conteneur. <span>C'est un petit récipient. De cette façon, vous pouvez avoir une première impression dans votre esprit si nous voulons mettre de l'eau dans un grand récipient. Mais que se passe-t-il si je veux aussi y mettre de l'encre ? C'est très simple. Nous sortons le petit récipient, le remplissons d'encre et le mettons dans l'eau propre du grand récipient.
Laissez-moi vous donner un exemple pratique simple : par exemple <div>I love CSS - 52CSS.com</div>
Je veux styliser la lettre c en utilisant CSS, afin que nous puissions utiliser <span>.
<div>J'adore CSS - <span>52CSS.com</span> Norme W3C</div>
Un élément de bloc est généralement un élément conteneur pour d'autres éléments. Les éléments de bloc commencent généralement sur une nouvelle ligne. Il peut 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 "form" est. assez particulier, il ne peut être utilisé que pour contenir d'autres éléments de bloc.
Sans l'aide de CSS, les éléments de bloc seront disposés une ligne à la fois. Avec CSS, nous pouvons changer le mode de mise en page par défaut de ce HTML et placer les éléments de bloc 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 type d'élément de bloc. La mise en page basée sur un tableau et la mise en page basée sur CSS examinent ces deux mises en page du point de vue des utilisateurs ordinaires (à l'exclusion des personnes malvoyantes, aveugles, etc.), à l'exception des vitesse de chargement des pages À part la différence, il n’y a pas d’autre différence. Cependant, si un utilisateur ordinaire clique par inadvertance sur le bouton Afficher le code source de la page, la différence entre les deux sera 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 comprendre rapidement le contenu. De ce point de vue, le code de mise en page CSS devrait avoir une meilleure expérience esthétique.
Vous pouvez considérer l'élément conteneur de blocs div comme des boîtes, ou si vous avez joué avec le découpage, ce sera plus facile à comprendre. Nous avons d'abord découpé les articles nécessaires dans divers journaux et magazines. Chaque élément de contenu coupé est un bloc. Ensuite, nous avons collé ces morceaux de papier sur un nouveau morceau de papier vierge selon notre intention de mise en page. Cela formera votre propre résumé unique. En tant qu'extension de la technologie, la conception de la mise en page Web suit le même modèle.
.Inline
sont généralement basés sur des éléments de base au niveau sémantique. Les éléments en ligne ne peuvent contenir que du texte ou d'autres éléments en ligne, et l'élément en ligne commun "a" l'est.
L'élément bloc (élément de bloc) et l'élément en ligne (élément en ligne) sont 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 mutable 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.
Concernant le nom chinois d'élément en ligne, il existe de nombreux types d'éléments en ligne, d'éléments en ligne, d'éléments en ligne et d'é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 - référence du bloc * centre - bloc d'alignement * dir - liste de répertoires * div - niveau de bloc couramment utilisé, également l'étiquette principale de la mise en page CSS * dl - liste de définitions * champset - groupe de contrôle de formulaire * formulaire - formulaire d'interaction * h1 - Titre * h2 - Sous-titre * h3 - Titre de niveau 3 * h4 - Titre de niveau 4 * h5 - Titre de niveau 5 * h6 - Titre de niveau 6 * hr - Ligne de séparation horizontale * isindex - invite de saisie
* menu - liste de menus * noframes - contenu facultatif des frames (ce contenu de bloc est affiché pour les navigateurs qui ne prennent pas en charge les frames) * noscript - contenu de script facultatif (ce contenu est affiché pour les navigateurs qui ne prennent pas en charge les scripts)
* ol - formulaire trié * p - paragraphe * texte pré-formaté * table - tableau * ul - élément en ligne de liste non trié
(élément en ligne)
* a - point d'ancrage * abbr - abréviation * acronyme - premier mot * b - gras (non recommandé)
* bdo - remplacement du bidi
* big - grande police * br - saut de ligne * cite - quote * code - code informatique (obligatoire pour citer le code source)
* dfn - définir les champs * em - souligner * police - paramètres de police (non recommandé)
* i - italique * img - image * input - zone de saisie * kbd - définir le texte du clavier * label - étiquette du tableau * q - citation courte * s - souligner (non recommandé)
* samp - définit un exemple de code informatique * select - sélection d'éléments * small - petite police de texte * span - conteneur en ligne couramment utilisé, définit des blocs dans le texte * strike - underline * strong - accentuation en gras * sub - subscript * sup - Superscript * textarea - Zone de saisie de texte multiligne * tt - Texte télétype * u - Souligné * var - Définir des variables
Éléments variables Les éléments variables déterminent si l'élément est un élément de bloc 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