CSS a une compréhension approfondie de width: partage automatique d'exemples d'utilisation

Cet article présente principalement les informations pertinentes sur la compréhension approfondie de l'utilisation de width:auto en Css. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Avant-propos

Les gens qui lisent mon dernier article peuvent penser que je fais toute une histoire pour une taupinière. Ensuite je me référerai au livre "CSS World" pour revoir et comprendre avec chacun les points précis et l'impact sur notre code.

Tout d'abord, nous devons savoir que la valeur par défaut de la largeur est auto, il n'est donc pas nécessaire d'écrire manuellement du code pour contrôler automatiquement sa largeur.

Quatre manifestations de largeur commune

Utiliser pleinement l'espace disponible

Les éléments de bloc par défaut sont tous à 100 % de la largeur de l'élément parent, tout le monde le sait, mais beaucoup de gens écriront une largeur supplémentaire de 100 % pour les éléments de bloc.

Rétrécir et envelopper

Les plus courants sont les éléments de bloc flottants, en ligne et le positionnement absolu. Nous appelons cette propriété encapsulation.

Réduire au minimum

Ceci est plus susceptible d'apparaître dans les tableaux avec une disposition de tableau définie sur auto Lorsque nous ne contrôlons pas la largeur et la hauteur des cellules du tableau, lorsque chaque colonne est placée Lorsque le contenu est trop petit, le texte sera coupé. Cependant, les numéros de téléphone portable, les mots anglais, les chiffres, etc. ne peuvent pas être coupés. Cela peut entraîner certaines colonnes de texte uniquement, avec chaque mot. affiché dans une nouvelle ligne, appelée min-content.

Dépasse la largeur du conteneur

Les éléments généraux ne dépasseront pas l'affichage du conteneur à moins que les deux situations suivantes ne se produisent, en particulier la première est un problème souvent rencontré dans le développement de frontaux juniors.

1. Le contenu apparaît en anglais ou en chiffres, et est affiché sans sauts de ligne

2. Le style white-space:nowrap est défini, sans. sauts de ligne.

Pour les deux problèmes ci-dessus, vous pouvez apporter respectivement les corrections suivantes.

1. mot-break:break-all

2. espace blanc:normal

Autres propriétés

Taille externe et propriétés du fluide

Largeur d'écoulement normale

Les éléments de bloc ont des propriétés fluides par défaut et héritent de la largeur de l'élément parent. Ne dépassera pas la largeur de l'élément parent. Cependant, certaines personnes écrivent encore du code comme celui-ci :

a{
display:block;
width:100%;
}

Ou un code comme celui-ci, si vous définissez la largeur d'espacement ou quelque chose comme ceci pour l'étiquette a dans la navigation , l'étiquette devient en fait un bloc. Après la mise à niveau, elle obtiendra automatiquement sa propre largeur en fonction du calcul, ce qui n'est pas nécessaire.

.nav{
width:240px}
.nav-a{
display:block;
width:200px;
margin:0 10px;
padding:9px 10px ;}

Largeur formatée

La largeur formatée fait référence au modèle de positionnement absolu, y compris le positionnement absolu et la position fixe, mais les points de référence des deux sont différent. C'est tout. Par défaut, son attribut est inclusif et la largeur de la boîte est déterminée par la largeur du contenu, mais lorsque (éléments non de remplacement) gauche/droite sont définis en même temps, sa largeur est calculée par rapport à l'élément ancêtre le plus proche dont l'attribut de positionnement est pas statique. Sa largeur sera la largeur de l'élément parent -gauche-droite, mais les autres propriétés resteront inchangées. Ceci est d'une grande utilité dans notre mise en page actuelle, comme la mise en page qui combine largeur variable et largeur solide dans la technologie CSS pratique que j'ai partagée.

.par{
   width:1000px;
   position:relative;
   }
   //子元素宽度为700px
   .son{
   position:absolute;
   left:100px;
   right:200px;}

Taille interne et propriétés du fluide

Inclusion

L'inclusion signifie que lorsque l'élément est Quand il s'agit d'un élément non bloc, sa largeur est déterminée par le contenu et vous êtes uniquement responsable de son extension si nécessaire. Puisque l'extérieur est définitivement un élément bloc, il ne dépassera pas les caractéristiques du conteneur.

L'effet réel est que moins de texte peut être centré horizontalement et plus de texte peut être affiché à gauche sans script.

.container{
text-align:center;
}
.content{
display:inline-block;
text-align:left;
}

Largeur minimale préférée

La compréhension simple est que la largeur réelle de l'élément dépend de la plus petite unité de contenu, cette priorité est plus élevée que la largeur : 0 haut. Par exemple, si vous définissez la largeur sur 0, mais que le contenu contient un caractère chinois, ce sera la taille d'un caractère chinois ; s'il s'agit d'un mot, la taille d'un mot sera affichée.

À cette fin pratique, vous pouvez créer divers graphiques simples, tels que des formes concaves et convexes, puis définir le contenu en blanc.

.ao{
width:0;
display:inline-block;
}
.ao:before{
color:#fff;
content:'love你love';
outline:2px solid #000;
}

Largeur maximale

La largeur maximale est la largeur maximale que peut avoir un élément. Généralement, on l'utilise pour limiter du texte ou lorsqu'il y en a. il y a beaucoup de contenu. Il n’existe pas beaucoup de scénarios réels comme celui-ci.

Ici, nous n'étendons que deux effets de défilement, l'un est le défilement de page natif ou dom, et l'autre est affiché en définissant la relation de position entre les éléments internes et les conteneurs comme iscroll, qui a un meilleur effet.

Recommandations associées ;

Comment utiliser la marge 0 automatique en HTML

Définir ou renvoyer si l'audio et la vidéo démarrent après le chargement en HTML5 Lecture automatique de l'attribut Play

Explication détaillée de l'utilisation de la méthode de chargement automatique dans Laravel

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!