Hauteur, largeur et débordement - Règles CSS pour décrire la zone de contenu dans une disposition en bloc. Contrôler le débordement des éléments de bloc

Description

Définit la largeur des éléments de niveau bloc ou remplaçables (par exemple, la balise ). La largeur n'inclut pas l'épaisseur des bordures autour de l'élément, le remplissage ou les valeurs de marge.

Les navigateurs ne gèrent pas les largeurs de la même manière ; le résultat d'affichage dépend du navigateur utilisé.. Dans le tableau 1 sont donnés options possibles et la largeur résultante.

Syntaxe

largeur : valeur | intérêt | automobile | hériter

Valeurs

Toutes les unités de longueur acceptées en CSS sont acceptées comme valeurs - par exemple, pixels (px), pouces (in), points (pt), etc. Lors de l'utilisation de la notation en pourcentage, la largeur de l'élément est calculée en fonction de la largeur de l'élément parent. Si le parent n'est pas explicitement spécifié, la fenêtre du navigateur agit en tant que tel.

Auto Définit la largeur en fonction du type et du contenu de l'élément. hériter Hérite de la valeur du parent.

HTML5 CSS2.1 IE Cr Op Sa Fx

Résultat cet exemple la façon dont il est affiché dans le navigateur Safari est illustrée à la Fig. 1.

Riz. 1. Largeur du bloc

Modèle objet

document.getElementById("elementID ").style.width

Navigateurs

Internet Explorer 6 définit incorrectement width comme min-width . En mode bizarre, les versions d'Internet Explorer jusqu'à 8.0 inclus calculent de manière incorrecte la largeur d'un élément sans y ajouter de valeurs de remplissage, de marge ou de bordure.

Les versions d'Internet Explorer jusqu'à la version 7.0 incluse ne prennent pas en charge la valeur d'héritage.

Par défaut, les éléments de bloc utilisent la largeur automatique. Cela signifie que l'élément sera étiré horizontalement exactement autant qu'il l'est. espace libre. La hauteur par défaut des éléments de bloc est définie automatiquement, c'est-à-dire Le navigateur étend la zone de contenu verticalement afin que tout le contenu soit affiché. Pour définir des dimensions personnalisées pour la zone de contenu d'un élément, vous pouvez utiliser les propriétés width et height.

La propriété CSS width vous permet de définir la largeur de la zone de contenu de l'élément, et la propriété height vous permet de définir la hauteur de la zone de contenu :

Notez que les propriétés width et height déterminent uniquement la taille de la zone de contenu ; pour calculer la largeur totale d'un élément de bloc, vous devez ajouter la largeur de la zone de contenu, le remplissage gauche et droit et la largeur des éléments gauche et droit. bordure droite. Il en va de même pour la hauteur hors tout de l'élément, seules toutes les valeurs sont calculées verticalement :

Pour ce paragraphe, nous définirons uniquement la largeur et la hauteur.

Ce paragraphe contient, en plus de la largeur et de la hauteur, un remplissage intérieur, une bordure et un remplissage extérieur.

L'exemple montre clairement que le deuxième élément prend plus de place que le premier. Si nous calculons à l'aide de notre formule, alors les dimensions du premier paragraphe sont de 150x100 pixels et les dimensions du deuxième paragraphe sont :

c'est-à-dire 180 x 130 pixels.

Débordement d'élément

Une fois que vous avez déterminé la largeur et la hauteur d'un élément, vous devez faire attention à un point important : le contenu situé à l'intérieur de l'élément peut dépasser la taille de bloc spécifiée. Dans ce cas, une partie du contenu dépassera les limites de l'élément. Pour éviter ce moment désagréable, vous pouvez utiliser la propriété CSS overflow. La propriété overflow indique au navigateur quoi faire si le contenu d'un bloc dépasse sa taille. Cette propriété peut prendre l'une des quatre valeurs suivantes :

• visible - la valeur par défaut utilisée par le navigateur. Définir cette valeur aura le même effet que ne pas définir la propriété de débordement.
• scroll - ajoute des barres de défilement verticales et horizontales à un élément.
• auto - ajoute des barres de défilement si nécessaire.
• caché - masque une partie du contenu qui s'étend au-delà des limites de l'élément de bloc.

Bonjour, chers lecteurs du site blog. Aujourd'hui, nous allons parler de la façon dont vous pouvez définir les dimensions de la zone de contenu en utilisant la hauteur et la largeur et comment configurer l'affichage de ce contenu au cas où il y en aurait plus que ne peut en contenir l'espace qui lui est alloué (règle de débordement CSS avec la valeurs cachées, défilement, auto).

