CSS: Width et Max-Width

Pourquoi:

width: 98%;
max-width: 1140px;

faire la même chose que

width: 1140px;
max-width: 98%;

Le premier sens que je dis que la largeur est de 98%, mais ne vont pas plus grand que 1140px de large.

La deuxième toutefois dirais que la page est 1140px large mais SERAIT d'aller aussi grand que la page à 98% droit? E.g passé 1140px... mais apparemment pas, car il fait la même chose que la première.

Quelqu'un peut m'expliquer pourquoi?

cela vous donnera les connaissances complètes sur le width et max-width : teamtreehouse.com/forum/...

OriginalL'auteur Cameron | 2011-06-23

css

12

À partir de ma compréhension des propriétés:
```
if width > max-width use max-width
if max-width > width use width
```
Donc, à l'aide de votre exemple, cela doit signifier que 1140px est strictement inférieur à 98% à la résolution de l'écran que vous visualisez.

Réduire votre navigateur écran et vous obtiendrez des résultats différents.

C'est un peu sans rapport, mais j'ai trouvé max-width (et de la propriété correspondante max-height) à un problème avec les images dans Internet Explorer, et trouvé cela très utile dans le fait de convaincre d'utiliser les valeurs correctes:
```
img {
    max-width: 150px;
    max-height: 120px;
    width: auto !important;
    height: auto !important;
}
```
Sans les deux dernières propriétés, la plupart des navigateur respectant les standards correctement maintenir le ratio d'aspect, mais Internet Explorer ne seront pas, sauf si vous faites cela.

Edit: Il regarde comme je l'ai dit essentiellement la même réponse que tout le monde.

OriginalL'auteur Anthony Sottile
3

En supposant que le conteneur est la fenêtre de votre navigateur, si vous êtes sur une résolution de 1280 px résolution de l'écran, puis 98% serait 1254 px, ce qui est encore plus grand que 1140 px. Donc, vous voyez pas de différence. Essayez de passer à basse résolution comme 1024px

Ouais, mais pourquoi ne serait-il pas élargir PASSÉ 1140px que le max-width est fixé à 98% alors certes, il serait de 98% de la vue et si la vue est 1600px alors il faudrait aller au-delà de 1140 à droite?
Non, votre width est fixé à 1140px et votre max-width est fixé à 98%. Cela signifie qu'il n'ira pas PLUS de 98%, personne ne dit rien à ce sujet en VERTU de 98%
mais si je l'ai vue sur 1600px écran de 98% serait plus grand que 1140px alors comment se fait-il n'est pas adapté à cela? la largeur ne doit pas l'arrêter comme je l'ai dis, la largeur peut être de 98% et pas une taille fixe
Comme je l'ai dit, 98% pourraient être plus grands que 1140px, mais le max-width indique seulement une limite. Cela signifie qu'il ne sera jamais étirer à max-width, ne se rétrécir.
il ne vous causera pas de définir une largeur fixe à 1140px, comme je l'ai dit dans le commentaire de ma réponse

OriginalL'auteur Aziz Shaikh
3

Si vous fixe width et un max-width, cela signifie ce qui suit:

Si la largeur dépasse max-width, de la garder à max-width.
Si la largeur est inférieure max-width, le garder sur width.

Il ne sera jamais aller sur la max-width, cela ne veut pas dire qu'il ne peut pas rester sous, la max mot-clé indique évidemment une limite, et non une règle.

OriginalL'auteur Kokos
3

Dans votre premier exemple
```
width: 98%;
max-width: 1140px;
```
vous dit au navigateur de donner une largeur de 98% de l'écran, mais pas plus de 1140px.

Dans votre deuxième exemple,
```
width: 1140px;
max-width: 98%;
```
vous dit au navigateur de donner une largeur de 1140px mais pas de plus de 98% de la navigateur.

Mais, dans le second cas, la taille de votre écran devrait être plus petit que 1140px pour le max-width de la valeur à coup de pied dans.

Noter également que max-width est buggé dans de nombreuses anciennes versions d'IE.

Lire la suite ici: http://reference.sitepoint.com/css/max-width

OriginalL'auteur Jason Gennaro
1

Probablement dans votre premier cas de 98% est égale ou supérieure 1140px, donc il va rester à 1140px.

Dans le second cas, bien sûr, la largeur est 1140px, de sorte qu'elle adhère aux 1140px, et le max-width de devenir inutile.

Mise à jour
Essayer ici http://jsfiddle.net/

le max-width n'est pas inutile, car il NE garder le contenant 98%, mais jamais passé 1140px dans les DEUX versions...
ensuite, il vous suffit de faire width:98%; en avoir deux est sensless.
édité avec le violon

OriginalL'auteur Jose Faeti
1

voici comment je les comprends ..
ils sont de 2 boîtes -> width et max-width .

largeur ne peut pas dépasser max-width si la largeur n'a pas d'effet .
comme sage, si vous avez défini max-largeur inférieure à la largeur .. largeur n'a aucun effet .

à tout moment de votre navigateur convertit vos % en plus probable pixels
pourtant, les règles ci-dessus s'appliquent toujours .

exemples :
```
width: 98%;
max-width: 1140px;
```
ce qui est traduit :
```
width : 1960px;
max-width : 1140px;
```
cela signifie -> seule la largeur maximale s'applique .
```
width: 1140px;
max-width: 98%;
```
ce qui est traduit :
```
width : 1140;
max-width : 1960px;
```
cela signifie -> largeur est de 1140, mais ne peut pas dépasser 1960 .

OriginalL'auteur aeid
0

Les deux options est essentiellement à produire de l' même résultat, même avec une largeur de moins de 1140px, par exemple 500px:

Dans le premier cas:
```
width = min(98% * 500px, 1140px) = min(490px, 1140px) = 490px;
```
Dans le deuxième cas:
```
width = min(1140px, 98% * 500px) = min(1140px, 490px) = 490px;
```
Cependant, il y a un problème avec certains navigateurs, en particulier firefox 12.0, si vous utilisez la deuxième option dans un fieldset élément. Voir ici. Faites glisser la fenêtre du navigateur, et vous remarquerez que la première input élément qui utilise pourcentage max-width ne répond pas correctement.

En tant que tel, merci d'utiliser la première option:
```
width: percentage;
max-width: pixels;
```
OriginalL'auteur Question Overflow
0

la largeur de cette propriété css utilisé pour définir la largeur(largeur fixe), la largeur est fixe dans ce cas.

Exemple:
.propriété-ensemble{
width: 200px;
}

Cet ensemble fixe de largeur.e 200px

max-width - cette propriété css est utilisé pour régler la largeur, mais dans cette largeur peut être inférieure à la valeur réglée, mais la limite est de la valeur définie par l'utilisateur.

Exemple:
.propriété-ensemble{
max-width: 200px;
}

Cette série max de largeur.e 200px qui signifie que la largeur peut être de moins de 200px, mais pas plus de 200px

Merci..

OriginalL'auteur Amol Udage

Vous devez vous connecter pour publier un commentaire.