Résumé de la façon d'utiliser l'attribut width width en CSS

La largeur CSS fait référence à la définition de la largeur div correspondante via les styles CSS. L'attribut de largeur CSS est la largeur du mot. La largeur peut être définie pour calculer la largeur en pourcentage, définir la largeur en tant que valeur de pixel, définir la largeur. en unités de longueur relative, etc. Cet attribut est pris en charge par tous les principaux navigateurs. Ce qui suit résume l'utilisation de l'attribut width.

Utilisation de l'attribut width

1. La différence entre l'analyse width:100%; et width:auto;

Si la largeur de p est : 100%, cela signifie que la largeur de p sera de 980px. et p sera une zone complète, puis il aura un remplissage, donc il dépassera p. Et lorsque width: auto, c'est la largeur totale (y compris la largeur, la marge, le remplissage, la bordure) égale à la largeur du parent (largeur, à l'exclusion de la marge, du remplissage et de la bordure du parent), donc si le remplissage a occupé 10 pixels d'espace, alors le la valeur donnée par la largeur est de 960 px. Mais qu'il s'agisse de width : 100 % ou auto, la référence de calcul est la valeur de largeur de la zone de contenu parent, pas la valeur de largeur totale

2 CSS ajuste la taille de l'image. doit connaître la largeur, la hauteur

Comment ajuster la taille d'une image en utilisant CSS, en utilisant les deux attributs width et height Ces deux attributs permettent de définir respectivement la largeur et la hauteur de l'élément. Dans la phase initiale du CSS, tout utilise les pixels comme unités.

3. css width width

La largeur consiste à définir directement la largeur de l'objet étiquette, et à faire attention au "signe égal" suivi du chiffre spécifique. valeur de largeur (ou pourcentage), la largeur spécifique. La valeur n'a pas besoin d'être suivie de l'unité de longueur. L'unité par défaut est le pixel (px). Lors de la définition de la largeur dans la balise de table TABLE ou la balise img d'image, la valeur n'est pas nécessairement suivie. suivez l'unité html. L'unité par défaut est le pixel.

4. CSS2.1SPEC : Explication détaillée de l'attribut width du modèle de formatage visuel (Partie 1)

L'attribut width a plusieurs manières différentes de prendre des valeurs, en voici quelques-uns Type :

(1) Valeur de largeur : c'est-à-dire que la valeur de longueur CSS est utilisée pour spécifier clairement la largeur d'une boîte. L'unité de valeur peut être l'unité de longueur prise en charge en CSS, telle que. px, em, etc.

(2) Pourcentage : Le pourcentage est calculé en fonction de la largeur du bloc contenant. Mais si la largeur du bloc conteneur doit être déterminée en fonction du contenu contenu, alors la disposition finale n'est pas définie, c'est-à-dire que la norme ne précise pas clairement comment calculer la valeur de la largeur. De plus, si la boîte est en position absolue, sa longueur en pourcentage est calculée en fonction de la largeur du bord de remplissage du bloc conteneur.

(3)auto : calculé selon la méthode de calcul de la largeur spécifiée dans la norme CSS. L'algorithme spécifique sera présenté en détail ci-dessous

(4)inherit : en fait, l'attribut width. n'est pas héritable, il est étrange qu'il existe une option d'héritage. Dans les situations réelles, l'attribut width est généralement rarement utilisé comme valeur d'héritage

5 CSS2.1SPEC : Explication détaillée de la largeur. attribut du modèle de formatage visuel (Partie 2)

Le processus de calcul de l'algorithme « rétrécir pour s'adapter » :

[1] Calculer la largeur préférée : sauf si le contenu contenu a un saut de ligne explicite (comme la balise
), sinon la largeur requise pour accueillir le contenu qu'il contient sans retour à la ligne.

[2] Calculer la largeur minimale préférée : lorsque les sauts de ligne sont possibles (l'anglais rencontre des espaces ou des signes de ponctuation, des éléments au niveau du bloc apparaissent, et bien sûr lorsque les balises
apparaissent) La largeur nécessaire pour accueillir le contenu contenu, sans emballage.

[3] Calculer la largeur disponible : utilisez la formule de la section 2.2.3 :

largeur-disponible = largeur du bloc contenant - 'margin-left' - 'border-left- width ' - 'padding-left' - 'padding-right' - 'border-right-width' - 'margin-right, cela inclut également la largeur de tout le défilement.

La largeur finale est : min(preferred-width, max(preferred-min-width, available-width)). La formule finale peut être résumée comme suit : la largeur finale est basée sur la largeur disponible, tout en garantissant qu'elle ne peut pas être supérieure à la largeur préférée et ne peut pas être inférieure à la largeur minimale préférée

Utilisation pertinente de l'attribut width width Q&A

1 La liste ne peut pas être centrée une fois la largeur définie à 100%

2. 🎜>Comment ajouter des images aux articles dans l'éditeur PHP Utilisez les règles habituelles pour modifier la largeur : 100% ; la hauteur : auto

3. Pourquoi vois-je de nombreuses personnes écrire des conteneurs externes de pages Web adaptatifs qui ne définissent pas la largeur, seulement quelque chose comme la section {display: block;

[Recommandations associées]

1. Entrée du site Web chinois php : largeur

2. Tutoriel vidéo gratuit sur le site Web PHP chinois : Tutoriel vidéo CSS

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!