Texte du premier paragraphe

Texte de la seconde

Parce que la largeur et la hauteur de ces paragraphes ne sont pas spécifiées, alors par défaut le navigateur lui-même les calcule en fonction de sa propre compréhension de la valeur Auto. De ce fait, les paragraphes occupent tout l'espace dont ils disposent en largeur, et en hauteur correspondent à la hauteur du contenu qu'ils contiennent.

Faisons maintenant la première modification et codons en dur la largeur du premier paragraphe (largeur : 50 px) :

Texte du premier

Texte de la seconde

En général, ce qui était attendu s'est produit - la taille horizontale a diminué jusqu'à la valeur spécifiée dans width:50px, et la hauteur du paragraphe est toujours formée grâce à height:auto (la valeur par défaut). En conséquence, il est devenu tel qu’il pouvait contenir l’intégralité du texte.

Mais limitons maintenant la hauteur du conteneur en utilisant height:15px.

En conséquence, nous avons constaté que le texte ne rentre plus dans notre petit conteneur de paragraphes et qu'il a donc couru en toute sécurité dans la zone de son voisin. C'est précisément à cela qu'il sert pour contrôler le comportement du contenu dans de telles situations. règle de débordement.

Overflow signifie « débordement » ou, en d'autres termes, « débordement de contenu ». Il explique ce qui devrait arriver au contenu s'il ne rentre pas dans la zone (conteneur) qui lui a été attribuée.

Overflow a plusieurs valeurs valides, mais la valeur par défaut est visible (montrer):

C'est pourquoi dans notre dernier exemple, le texte du paragraphe du haut chevauchait celui du bas (overflow:visible était utilisé par défaut - afficher le contenu qui ne rentre pas dans le conteneur). Nous pourrions utiliser l'autre extrême - débordement caché. Ensuite, tout ce qui ne rentre pas dans le conteneur ne sera pas affiché sur la page Web :

Les deux autres valeurs de cette propriété CSS permettent de faire défiler le contenu qui ne rentre pas dans le conteneur (nous avons déjà observé quelque chose de similaire lorsque nous avons étudié). Ainsi, scroll affichera des barres de défilement verticales et horizontales même si le contenu tient en toute sécurité dans son conteneur désigné :

Mais il serait bien plus logique d'utiliser la valeur Auto pour Overflow si vous avez besoin de créer des barres de défilement. Dans ce cas, le navigateur calculera lui-même quand les afficher et sur quels axes.

Par exemple, si nous utilisons overflow:auto, nous pourrons faire défiler uniquement le long de l'axe où le contenu ne rentre pas dans les limites du conteneur :

Texte du premier

Texte de la seconde

Pour résumer, on peut dire que Overflow permet tout à fait configurer de manière flexible les options d'affichage du contenu dans le cas où il sort de son conteneur. Vous aurez la possibilité d'afficher le contenu restant (visible), de ne pas l'afficher (le couper - caché), ou de rendre obligatoire le défilement (scroll) ou le défilement selon les besoins (auto).

Il existe également des variantes d'écriture de cette règle liées à CSS3, mais qui sont prises en charge par tous les navigateurs, ce qui signifie qu'elles peuvent être utilisées en toute sécurité. Je parle des options overflow-x et overflow-y, qui vous permettent de définir ou non le défilement sur des axes individuels (x - horizontal, y - vertical).

Si, par exemple, vous devez vous assurer que le défilement horizontal n'apparaît jamais et que le défilement vertical n'apparaît que lorsque cela est nécessaire (si le contenu ne rentre pas), alors pour l'élément Html, vous devrez spécifier overflow-x:hidden et overflow- y:auto. Ça y est, le problème sera résolu, car cette astuce auditive est supportée par tous les navigateurs.

Hauteur et largeur en pourcentage - pourquoi avez-vous besoin d'un doctype ?

Parlons maintenant de la base de calcul de la largeur spécifiée en pourcentage. N'oubliez pas qu'au début de l'article, j'avais promis de concentrer notre attention là-dessus. Eh bien, en fait, la règle de largeur CSS ne fait pas exception ici et, tout comme le remplissage et la marge, est calculée en pourcentage de la taille horizontale du conteneur de contenu.

