Introduction aux connaissances sur la théorie de la représentation visuelle

Je sais enfin comment implémenter la représentation visuelle, au lieu de l'implémenter une par une. Du coup, j'ai l'impression de pouvoir saisir la présentation globale de la page. Il semble que j'ai appris les choses derrière la représentation ?

Ce qui suit est le rugissement d'un homme qui se rend soudain compte qu'il a si peu vu

Ahhh, je viens de remarquer que la largeur est réglée sur la largeur de la zone de contenu, après avoir ajouté du remplissage ou de la marge, cela augmentera la largeur globale

Ahhhhh, je viens d'apprendre aujourd'hui que seules la zone de contenu et les marges gauche et droite peuvent être réglées sur automatique ! ! ! !

1 Termes associés

• Flux : Tous les éléments sont placés dans le flux Lorsque la page est affichée, les éléments circulent vers celui de l'écran. par un Bien entendu, il existe également des cas de rupture avec le flux. Si un élément est flotté ou positionné , alors il sera détaché du flux

• Éléments non remplacés : comme les paragraphes, encore une fois en utilisant l'exemple Mieux

• éléments de remplacement : tels que des images

• éléments de niveau bloc : paragraphes, titres, p, etc., une ligne une pause sera générée après l'afflux. L'utilisation de display: block; permet aux éléments de générer des boîtes de niveau bloc

• éléments en ligne : strong, span, etc., qui ne seront pas enroulés. Utilisez display: inline; pour que l'élément génère une boîte

• élément racine : html
  

2 auto

2.1 Horizontal : seules la largeur de la zone de contenu et les marges gauche et droite peuvent être définies sur automatique

• Un auto : occupera tout l'espace restant

• Deux auto : Généralement c'est la marge extérieure, ensuite la zone de contenu est centrée

• trois auto : la marge est à 0, la zone de contenu va essayer d'occuper l'espace le plus large

2.2 Vertical : Seule la hauteur de la zone de contenu et les marges supérieure et inférieure peuvent être réglées sur auto

• En flux normal, le haut et les marges inférieures définies sur auto seront automatiquement calculées à 0, pas comme les marges horizontales Centrées
  

3 marges

Parmi le remplissage, la marge et. border, seule margin peut être définie sur une valeur négative, et il convient de noter que margin Lorsque vous le définissez sur une valeur négative, il est très important que la somme padding + margin + border soit la largeur de l'élément parent .

C'est vrai, je ne le savais pas avant... Qui sait pourquoi j'ai raté tant de points de connaissances importants... Heureusement, j'ai rattrapé mon retard maintenant, grâce au guide faisant autorité ~ ~

4 Afficher la transformation du rôle

• Vous souhaitez utiliser l'élément de liste comme une barre horizontale séparée par des lignes verticales comme barre de navigation

• display: inline;

Ajoutez ensuite une bordure droite à tous les éléments de la liste, et ajoutez une bordure gauche au premier élément de la liste

• Mettez le lien dedans. p et que vous souhaitez le présenter sous forme de barre latérale verticale

  display: block;

Ajoutez quelques styles pour l'afficher sous la forme d'une belle barre de navigation verticale

• Si vous souhaitez insérer une structure de bloc dans une ligne

  display: inline-block;

, quelque chose qui ressemble à une barre de navigation verticale sera inséré dans la ligne. Si ce bloc n'a pas de largeur définie, s'adaptera à une seule ligne

• rodage

  display: run-in;

Bien sûr, il y a des restrictions sur son utilisation, seulement les suivantes Lorsqu'un element est un élément de niveau bloc, il sera converti en élément en ligne au début de cet élément de niveau bloc.

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!