CSS Document Streaming, Block Level Elements (Block), en ligne (en ligne). Le guide faisant autorité de Reilly <CSS> a constaté que le concept de flux de documents mentionné m'a rendu très sensible. Ce concept est vraiment important. S'il y a une erreur, c'est purement normal. Le flux de documents divise le formulaire de haut en bas en lignes et décharge les éléments de chaque ligne dans l'ordre de gauche à droite, qui est le flux de document. Il y a quelques autres questions que je ne comprends pas 1. En tant qu'élément en ligne, l'un des trois éléments de base, quelle est la principale différence entre elle et les éléments au niveau du bloc? Que signifient les éléments en ligne? Qu'est-ce qu'un élément de niveau de bloc. Le texte chinois du "Guide faisant autorité CSS" montre que tout élément visible qui n'est pas un élément de niveau bloc est un élément en ligne. La caractéristique de son expression est la forme de "disposition des lignes". Par exemple, lorsque nous définissons un élément en ligne Border-Bottom: 1px solide # 000;, il est 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 au niveau du bloc, les lignes noires affichées n'apparaîtront que sous le bloc. Permettez-moi de vous donner un exemple pratique simple: par exemple <v> J'adore CSS - 52css.com </div> Les éléments en ligne sont généralement basés sur des éléments de base sémantiques. Les éléments en ligne ne peuvent accueillir que du texte ou d'autres éléments en ligne, et l'élément en ligne commun "A". Élément de blocage élément en ligne Élément variable L'élément variable est un élément bloc ou un élément en ligne basé sur le contexte.
Chaque élément de niveau de bloc non flottant occupe une ligne, et l'élément flottant flotte à une extrémité de la ligne selon les réglementations.
Les éléments en ligne n'occupent pas non plus une seule ligne.
Il y a trois situations qui feront l'exister de l'élément hors du flux de documents, à savoir flottant, positionnement absolu et positionnement fixe. .
L'élément flottant n'occupe aucun espace d'écoulement de document normal, et le positionnement de l'élément flottant est basé sur le flux de document normal, puis les extrait du flux de documents et se déplace vers la gauche ou la droite autant que possible. Le contenu texte entourera l'élément flottant. Lorsqu'un élément est extrait du flux de document normal, d'autres éléments encore dans le flux de documents ignorent l'élément et rempliront son espace d'origine.
La cause profonde des concepts flottants est l'interprétation par le navigateur de la théorie. Je peux seulement dire que beaucoup de gens utilisent IE comme norme, mais 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 compensé par rapport à la position de l'élément dans le flux de documents.
Le positionnement absolu signifie complètement détaché du flux de documents, et est compensé et fixé le positionnement par rapport à l'élément parent le plus proche de la valeur non statique de l'attribut de position, c'est-à-dire complètement détaché du flux de documents, et est compensé par rapport à la fenêtre.
2. Comment comprendre quand l'attribut clair prend la bonne valeur?
Des éléments tels que P, H1 ou Div sont souvent appelés éléments au niveau du bloc, et ces éléments sont affichés comme un élément de contenu; Autrement dit, "boîte en ligne". (Vous pouvez utiliser l'affichage = bloc pour convertir des éléments dans la ligne en éléments de bloc. Affichage = aucun signifie que l'élément généré n'a pas de boîte du tout, et ni affiche des éléments, ni ne prend de place dans le document)
R: La ligne est un élément dans une ligne et ne peut être placée que dans la ligne; un élément au niveau du bloc est un carré, qui peut être placé n'importe où sur la page.
B: Pour le dire franchement, l'élément de la ligne est comme un mot;
C: des éléments généraux au niveau des blocs tels que le paragraphe <p>, titre <h1> <h2>…, List, <ul> <Ol> <li>, Table <Table>, form <form>, div <v> et Éléments corporels tels que <body>. Les éléments en ligne sont comme: les éléments de formulaire <fort>, les hyperliens <a>, image <img>, <span> .....
D: La caractéristique distinctive de l'invisibilité au niveau du bloc est que chaque élément au niveau du bloc est affiché à partir d'une nouvelle ligne, et l'invisibilité ultérieure doit également être affichée à partir d'une autre ligne.
E: <span> appartient à un élément en ligne de la définition CSS, tandis que <v> est un élément au niveau du bloc.
Pour ceux qui ont étudié le CSS, vous pouvez le comprendre au début. Mais il n'est pas facile pour les novices de comprendre, donc je l'explique principalement aux novices plus familiers!
L'utilisation du mot conteneur facilitera la compréhension de leur existence et de leur but. petit conteneur. <Span> est un petit conteneur. Mais que dois-je faire si je veux y mettre de l'encre? C'est très simple.
Je veux utiliser CSS pour définir le style de la lettre C, afin que nous puissions utiliser <span>.
<div> J'adore CSS - <span> 52css.com </span> W3C Standard </div>
L'élément de bloc est généralement un conteneur des autres éléments. .
Sans l'effet de CSS, les éléments de bloc seront organisés dans l'ordre dans une ligne à chaque fois. Avec CSS, nous pouvons modifier le mode de mise en page par défaut de ce HTML et placer les éléments de bloc dans la position que vous souhaitez. Au lieu de démarrer une autre ligne stupidement à chaque fois. Il convient de souligner que la balise de table est également un type d'élément de bloc. vitesse. Cependant, si un utilisateur ordinaire clique accidentellement sur le bouton Code source de la page Afficher, 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 du concept de bonne reconstruction peut au moins permettre aux utilisateurs ordinaires sans 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 imaginer l'élément de conteneur de blocs Div sous forme de cases, ou si vous avez joué avec des articles à clip, il sera plus facile à comprendre. Nous avons d'abord découpé les articles dont nous avons besoin de divers journaux et magazines. Chaque coupe de pièce est un bloc. Ensuite, nous redémarrons ces morceaux de papier sur un nouveau morceau de papier vierge en fonction de nos propres intentions de mise en page. Cela formera vos propres nouvelles de digest unique. En tant qu'extension de la technologie, la conception de la disposition Web suit le même modèle. .
Les éléments de bloc et les éléments en ligne sont des concepts dans la spécification HTML. La différence fondamentale entre les éléments de bloc et les éléments en ligne est que les éléments de bloc commencent généralement par de nouvelles lignes. Cependant, lorsque le contrôle CSS est ajouté, la différence d'attribut entre les éléments de bloc et les éléments en ligne ne deviendra pas une différence. Par exemple, nous pouvons ajouter un élément en ligne cite à l'attribut d'affichage: bloc, afin qu'il puisse également avoir des attributs qui commencent à 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 bloc ou un élément en ligne basé sur la relation contextuelle. Les éléments variables appartiennent toujours aux deux catégories d'éléments ci-dessus. Voir le texte intégral pour la classification des éléments généraux.
En ce qui concerne le nom chinois de l'élément en ligne, il existe de nombreux éléments en ligne, des éléments intégrés, des éléments en ligne et des éléments à entrée directe. Il n'y a essentiellement pas de traduction unifiée, il suffit de l'appeler comme vous voulez. De plus, en ce qui concerne les éléments en ligne, nous penserons qu'il y a un attribut d'affichage qui est affiché: en ligne; cet attribut peut résoudre le célèbre problème de limite flottante IE.
* Adresse - Adresse * Blockquote - Référence du bloc * Centre - Les blocs d'alignement dans le levage * Dir - Liste du répertoire * Div - Le niveau de bloc couramment utilisé est facile et est également la balise principale de la disposition CSS * DL - Liste de définition * Fieldset - Contrôle de formulaire Groupe * Form - Formulaire d'interaction * H1 - grand titre * H2 - Sous-titre * H3 - Titre de niveau 3 * H4 - Niveau 4 Titre * H5 - Niveau 5 Titre * H6 - Niveau 6 Titre * Hr - Diviseur horizontal * ISINDEX - Invite d'entrée
* Menu - Liste de menu * Noframes - Frames Contenu en option, (Affichez ce contenu de bloc pour les navigateurs qui ne prennent pas en charge Frame * Noscript - Contenu de script facultatif (Affichez ce contenu pour les navigateurs qui ne prennent pas en charge le script)
* OL - Formulaire de tri * P - Paragraphe * Pré - Texte du format * Tableau - Tableau * UL - Liste non triée
* A - Point d'ancrage * ABBR - Abréviation * Acronyme - Premier mot * B - Bold (non recommandé)
* BDO - Bidi Override
* Big - grande police * BR - Break de ligne * Cite - Citation * Code - Code informatique (nécessaire lors de la citation du code source)
* DFN - Définir les champs * EM - Impliquer * Font - Paramètres de police (non recommandés)
* i - italique * IMG - Image * Entrée - Boîte d'entrée * KBD - Définir le texte du clavier * Étiquette - Label de table * Q - Référence courte * S - Marque moyenne (non recommandée)
* SAMP - Définir l'exemple de code informatique * SELECT - Sélection du projet * Small - Small Text Text * Span - Containtes en ligne couramment utilisées, définissez des blocs dans le texte * Strike - Moyen-score * Strong - Imphase en gras * Sub - Indice * Sup - SuperScript * TextArea - Boîte d'entrée de texte multi-lignes * TT - Télétet * U - CONDUCTION * VAR - Définir les variables
* Applet - Applet Java
* Bouton - Bouton * del - Supprimer le texte * Iframe - Frame en ligne
* Ins - Texte inséré * Carte - Blocage d'image (carte)
* Objet - Objet Object * Script - Script client