La situation est un peu plus confuse avec la hauteur de la zone de contenu spécifiée en pourcentage. Il serait logique de supposer qu’il en va de même pour la hauteur du conteneur. Mais ici, nous commençons à rencontrer un dualisme (deux modèles de comportement) - comme c'était le cas auparavant et comme c'est le cas aujourd'hui selon les normes acceptées. À cet égard, nous devrions encore une fois aborder le sujet des modes d'affichage, dont nous avons parlé plus tôt.

Historiquement, après l’adoption des normes, elles sont restées les mêmes un grand nombre de documents formés selon les anciennes règles de pure Langage HTML et il fallait faire quelque chose avec eux. Dans le même temps, il évoluait également (un langage de balisage de style est apparu et certaines balises et attributs sont devenus obsolètes), il était donc nécessaire d'une manière ou d'une autre de montrer au navigateur selon quelles normes il aurait besoin pour analyser ce code.

Afin de séparer les nouveaux documents (qui prenaient en compte tous les standards émergents) et les anciens (qui souvent ne prenaient en compte rien d'autre que du HTML pur), Melkosoft a proposé d'utiliser une petite fonctionnalité du langage XML qui venait d'apparaître à cette époque. . Cette fonctionnalité était une fonctionnalité de service et s'appelle désormais déclaration doctype.

Cela peut paraître différent (pour en savoir plus, consultez l'article mentionné juste au-dessus), mais cette option fonctionnera toujours :

Ainsi, le navigateur a reçu un marqueur indiquant les normes qu'il doit utiliser pour analyser le document. Si la déclaration doctype est présente, alors elle passe en mode standards. Si le navigateur ne trouve pas le doctype sur la première ligne du code du document (ou s'il est mal écrit, ce qui équivaut à son absence), alors il passe à ce qu'on appelle mode truc(Mode de quirks).

Un document dépourvu de doctype apparaîtra dans le navigateur comme s'il était très ancien (antique). Si vous ajoutez une déclaration au même document, le navigateur perdra son antiquité et commencera à travailler avec le code du document selon toutes les normes actuellement acceptées.

Mais la conception de l’Antiquité est très différente. Par exemple, quel genre d’antiquité un chroniqueur désormais populaire peut-il avoir ? Google Chrome, apparu seulement en 2008 ? IE, bien sûr, a une histoire assez riche. Par conséquent, tous les navigateurs de n'importe quelle version afficheront le document sans déclaration (en mode bizarreries ou astuces) de la même manière que le ferait un ancien, car c'est la version qui est considérée comme celle de base.

Pourquoi ai-je parlé si longtemps des modes d’affichage du navigateur ? Mais parce que pour ces deux modes, préciser la hauteur de la zone de contenu en pourcentage est très différent par rapport au calcul de cette même hauteur.

Définir la hauteur (en pourcentage) de la zone de contenu en mode standards (lorsque le type de document correct est spécifié au début du document) ne sera possible du tout que si la hauteur du conteneur dans lequel ce contenu est enfermé (spécifiée par votre pourcentage de hauteur sera ignoré).

Si nous supprimons la déclaration doctype du code du document, nous verrons l'image suivante :

Pour le mode de suivi des standards (une déclaration est écrite en début de document), il faut d'abord régler la hauteur du conteneur (dans notre cas, pour un Div, le conteneur sera la balise Body) et ensuite seulement le navigateur gérera correctement la hauteur : 100 % :

En conséquence, nous nous sommes retrouvés avec deux approches complètement différentes lors de la définition de la hauteur de la zone de contenu en pourcentage, donc pour éviter les problèmes, je vous conseille vivement de spécifier la déclaration doctype correcte au début de tous vos documents (pages web). Il existe un autre exemple où la différence entre le mode de respect des normes et le mode des astuces sera colossale.

Si vous définissez la hauteur et la largeur de la zone de contenu pour n'importe quel élément HTML, et spécifiez également le remplissage et la largeur de la bordure pour cette balise, alors en mode bizarreries (sans déclaration écrite) dans différents navigateurs tout cela peut être interprété de différentes manières.

Dans l'ancien navigateur IE 5.5, le remplissage et la largeur du cadre seront pris en compte à partir des dimensions spécifiées via la hauteur et la largeur. Ceux. la taille globale de l'élément correspondra à ce qui est spécifié dans ces Propriétés CSS(il s'agit d'un schéma obsolète qui n'est plus utilisé).

Dans le reste navigateurs modernes le remplissage et la largeur de la bordure seront ajoutés aux dimensions spécifiées en hauteur et en largeur. Ceux. dans ce cas (mode astuce sans doctype), les dimensions initialement spécifiées de la zone de contenu seront agrandies de la quantité de remplissage et de bordure internes.

Eh bien, si vous écrivez une directive dans le document, alors dans absolument tous les navigateurs modernes et anciens, ces problèmes liés à la dualité de l'approche peuvent être facilement évités. Dans ce cas, et dans IE 5.5, le remplissage et la largeur de la bordure seront résumés avec les dimensions de la zone de contenu, comme l'exigent les normes CSS modernes. Par conséquent, pour éviter utilisez toujours doctype.

Bonne chance à toi! A bientôt sur les pages du site blog

Vous pourriez être intéressé

Position (absolue, relative et fixe) - méthodes de positionnement Éléments HTML en CSS (règles gauche, droite, haut et bas)
Flotter et effacer en CSS - outils de mise en page de blocs
Remplissage, marge et bordure - définissez le remplissage interne et externe en CSS, ainsi que les bordures pour tous les côtés (haut, bas, gauche, droite)
Positionnement à l'aide de la règle Z-index et CSS Cursor pour changer le curseur de la souris
À quoi sert CSS, comment connecter des feuilles de style en cascade à Document HTML et les bases de la syntaxe de ce langage
Sélecteurs de balises, de classes, d'identifiants et universels, ainsi que des sélecteurs d'attributs en CSS moderne Différentes conceptions pour l'intérieur et Liens externes via CSS
Priorités en CSS et leur augmentation en raison de l'importance, de la combinaison et du regroupement des sélecteurs, des styles utilisateur et auteur
Affichage (bloc, aucun, en ligne) en CSS - définit le type d'affichage des éléments HTML sur la page Web
Unités de dimension (pixels, Em et Ex) et règles d'héritage en CSS

Description

Pour redimensionner une image en HTML, les attributs height et width sont fournis. Vous pouvez utiliser des valeurs en pixels ou en pourcentages. Si une entrée en pourcentage est définie, les dimensions de l'image sont calculées par rapport à l'élément parent - le conteneur où se trouve la balise . S'il n'y a pas de conteneur parent, la fenêtre du navigateur fait office de conteneur. En d’autres termes, width="100%" signifie que l’image sera étirée sur toute la largeur de la page Web. L'ajout d'un seul attribut de largeur ou de hauteur préserve les proportions et les proportions de l'image. Le navigateur attend que l'image soit complètement chargée pour déterminer sa hauteur et sa largeur d'origine.

Assurez-vous de définir les dimensions de toutes les images de la page Web. Cela rend le chargement de la page un peu plus rapide car le navigateur n'a pas besoin de calculer la taille de chaque image après l'avoir reçue. Cette déclaration est particulièrement importante pour les images placées dans un tableau.

La largeur et la hauteur de l'image peuvent être modifiées plus ou moins grandes. Cependant, cela n'affecte en rien la vitesse de chargement de l'image, puisque la taille du fichier reste inchangée. Par conséquent, effectuez un zoom arrière avec prudence car... Cela peut semer la confusion parmi les lecteurs quant à la raison pour laquelle une si petite image prend si longtemps à se charger. Mais augmenter la taille entraîne l'effet inverse : la taille de l'image est grande, mais le fichier se charge plus rapidement par rapport à une image de même taille. Mais la qualité du dessin se dégrade.

Syntaxe

HTML
XHTML

Valeurs

Tout entier positif en pixels ou en pourcentage.

Valeur par défaut

La largeur originale de l'image.

HTML5 IE Cr Op Sa FX

Bonjour, Cher lecteur.

Il s'agit de la onzième leçon d'apprentissage du CSS. Dans cette leçon, nous examinerons seulement deux propriétés simples mais importantes. Ces propriétés contrôlent la hauteur et la largeur du bloc.

Avant d'étudier cette leçon, parcourez les leçons précédentes :

Théorie et pratique

Dans la dernière leçon, nous avons examiné ce qu'est le modèle de bloc, les marges internes et externes. Ici, nous examinerons seulement deux propriétés : la hauteur et la largeur du bloc. La hauteur en CSS est définie par la propriété hauteur , et la largeur est la propriété largeur . Jetons un coup d'œil au code à l'aide d'un exemple réel (prenons un exemple de la dernière leçon) :

Et en CSS pour chaque bloc