Unterschied zwischen Breite Auto und Breite 100 Prozent
97
Zuvor ging ich davon aus, width: autodass die Breite auf die des Inhalts eingestellt ist. Jetzt sehe ich, dass es die volle Breite des Elternteils nimmt.
Kann jemand bitte die Unterschiede zwischen diesen beschreiben?
Kurz gesagt: 1) auto, die Breite / Höhe des übergeordneten Div ist die Summe seiner untergeordneten Elemente. 2) 100 Prozent, seine Breite / Höhe wird die seiner Eltern sein. Siehe Artikel hier
Alan Dong
Antworten:
140
Breite auto
Die anfängliche Breite eines Blockebenenelements wie div oder p ist auto. Dadurch wird es erweitert, um den gesamten verfügbaren horizontalen Raum innerhalb seines enthaltenen Blocks zu belegen. Wenn es einen horizontalen Abstand oder Rand hat, addieren sich die Breiten nicht zur Gesamtbreite des Elements.
Breite 100%
Wenn Sie dagegen width: 100% angeben, beträgt die Gesamtbreite des Elements 100% des enthaltenen Blocks zuzüglich horizontaler Ränder, Auffüllungen und Rahmen (es sei denn, Sie haben die Boxgröße verwendet: border-box. In diesem Fall Zu 100% werden nur Ränder hinzugefügt, um die Berechnung der Gesamtbreite zu ändern. Dies ist vielleicht das, was Sie wollen, aber höchstwahrscheinlich nicht.
Um den Unterschied zu visualisieren, sehen Sie sich dieses Bild an:
Es hat also im Grunde nichts mit der Größe des Elementinhalts zu tun, sondern bezieht sich total auf die übergeordnete Breite?
Haemse
81
width: auto; wird sich bemühen, ein Element so breit wie sein übergeordneter Container zu halten, wenn zusätzlicher Platz an Rändern, Auffüllungen oder Rändern hinzugefügt wird.
width: 100%;macht das Element so breit wie der übergeordnete Container. Zusätzlicher Abstand wird zur Größe des Elements hinzugefügt, ohne Rücksicht auf das übergeordnete Element. Dies verursacht normalerweise Probleme.
das gleiche wie @ C-Link zur Verfügung gestellt, aber extra grafischere Oberfläche. also +1
Navin Rauniyar
8
Es geht um Ränder und Grenzen. Wenn Sie den Rahmen verwenden width: autound dann hinzufügen, wird Ihr div nicht größer als sein Container. Wenn Sie dagegen width: 100%einen Rand verwenden, beträgt die Breite des Elements 100% + Rand oder Rand. Weitere Informationen finden Sie hier .
Solange der Wert für width automatisch ist, kann das Element einen horizontalen Rand, eine Auffüllung und einen Rand haben, ohne breiter als sein Container zu werden (es sei denn natürlich, die Summe aus Rand links + Rand links Breite + Auffüllen links + Auffüllen rechts) + Rand-Rechts-Breite + Rand-Rechts ist größer als der Container). Die Breite des Inhaltsfelds entspricht der verbleibenden Breite, wenn Rand, Abstand und Rand von der Breite des Containers abgezogen wurden.
Wenn Sie dagegen width: 100% angeben, beträgt die Gesamtbreite des Elements 100% des enthaltenen Blocks zuzüglich horizontaler Ränder, Auffüllungen und Rahmen (es sei denn, Sie haben die Boxgröße verwendet: border-box. In diesem Fall Zu 100% werden nur Ränder hinzugefügt, um die Berechnung der Gesamtbreite zu ändern. Dies ist vielleicht das, was Sie wollen, aber höchstwahrscheinlich nicht.
Die anfängliche Breite eines Blockebenenelements wie div oder p ist auto.
Verwenden Sie width: auto, um explizit angegebene Breiten rückgängig zu machen.
Wenn Sie width: 100% angeben, beträgt die Gesamtbreite des Elements 100% des enthaltenen Blocks zuzüglich horizontaler Ränder, Auffüllungen und Rahmen.
Wenn Sie also das nächste Mal die Breite eines Blockebenenelements auf 100% einstellen, damit es die gesamte verfügbare Breite einnimmt, sollten Sie überlegen, ob Sie es wirklich auf Auto setzen möchten.
Breite 100%:
Es werden Inhalte mit 100% erstellt. Rand, Rand und Abstand werden zu dieser Breite hinzugefügt, und das Element läuft über, wenn eines dieser Elemente hinzugefügt wird.
Breite automatisch:
Passt das Element an den verfügbaren Platz an, einschließlich Rand, Rand und Abstand. Der nach dem Anpassen von Rand + Polsterung + Rand verbleibende Platz ist in Breite / Höhe verfügbar.
Breite 100% + Boxgröße: Randbox:
Passt das Element auch in den verfügbaren Platz, einschließlich Rand, Polsterung (der Rand führt dazu, dass der Container überläuft).
Dies beantwortet nicht die Frage nach dem Unterschied zwischen 100 & und Auto.
JoeTidee
1
Ja, ich weiß, aber ich versuche hier über width: auto und display: inline-block zu zeigen . Wenn wir die Breite eines Blockebenenelements automatisch erhöhen möchten, können wir dies verwenden. Und Unterschied zwischen 100% & Auto
Mohammed Javed
0
Wenn wir sagen
width:auto;
Die Breite überschreitet niemals die Gesamtbreite des übergeordneten Elements. Die maximale Breite ist die übergeordnete Breite. Selbst wenn wir Rand, Abstand und Rand hinzufügen, wird der Inhalt des Elements selbst kleiner, um Platz für Rand, Abstand und Rand zu schaffen. Wenn der für Rand + Auffüllen + Rand erforderliche Platz größer als die Gesamtbreite des übergeordneten Elements ist, wird die Breite des Inhalts Null.
Wenn wir sagen
width:100%;
Die Breite des Inhalts des Elements wird zu 100% des übergeordneten Elements. Wenn wir von nun an Rahmen, Auffüllungen oder Ränder hinzufügen, überschreitet das untergeordnete Element die Breite des übergeordneten Elements und es läuft über das übergeordnete Element hinaus.
Antworten:
Breite auto
Breite 100%
Um den Unterschied zu visualisieren, sehen Sie sich dieses Bild an:
Quelle
quelle
width: autosich das so verhält: stackoverflow.com/questions/28353625/…autotut das gleiche wiefill-availablewidth: auto;wird sich bemühen, ein Element so breit wie sein übergeordneter Container zu halten, wenn zusätzlicher Platz an Rändern, Auffüllungen oder Rändern hinzugefügt wird.width: 100%;macht das Element so breit wie der übergeordnete Container. Zusätzlicher Abstand wird zur Größe des Elements hinzugefügt, ohne Rücksicht auf das übergeordnete Element. Dies verursacht normalerweise Probleme.quelle
Es geht um Ränder und Grenzen. Wenn Sie den Rahmen verwenden
width: autound dann hinzufügen, wird Ihr div nicht größer als sein Container. Wenn Sie dagegenwidth: 100%einen Rand verwenden, beträgt die Breite des Elements 100% + Rand oder Rand. Weitere Informationen finden Sie hier .quelle
Solange der Wert für width automatisch ist, kann das Element einen horizontalen Rand, eine Auffüllung und einen Rand haben, ohne breiter als sein Container zu werden (es sei denn natürlich, die Summe aus Rand links + Rand links Breite + Auffüllen links + Auffüllen rechts) + Rand-Rechts-Breite + Rand-Rechts ist größer als der Container). Die Breite des Inhaltsfelds entspricht der verbleibenden Breite, wenn Rand, Abstand und Rand von der Breite des Containers abgezogen wurden.
Wenn Sie dagegen width: 100% angeben, beträgt die Gesamtbreite des Elements 100% des enthaltenen Blocks zuzüglich horizontaler Ränder, Auffüllungen und Rahmen (es sei denn, Sie haben die Boxgröße verwendet: border-box. In diesem Fall Zu 100% werden nur Ränder hinzugefügt, um die Berechnung der Gesamtbreite zu ändern. Dies ist vielleicht das, was Sie wollen, aber höchstwahrscheinlich nicht.
Quelle:
http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/
quelle
Die anfängliche Breite eines Blockebenenelements wie div oder p ist auto.
Verwenden Sie width: auto, um explizit angegebene Breiten rückgängig zu machen.
Wenn Sie width: 100% angeben, beträgt die Gesamtbreite des Elements 100% des enthaltenen Blocks zuzüglich horizontaler Ränder, Auffüllungen und Rahmen.
Wenn Sie also das nächste Mal die Breite eines Blockebenenelements auf 100% einstellen, damit es die gesamte verfügbare Breite einnimmt, sollten Sie überlegen, ob Sie es wirklich auf Auto setzen möchten.
quelle
Breite 100%: Es werden Inhalte mit 100% erstellt. Rand, Rand und Abstand werden zu dieser Breite hinzugefügt, und das Element läuft über, wenn eines dieser Elemente hinzugefügt wird.
Breite automatisch: Passt das Element an den verfügbaren Platz an, einschließlich Rand, Rand und Abstand. Der nach dem Anpassen von Rand + Polsterung + Rand verbleibende Platz ist in Breite / Höhe verfügbar.
Breite 100% + Boxgröße: Randbox: Passt das Element auch in den verfügbaren Platz, einschließlich Rand, Polsterung (der Rand führt dazu, dass der Container überläuft).
quelle
Breite verwenden: auto; + Anzeige: Inline-Block; in CSS geben fantastischen Effekt.
quelle
Wenn wir sagen
Die Breite überschreitet niemals die Gesamtbreite des übergeordneten Elements. Die maximale Breite ist die übergeordnete Breite. Selbst wenn wir Rand, Abstand und Rand hinzufügen, wird der Inhalt des Elements selbst kleiner, um Platz für Rand, Abstand und Rand zu schaffen. Wenn der für Rand + Auffüllen + Rand erforderliche Platz größer als die Gesamtbreite des übergeordneten Elements ist, wird die Breite des Inhalts Null.
Wenn wir sagen
Die Breite des Inhalts des Elements wird zu 100% des übergeordneten Elements. Wenn wir von nun an Rahmen, Auffüllungen oder Ränder hinzufügen, überschreitet das untergeordnete Element die Breite des übergeordneten Elements und es läuft über das übergeordnete Element hinaus.
quelle